diff --git a/src/components/Map/MapGisDrawing.vue b/src/components/Map/MapGisDrawing.vue index 7dc04724..0ea3b368 100644 --- a/src/components/Map/MapGisDrawing.vue +++ b/src/components/Map/MapGisDrawing.vue @@ -35,6 +35,7 @@ export default { newZb: null, newGeom: null, mapData: null, + map:this.guidProduct(), //地图服务地址 mapGeoServerUrl:"", }; @@ -68,7 +69,7 @@ export default { /* console.log(this.message);*/ //加载地图编辑 var that = this; - var map; + //var map; //var hc_land; var draw; // global so we can remove it later var vector_drawing; @@ -102,6 +103,7 @@ export default { }), isGroup: true, name: "卫星影像图", + resolution:Math.random() * 0.00000001 }); var yingxzi = new ol.layer.Tile({ @@ -110,9 +112,10 @@ export default { }), isGroup: true, name: "天地图文字标注--卫星影像图", + resolution:Math.random() * 0.00000001 }); //加载地图 - map = new ol.Map({ + that.map = new ol.Map({ controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮 layers: [aerial, yingxzi], projection: projection, @@ -122,7 +125,10 @@ export default { zoom: 15, minZoom: 5, //地图缩小限制 maxZoom: 18.3, //地图放大限制 - resolution:Math.random() * 0.00000001 + resolution:Math.random() * 0.00000001, + }), + interactions: ol.interaction.defaults({ + pinchRotate: false // 移动端禁止地图旋转 }), //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新 }); @@ -130,22 +136,14 @@ export default { var zjdTc; var zrzTc; var fsssTc; - map.removeLayer(zrzTc); - map.removeLayer(zjdTc); - map.removeLayer(fsssTc); + that.map.removeLayer(zrzTc); + that.map.removeLayer(zjdTc); + that.map.removeLayer(fsssTc); //宅基地图层查询开始 ------------------start - // var zjddmNew; - // if(that.$cookies.get("search").zjddm !=undefined && that.$cookies.get("search").zjddm !=""){ - // zjddmNew = that.$cookies.get("search").zjddm; - // }else { - // if(that.$cookies.get("item").zjddm !=undefined && that.$cookies.get("item").zjddm !=""){ - // zjddmNew = that.$cookies.get("item").zjddm; - // } - // } - var cql_filter_all = "dept_id='" + that.$cookies.get("search").deptId + "'" + "and zjddm='" + that.$cookies.get("search").zjddm + "'"; + + //村边界查询开始 ------------------------------end + var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + that.$cookies.get("search").zjddm + "'"; console.log(cql_filter_all); - console.log(that.$cookies.get("item")); - console.log(that.$cookies.get("search")); zjdTc= new ol.layer.Image({ source: new ol.source.ImageWMS({ url: that.mapGeoServerUrl +"/geoserver/zjd_dc/wms", @@ -158,7 +156,7 @@ export default { resolution:Math.random() * 0.00000001, }), }); - map.addLayer(zjdTc); + that.map.addLayer(zjdTc); //宅基地图层查询开始 ------------------start //自然幢图层查询开始 ------------------start zrzTc= new ol.layer.Image({ @@ -173,7 +171,7 @@ export default { resolution:Math.random() * 0.00000001, }), }); - map.addLayer(zrzTc); + that.map.addLayer(zrzTc); //自然幢图层查询结束 ------------------end //附属设施图层查询开始 ------------------start @@ -189,7 +187,7 @@ export default { resolution:Math.random() * 0.00000001, }), }); - map.addLayer(fsssTc); + that.map.addLayer(fsssTc); //附属设施图层查询结束 ------------------end //图层查询定位开始 ---------start if(this.message.substring(0,1) =="{"){ @@ -218,14 +216,14 @@ export default { }), }), }); - map.addLayer(hc_land); + that.map.addLayer(hc_land); var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX; var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY; var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX; var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 16.9, // 缩放级别 @@ -262,14 +260,14 @@ export default { }), }), }); - map.addLayer(hc_land); + that.map.addLayer(hc_land); var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX; var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY; var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX; var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 16.9, // 缩放级别 @@ -287,15 +285,15 @@ export default { //开始绘制地图 $("#"+this.drawingPolygonMap).click(function () { that.newGeom = 1; - map.removeLayer(hc_land); - map.removeLayer(vector_drawing); + that.map.removeLayer(hc_land); + that.map.removeLayer(vector_drawing); //that.closeMoule = null; - map.removeInteraction(draw); + that.map.removeInteraction(draw); //var source = new ol.source.Vector({wrapX: false}); vector_drawing = new ol.layer.Vector({ source: new ol.source.Vector(), }); - map.addLayer(vector_drawing); + that.map.addLayer(vector_drawing); function addInteraction() { draw = new ol.interaction.Draw({ @@ -308,12 +306,12 @@ export default { var coordinate = geometry.getCoordinates(); if(coordinate !="" && coordinate !=null){ //map.addLayer(vector_drawing); - map.removeInteraction(draw); + that.map.removeInteraction(draw); } that.closeMoule = coordinate; that.formSubmit(); }); - map.addInteraction(draw); + that.map.addInteraction(draw); } addInteraction(); @@ -328,9 +326,9 @@ export default { $("#"+this.drawingResetMap).click(function () { that.newGeom = 2; if(that.closeMoule !=null) { - map.addLayer(hc_land); - map.removeInteraction(draw); - map.removeLayer(vector_drawing); + that.map.addLayer(hc_land); + that.map.removeInteraction(draw); + that.map.removeLayer(vector_drawing); that.formSubmit(); } }); @@ -381,7 +379,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 17.9, // 缩放级别 @@ -423,7 +421,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 16.9, // 缩放级别 @@ -465,7 +463,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 17.9, // 缩放级别 @@ -508,7 +506,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 16.9, // 缩放级别 @@ -548,7 +546,7 @@ export default { }); //加载地图 - map = new ol.Map({ + that.map = new ol.Map({ controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮 layers: [aerial, yingxzi], projection: projection, @@ -610,8 +608,8 @@ export default { console.log(data); let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize()); resolution:resolution + Math.random() * 0.00000001, - map.getView().fit(data.bbox); - map.getView().setResolution(resolution); + that.map.getView().fit(data.bbox); + that.map.getView().setResolution(resolution); // var datamap = data.bbox; // var center = ol.extent.getCenter(datamap); // map.getView().animate({ @@ -623,7 +621,7 @@ export default { .catch((error) => { console.log("【异常】", error); }); - map.addLayer(cunTc); + that.map.addLayer(cunTc); //村边界查询开始 ------------------------------end //宅基地图层查询开始 ------------------start //var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'"; @@ -638,7 +636,7 @@ export default { }, }), }); - map.addLayer(zjdTc); + that.map.addLayer(zjdTc); //宅基地图层查询开始 ------------------start // getQueryLand().then((response) => { // if (response.code == 200) { @@ -674,12 +672,12 @@ export default { //开始绘制地图 $("#"+this.drawingPolygonMap).click(function () { //that.closeMoule = null; - map.removeInteraction(draw); + that.map.removeInteraction(draw); //var source = new ol.source.Vector({wrapX: false}); vector_drawing = new ol.layer.Vector({ source: new ol.source.Vector(), }); - map.addLayer(vector_drawing); + that.map.addLayer(vector_drawing); function addInteraction() { draw = new ol.interaction.Draw({ @@ -698,7 +696,7 @@ export default { that.closeMoule = coordinate; that.formSubmit(); }); - map.addInteraction(draw); + that.map.addInteraction(draw); } addInteraction(); @@ -712,8 +710,8 @@ export default { // }); //还原之前图层 $("#"+this.drawingResetMap).click(function () { - map.removeInteraction(draw); - map.removeLayer(vector_drawing); + that.map.removeInteraction(draw); + that.map.removeLayer(vector_drawing); //that.closeMoule = null; that.formSubmit(); }); @@ -755,7 +753,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 17.9, // 缩放级别 @@ -798,7 +796,7 @@ export default { var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 - map.getView().animate({ + that.map.getView().animate({ // 只设置需要的属性即可 center: center, // 中心点 zoom: 16.9, // 缩放级别 diff --git a/src/views/homesteadSurvey/add.vue b/src/views/homesteadSurvey/add.vue index f8c3ece8..8f67385c 100644 --- a/src/views/homesteadSurvey/add.vue +++ b/src/views/homesteadSurvey/add.vue @@ -20,7 +20,7 @@
- +

宅基地

@@ -446,7 +446,7 @@ placeholder="备注" maxlength="200" /> - +
保存
@@ -1039,7 +1039,7 @@ label="备注" placeholder="备注" /> - +
保存
@@ -2418,7 +2418,7 @@ label="备注" placeholder="备注" /> - +
保存
@@ -3155,6 +3155,10 @@ cookiesInfo:null, // 异常标记照片 fileListyc:[], + //刷新随机数 + zjdProductResh:this.guidProduct(), + zrzProductResh:this.guidProduct(), + fsssProductResh:this.guidProduct(), }; }, created(){ @@ -3217,6 +3221,7 @@ this.cookiesInfo = this.$cookies.get("search") this.$cookies.set("search","") this.item = this.cookiesInfo + this.$cookies.set("search",this.cookiesInfo); if(this.item.houseDataConfirmStatus!="CONFIRMED"){ this.isFinished = true } @@ -4521,7 +4526,7 @@ this.form.djName = res.dictLabel } }) - this.mapClickLoading(); + this.zjdProduct(); }); }else{ let params = { @@ -4556,7 +4561,7 @@ this.form.suyqrdm = response.rows[0].suyqrdm this.form.zl = response.rows[0].suyqrmc } - this.mapClickLoading(); + this.zjdProductResh(); }); } }, @@ -5478,7 +5483,7 @@ } this.showzrz = true; - this.mapClickLoading(); + this.zrzProduct(); this.active = 3; // if(){ // @@ -5811,7 +5816,7 @@ } this.showfsss = true; this.active = 4; - this.mapClickLoading(); + this.fsssProduct(); } }, showPopup3() { @@ -6006,15 +6011,13 @@ }, //地图加载js------start mapClickLoading(){ - //this.$cookies.set("item", this.form); - console.log(this.$cookies.get("item")); setTimeout(() => { if(this.active =="1"){ - this.$refs.drewingClickLoading1.drawingPaceCountryDarw(); + this.$refs[this.zjdProductResh].drawingPaceCountryDarw(); }else if(this.active=="3"){ - this.$refs.drewingClickLoading3.drawingPaceCountryDarw(); + this.$refs[this.zrzProductResh].drawingPaceCountryDarw(); }else if(this.active=="4"){ - this.$refs.drewingClickLoading4.drawingPaceCountryDarw(); + this.$refs[this.fsssProductResh].drawingPaceCountryDarw(); } else { } @@ -6032,6 +6035,26 @@ } }, + zjdProduct(){ + this.zjdProductResh = this.guidProduct(); + console.log(this.zjdProductResh); + this.mapClickLoading(); + }, + zrzProduct(){ + this.zrzProductResh = this.guidProduct(); + this.mapClickLoading(); + }, + fsssProduct(){ + this.fsssProductResh = this.guidProduct(); + this.mapClickLoading(); + }, + guidProduct(){ + return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0, + v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + }); + }, //地图加载js------end } } diff --git a/src/views/homesteadSurvey/list.vue b/src/views/homesteadSurvey/list.vue index 29f64245..c12a445b 100644 --- a/src/views/homesteadSurvey/list.vue +++ b/src/views/homesteadSurvey/list.vue @@ -1382,6 +1382,7 @@ backTheGeom:"", //地图服务地址 mapGeoServerUrl:"", + backMap:"", // 任务完成标记 isFinished:false, @@ -1390,10 +1391,10 @@ mounted(){ }, created(){ - // if(location.href.indexOf("#reloaded")==-1){ - // location.href=location.href+"#reloaded"; - // location.reload(); - // } + if(location.href.indexOf("#reloaded")==-1){ + location.href=location.href+"#reloaded"; + location.reload(); + } this.getDicts("zjlx").then(response => { this.zjlxOptions = response.data; }); @@ -2921,13 +2922,12 @@ zoom: 10, minZoom: 5, //地图缩小限制 maxZoom: 18.3, //地图放大限制 - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }), interactions: ol.interaction.defaults({ pinchRotate: false // 移动端禁止地图旋转 }), }); - //使用geoserver服务查询开始 -------------------start //镇边界查询开始 ------------------------------start // var zhenTc= new ol.layer.Tile({ @@ -2945,21 +2945,21 @@ //镇边界查询开始 ------------------------------end //村边界查询开始 ------------------------------start var cql_filter - if(that.mapAddJumpNum == 1){ + if (that.mapAddJumpNum == 1) { cql_filter = "dept_id='" + that.mapAddJump + "'"; } else { cql_filter = "dept_id='" + that.$cookies.get("item").deptId + "'"; } - var cunTc= new ol.layer.Image({ + var cunTc = new ol.layer.Image({ source: new ol.source.ImageWMS({ - url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms", + url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms", params: { LAYERS: 'zjd_dc:t_house_survey_border_village', TILED: true, cql_filter: cql_filter, SRID: 3857, }, - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }), }); //定位查询位置 @@ -2976,7 +2976,7 @@ outputFormat: "application/json", //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 }; - let url_dw = that.mapGeoServerUrl+"/geoserver/zjd_dc/wfs"; //wfsurl; + let url_dw = that.mapGeoServerUrl + "/geoserver/zjd_dc/wfs"; //wfsurl; url_dw = url_dw + "?"; for (let key in param_dw) { url_dw = url_dw + key + "=" + param_dw[key] + "&"; @@ -2990,7 +2990,7 @@ return geojsonmap; }) .then((data) => { - if(that.backTheGeom !="" && that.backTheGeom !=undefined && that.backTheGeom.substring(0,1) =="{"){ + if (that.backTheGeom != "" && that.backTheGeom != undefined && that.backTheGeom.substring(0, 1) == "{") { hc_land_on = new ol.layer.Vector({ title: "add Layer", source: new ol.source.Vector({ @@ -3018,13 +3018,17 @@ zoom: 17.9, // 缩放级别 rotation: undefined, // 缩放完成view视图旋转弧度 duration: 1000, // 缩放持续时间，默认不需要设置 - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }); - } else if(that.backTheGeom !="" && that.backTheGeom !=undefined && that.backTheGeom.substring(0,1) =="[") { + this.backMap =1; + } else if (that.backTheGeom != "" && that.backTheGeom != undefined && that.backTheGeom.substring(0, 1) == "[") { //that.newHt ="1"; - var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.backTheGeom.replaceAll("\"","")]}); - var leftJoin = zbNew.replace("\"[","["); - var rightJoin = leftJoin.replace("\"]","]"); + var zbNew = JSON.stringify({ + "type": "MultiPolygon", + "coordinates": [that.backTheGeom.replaceAll("\"", "")] + }); + var leftJoin = zbNew.replace("\"[", "["); + var rightJoin = leftJoin.replace("\"]", "]"); hc_land_on = new ol.layer.Vector({ title: "add Layer", source: new ol.source.Vector({ @@ -3058,12 +3062,13 @@ zoom: 16.9, // 缩放级别 rotation: undefined, // 缩放完成view视图旋转弧度 duration: 1000, // 缩放持续时间，默认不需要设置 - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }); - }else { - let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize()); + this.backMap =1; + } else { + let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize()); resolution:resolution + Math.random() * 0.00000001, - map.getView().fit(data.bbox); + map.getView().fit(data.bbox); map.getView().setResolution(resolution); } }) @@ -3074,55 +3079,69 @@ //村边界查询开始 ------------------------------end //宅基地图层查询开始 ------------------start //var cql_filter_all = "dept_id='" + that.$cookies.get("item").deptId + "'"; - var zjdTc= new ol.layer.Image({ + var zjdTc = new ol.layer.Image({ source: new ol.source.ImageWMS({ - url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms", + url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms", params: { LAYERS: 'zjd_dc:t_house_survey_zjdzd', TILED: true, cql_filter: cql_filter, SRID: 3857, }, - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }), }); map.addLayer(zjdTc); //宅基地图层查询开始 ------------------start //自然幢图层查询开始 ------------------start - var zrzTc= new ol.layer.Image({ + var zrzTc = new ol.layer.Image({ source: new ol.source.ImageWMS({ - url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms", + url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms", params: { LAYERS: 'zjd_dc:t_house_survey_zrz', TILED: true, cql_filter: cql_filter, SRID: 3857, }, - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }), }); map.addLayer(zrzTc); //自然幢图层查询开始 ------------------start //附属设施图层查询开始 ------------------start - var fsssTc= new ol.layer.Image({ + var fsssTc = new ol.layer.Image({ source: new ol.source.ImageWMS({ - url: that.mapGeoServerUrl+"/geoserver/zjd_dc/wms", + url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms", params: { LAYERS: 'zjd_dc:t_house_survey_fsss', TILED: true, cql_filter: cql_filter, SRID: 3857, }, - resolution:Math.random() * 0.00000001, + resolution: Math.random() * 0.00000001, }), }); map.addLayer(fsssTc); //附属设施图层查询开始 ------------------start //使用geoserver服务查询开始 -------------------end - - + if(this.backMap ==1){ + var cql = "dept_id='" + that.$cookies.get("item").deptId + "'" + "and zjddm='" + this.mapZjdTeAll.mapZjdAData.zjddm + "'"; + var wmsSourceBack = new ol.source.ImageWMS({ + crossOrigin: 'anonymous', + params: { + LAYERS: 'zjd_dc:t_house_survey_all', + 'VERSION': '1.1.0', + 'FORMAT': "image/png", + 'CQL_FILTER': cql + }, + serverType: 'geoserver', + url: that.mapGeoServerUrl + "/geoserver/zjd_dc/wms", + }); + zjdTc.setSource(wmsSourceBack); + ol.view.setResolution(ol.view.getResolution() + Math.random() * 0.00000001);//随机数缩放实现刷新 + } //数据库直接加载数据渲染方式---------------------------------------------------start //判断当前账套是否有数据 // var mapTalkAbout = true; @@ -4498,6 +4517,7 @@ //属性查询结束 ------------------end //点击查询详细信息 map.on("singleclick", function (evt) { + console.log(evt); let feature = map.forEachFeatureAtPixel( evt.pixel, (feature) => feature