From d6d72502cdbc0cfd98e9a601d2fad87c131e02ad Mon Sep 17 00:00:00 2001 From: hbao Date: Thu, 24 Feb 2022 16:29:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=80=BB=E6=9D=91=E5=9C=B0=E5=9B=BE=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/homesteadSurvey/list.vue | 411 ++++++++++++++++++----------- 1 file changed, 259 insertions(+), 152 deletions(-) diff --git a/src/views/homesteadSurvey/list.vue b/src/views/homesteadSurvey/list.vue index a099018a..c40f391a 100644 --- a/src/views/homesteadSurvey/list.vue +++ b/src/views/homesteadSurvey/list.vue @@ -382,27 +382,53 @@
- +
+ -
-
-
-
- -
-
搜索
+
+ + + +
+ + + + + + + + + + +
- +
@@ -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;