@@ -1231,7 +1257,14 @@
selectionIconShow: false,
//搜索栏目-操作栏显隐
searchBarOperVisbile: false,
+ mapDataAll: [],
+ showSearch:false,
+ bottomHeight:'0px',
//搜索---end
+ //测面
+ textMjAll:"",
+ clickBbox:"",
+ textMjAllNum:"",
//地图使用 --end
};
},
@@ -1792,6 +1825,12 @@
setTimeout(() => {
this.GetMapsInit();
}, 300);
+ var that = this;
+ setTimeout(function () {
+ var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+ console.log($('.searchBox').outerHeight(true)+'px')
+ that.bottomHeight = -height+'px'
+ },500)
},
//地图加载 -----start
GetMapsInit() {
@@ -1916,13 +1955,14 @@
map.addLayer(cunTc);
//村边界查询开始 ------------------------------end
//宅基地图层查询开始 ------------------start
+ var cql_filter_all = "dept_name='" + that.$cookies.get("item").deptName + "'";
var zjdTc= new ol.layer.Tile({
source: new ol.source.TileWMS({
url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: {
LAYERS: 'zjd_dc:t_house_survey_zjdzd',
TILED: true,
- //cql_filter: cql_filter,
+ cql_filter: cql_filter_all,
SRID: 3857,
},
}),
@@ -1937,6 +1977,7 @@
params: {
LAYERS: 'zjd_dc:t_house_survey_zrz',
TILED: true,
+ cql_filter: cql_filter_all,
SRID: 3857,
},
}),
@@ -1951,6 +1992,7 @@
params: {
LAYERS: 'zjd_dc:t_house_survey_fsss',
TILED: true,
+ cql_filter: cql_filter_all,
SRID: 3857,
},
}),
@@ -2447,16 +2489,15 @@
*/
var val = that.seachText;
if (val == "") {
- alert("请填写查询条件在查询");
+ that.$toast('请填写查询条件再查询');
} else {
+ //清除之前查询数据
+ that.mapDataAll =[];
//分类查询查询农地、农房
var difang;
//查询条件
- var cql_filter;
-
- console.log(this.$cookies);
- //var cun = _this.villageDataObj.deptName;
-
+ var cql_filter_cun;
+ var cun = that.$cookies.get("item").deptName;
difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
var tach = 0;
var once = 0;
@@ -2468,15 +2509,16 @@
//var han = /^[\u4e00-\u9fa5]+$/;
if (reg.test(val)) {
//循环判断查询条件
- cql_filter = "XH='" + val + "'" + "and dept_name='" + cun + "'";
+ cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else {
//循环判断查询条件
if (difang[i] == "zjd_dc:t_house_survey_zjdzd") {
- cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
+ console.log("hhhhhh");
+ cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_zrz") {
- cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
+ cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
} else if(difang[i] == "zjd_dc:t_house_survey_fsss") {
- cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
+ cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'";
}
}
//for(var i=0; i< difang.length; i++){
@@ -2487,15 +2529,12 @@
//业务图层 wms服务
delete_map[i] = new ol.layer.Tile({
source: new ol.source.TileWMS({
- //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
- url: "http://116.255.223.226:8080/geoserver/nsgk_hc/wms",
- //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
- //url: 'http://localhost:8888/geoserver/new_shp/wms',
+ url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms",
params: {
LAYERS: difang[i],
//'LAYERS': 'new_shp:new_shp_all',
TILED: true,
- cql_filter: cql_filter,
+ cql_filter: cql_filter_cun,
SRID: 3857,
},
}),
@@ -2510,13 +2549,13 @@
request: "GetFeature",
typename: difang[i],
//featureNS: 'nsgk_hc',//命名空间 URI
- cql_filter: cql_filter,
+ cql_filter: cql_filter_cun,
//featurePrefix: 'nationalwater',//工作区名称
//featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
outputFormat: "application/json",
//filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
};
- let url_dw = "http://116.255.223.226:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
+ let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/wfs"; //wfsurl;
url_dw = url_dw + "?";
for (let key in param_dw) {
url_dw = url_dw + key + "=" + param_dw[key] + "&";
@@ -2532,115 +2571,26 @@
.then((data) => {
tach = tach + 1;
if (data.features != null && data.features != "") {
- //var datamap = data.bbox;
- var datamap = data.features[0].bbox;
- map.getView().animate({
- // 只设置需要的属性即可
- center: datamap, // 中心点
- zoom: 17, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间，默认不需要设置
- });
- //特效动画实现 -----------------------------start
- if (tach == 1 && once == 0) {
- texiao_layer_fang = new ol.layer.Vector({
- source: new ol.source.Vector(),
- });
- map.addLayer(texiao_layer_fang);
- var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
- var circle = new ol.Feature({
- geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
- });
-
- //var out =new ol.coordinate.Coordinate(datamap);
- //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
- //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
- //map.getView().setCenter(center); //设置当前地图的显示中心位置
- circle.setStyle(
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 0,
- stroke: new ol.style.Stroke({
- color: "yellow",
- size: 1,
- }),
- }),
- })
- );
- texiao_layer_fang.getSource().addFeature(circle);
-
- // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
- var radius = 0;
- map.on("postcompose", function () {
- // 增大半径，最大20
- radius++;
- radius = radius % 10;
- // 设置样式
- circle.setStyle(
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: radius,
- stroke: new ol.style.Stroke({
- color: "yellow",
- size: 1,
- }),
- }),
- })
- );
- });
- } else {
- texiao_layer_di = new ol.layer.Vector({
- source: new ol.source.Vector(),
- });
- map.addLayer(texiao_layer_di);
- var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置
- var circle = new ol.Feature({
- geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标
- });
-
- //var out =new ol.coordinate.Coordinate(datamap);
- //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
- //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置
- //map.getView().setCenter(center); //设置当前地图的显示中心位置
- circle.setStyle(
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 0,
- stroke: new ol.style.Stroke({
- color: "yellow",
- size: 1,
- }),
- }),
- })
- );
- texiao_layer_di.getSource().addFeature(circle);
-
- // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式
- var radius = 0;
- map.on("postcompose", function () {
- // 增大半径，最大20
- radius++;
- radius = radius % 10;
- // 设置样式
- circle.setStyle(
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: radius,
- stroke: new ol.style.Stroke({
- color: "yellow",
- size: 1,
- }),
- }),
- })
- );
- });
+ // var datamap = data.features[0].bbox;
+ // map.getView().animate({
+ // // 只设置需要的属性即可
+ // center: datamap, // 中心点
+ // zoom: 17, // 缩放级别
+ // rotation: undefined, // 缩放完成view视图旋转弧度
+ // duration: 1000, // 缩放持续时间，默认不需要设置
+ // });
+ var exfor = 0;
+ for(exfor;data.features.length > exfor; exfor++){
+ that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[exfor].properties)));
}
- //特效动画实现 -----------------------------end
+ let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize());
+ map.getView().fit(data.bbox);
+ map.getView().setResolution(resolution);
} else if (tach == 1) {
once = once + 1;
} else {
- if (tach == 2 && once == 1) {
- alert("没有找到相关人员农房农地信息");
+ if (once == 1 && tach == 3) {
+ that.$toast("没有找到相关人员信息");
}
}
})
@@ -2649,15 +2599,88 @@
});
map.addLayer(delete_map[i]);
}
+ console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true))
+ that.showSearch = true ;
+ var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+ document.styleSheets[0].insertRule(
+ "@keyframes test" +
+ "{" +
+ "0%{bottom: -" + height + "px;}" +
+ "100%{bottom: 0px;}" +
+ "}"
+ )
+ $('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'});
}
});
//按照查询 定位地图-----------------end
-
// //获取类型开始 侧面-----------------------------------------------------------------start
+ //样式加载定义
+ var vector_drawing_delete;
$("#area").click(function () {
console.log("进入测面");
-
+ if(that.textMjAll != "" && that.clickBbox !=""){
+ // var styleFsss = new ol.style.Style({
+ // text: new ol.style.Text({
+ // text: that.textMjAll+"㎡",
+ // font: '30px sans-serif',
+ // textAlign: "center",
+ // textBaseline: "middle",
+ // //font: 'verdana',
+ // fill: new ol.style.Fill({
+ // color: "#ff00ff"
+ // }),
+ // // backgroundFill: new ol.style.Fill({
+ // // color: "#ff0000"
+ // // }),
+ // font: "30px sans-serif",
+ // stroke: new ol.style.Stroke({
+ // color: "#ffffff"
+ // // width: 3
+ // }),
+ // offsetX: parseInt(0, 10),
+ // offsetY: parseInt(0, 10),
+ // placement: "point", //point 则自动计算面的中心k点然后标注 line 则根据面要素的边进行标注
+ // overflow: false //超出面的部分不显示
+ // }),
+ // });
+ map.removeLayer(vector_drawing_delete);
+ function createLabelStyle() {
+ return new ol.style.Style({
+ text: new ol.style.Text({
+ text: that.textMjAll+"㎡",
+ textAlign: "center", //位置
+ textBaseline: "middle", //基准线
+ font: "normal 12px 微软雅黑", //文字样式
+ //text: "标注点", //文本内容
+ fill: new ol.style.Fill({
+ //文本填充样式（即文字颜色)
+ color: "#FF6666",
+ }),
+ overflow: false //超出面的部分不显示
+ }),
+ zIndex: 9999,
+ });
+ }
+ var newcenterFeature = new ol.Feature({
+ geometry: new ol.geom.Point(that.clickBbox), //几何信息
+ //name: "标注点",
+ });
+ var sourceMapLook = new ol.source.Vector({wrapX: false});
+ vector_drawing_delete = new ol.layer.Vector({
+ source: sourceMapLook,
+ });
+ map.addLayer(vector_drawing_delete);
+ newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
+ sourceMapLook.addFeature(newcenterFeature);
+ that.clickBbox ="";
+ that.textMjAll = "";
+ //map.addLayer(styleFsss);
+ } else if(that.textMjAllNum == "1"){
+ that.$toast("该图层面积暂无信息");
+ } else {
+ that.$toast("选择图层进行面积显示");
+ }
});
// $("#area").click(function () {
// console.log("进入测面")
@@ -3013,6 +3036,25 @@
"EPSG:3857",
{ INFO_FORMAT: "text/html" }
);
+ var url_bbox = wmsSource.getFeatureInfoUrl(
+ evt.coordinate,
+ viewResolution,
+ "EPSG:3857",
+ { INFO_FORMAT: "application/json" }
+ );
+ if (url_bbox) {
+ fetch(url_bbox).then((res) => {
+ var geojsonmap = res.json();
+ return geojsonmap;
+ })
+ .then((data) => {
+ var center = ol.extent.getCenter(data.bbox); //获取边界区域的中心位置
+ that.clickBbox = center;
+ })
+ .catch((error) => {
+ console.log("【异常】", error);
+ });
+ }
if (url) {
fetch(url)
.then(function (response) {
@@ -3169,7 +3211,11 @@
}
});
let cloneObj = JSON.parse(JSON.stringify(obj));
- that.dataSj =
+ if(obj.zdmj != ""){
+ that.textMjAll = obj.zdmj;
+ } else {
+ that.textMjAllNum = "1";
+ }
that.mapZjdData = cloneObj;
} else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){
let obj = {};
@@ -3222,6 +3268,11 @@
});
let cloneObj = JSON.parse(JSON.stringify(obj));
that.mapZrzData = cloneObj;
+ if(obj.scjzmj != ""){
+ that.textMjAll = obj.scjzmj;
+ } else {
+ that.textMjAllNum = "1";
+ }
} else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_fsss"){
let obj = {};
that.mapHasDateStatus = 0;
@@ -3367,6 +3418,11 @@
});
let cloneObj = JSON.parse(JSON.stringify(obj));
that.mapFsssData = cloneObj;
+ if(obj.jzmj != ""){
+ that.textMjAll = obj.jzmj;
+ } else {
+ that.textMjAllNum = "1";
+ }
} else {
}
@@ -3870,6 +3926,18 @@
this.farmlandEditSwitchVisbuleFun("hide");
this.landHomesteadEditVisbileFun("show");
},
+ closeSearchBox(){
+ this.showSearch = false ;
+ var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+ document.styleSheets[0].insertRule(
+ "@keyframes test2" +
+ "{" +
+ "0%{bottom: 0px}" +
+ "100%{bottom: -" + height + "px;}" +
+ "}"
+ )
+ $('.searchBar_wrap').css({'animation':'test2 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test2 0.5s ease-in-out 0s 1 alternate forwards'});
+ } ,
//删除农地信息
deletefdInfo() {
this.$dialog
@@ -3945,12 +4013,12 @@
margin:0 10px;
box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
}
- .van-cell__label{
- color: #969799;
- font-size: 12px;
- line-height: 20px;
- margin:0
- }
+ /*.van-cell__label{*/
+ /* color: #969799;*/
+ /* font-size: 12px;*/
+ /* line-height: 20px;*/
+ /* margin:0*/
+ /*}*/
.map_area {
width: 50vw;
height: 50vh;
@@ -4218,17 +4286,56 @@
}
.van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;}
- .searchBar_wrap {
+ searchBar_wrap {
// display: none;
- display: flex;
position: fixed;
- bottom: 0%;
left: 0;
+ bottom: 0;
width: 100%;
- padding: 28px 16px 28px 13px;
+ padding: 0px 16px 0px 13px;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
+ z-index: 9;
+ .searchBox{
+ .van-cell{
+ /*&:first-child{*/
+ /* box-shadow: none;*/
+ /* margin:0;*/
+ /*}*/
+ box-shadow: 0px 0px 5px #cccccc;
+ border-radius: 15PX;
+ margin-bottom: 0.35rem;
+ }
+ .van-cell__title{
+ flex: 0.8;
+ p{
+ color: rgb(34, 183, 242);
+ .van-icon{
+ vertical-align: middle;
+ }
+ span{
+ vertical-align: middle;
+ &:nth-child(3){
+ font-size: 0.25rem;
+ border-radius: 5PX;
+ padding: 5PX 15PX;
+ margin-left: 50%;
+ }
+ }
+ }
+ }
+ .van-cell__value{
+ flex: 0.2;
+ p{
+ font-size: 0.25rem;
+ display: inline-block;
+ border-radius: 1rem;
+ line-height: 1;
+ padding: 15PX 20PX;
+ }
+ }
+ }
.actionBar_wrap {
display: flex;
position: absolute;