diff --git a/src/components/Map/MapGisDrawing.vue b/src/components/Map/MapGisDrawing.vue index 12a2b86a..c559dda8 100644 --- a/src/components/Map/MapGisDrawing.vue +++ b/src/components/Map/MapGisDrawing.vue @@ -32,6 +32,8 @@ export default { drawingResetMap: this.guidProduct(), positioningMap: this.guidProduct(), newZb: null, + newGeom: null, + mapData: null, }; }, props: ['theGeom','message'], @@ -111,6 +113,7 @@ export default { maxZoom: 18.3, //地图放大限制 }), }); + that.mapData= that.message; //图层查询定位开始 ---------start if(this.message.substring(0,1) =="{"){ //that.newHt ="1"; @@ -202,6 +205,7 @@ export default { //图层查询定位结束 ---------end //开始绘制地图 $("#"+this.drawingPolygonMap).click(function () { + that.newGeom = 1; map.removeLayer(hc_land); map.removeLayer(vector_drawing); //that.closeMoule = null; @@ -241,6 +245,7 @@ export default { // }); //还原之前图层 $("#"+this.drawingResetMap).click(function () { + that.newGeom = 2; if(that.closeMoule !=null) { map.addLayer(hc_land); map.removeInteraction(draw); @@ -250,9 +255,186 @@ export default { }); //定位当前绘制图层 $("#"+this.positioningMap).click(function () { - setTimeout(() => { - that.drawingPaceCountryDarw(); - }, 100); + //图层查询定位开始 ---------start + console.log(that.message); + console.log(that.closeMoule); + console.log(that.newGeom); + // var dwmap; + // if(that.closeMoule != null && that.closeMoule !=""){ + // dwmap = JSON.stringify(that.closeMoule); + // }else { + // console.log(that.newGeom); + // dwmap = JSON.stringify(that.newGeom); + // } + var deMap = JSON.stringify(that.closeMoule); + if(that.newGeom == 1){ + if(deMap.substring(0,1) =="{"){ + //that.newHt ="1"; + // var theGeomMap =this.message.replace("Point", "MultiPolygon"); + // var pointLeft = theGeomMap.replace("[", "[[[["); + // var pointRight = pointLeft.replace("]", "]]]]"); + hc_landFuther = new ol.layer.Vector({ + title: "add Layer", + source: new ol.source.Vector({ + projection: projection, + features: new ol.format.GeoJSON().readFeatures("{\n" + + " \"type\": \"Feature\",\n" + + " \"geometry\":" + deMap + "}"), + }), + style: new ol.style.Style({ + fill: new ol.style.Fill({ + //矢量图层填充颜色，以及透明度 + color: "rgba(204, 255, 204,0.3)", + }), + stroke: new ol.style.Stroke({ + //边界样式 + color: "#47c68f", + width: 3, + }), + }), + }); + //map.addLayer(hc_land); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; + //定位查询位置 + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 + map.getView().animate({ + // 只设置需要的属性即可 + center: center, // 中心点 + zoom: 17.9, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); + // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); + // map.getView().setResolution(resolution); + } else if(deMap.substring(0,1) =="[") { + //that.newHt ="1"; + var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [deMap.replaceAll("\"", "")]}); + var leftJoin = zbNew.replace("\"[", "["); + var rightJoin = leftJoin.replace("\"]", "]"); + hc_landFuther = new ol.layer.Vector({ + title: "add Layer", + source: new ol.source.Vector({ + projection: projection, + features: new ol.format.GeoJSON().readFeatures("{\n" + + " \"type\": \"Feature\",\n" + + " \"geometry\":" + rightJoin + "}"), + }), + style: new ol.style.Style({ + fill: new ol.style.Fill({ + //矢量图层填充颜色，以及透明度 + color: "rgba(204, 255, 204,0.3)", + }), + stroke: new ol.style.Stroke({ + //边界样式 + color: "#47c68f", + width: 3, + }), + }), + }); + //map.addLayer(hc_land); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; + //定位查询位置 + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 + map.getView().animate({ + // 只设置需要的属性即可 + center: center, // 中心点 + zoom: 16.9, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } + } else { + console.log(that.mapData); + if(that.mapData.substring(0,1) =="{"){ + //that.newHt ="1"; + // var theGeomMap =this.message.replace("Point", "MultiPolygon"); + // var pointLeft = theGeomMap.replace("[", "[[[["); + // var pointRight = pointLeft.replace("]", "]]]]"); + hc_landFuther = new ol.layer.Vector({ + title: "add Layer", + source: new ol.source.Vector({ + projection: projection, + features: new ol.format.GeoJSON().readFeatures("{\n" + + " \"type\": \"Feature\",\n" + + " \"geometry\":" + that.mapData + "}"), + }), + style: new ol.style.Style({ + fill: new ol.style.Fill({ + //矢量图层填充颜色，以及透明度 + color: "rgba(204, 255, 204,0.3)", + }), + stroke: new ol.style.Stroke({ + //边界样式 + color: "#47c68f", + width: 3, + }), + }), + }); + //map.addLayer(hc_land); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; + //定位查询位置 + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 + map.getView().animate({ + // 只设置需要的属性即可 + center: center, // 中心点 + zoom: 17.9, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + // let resolution = map.getView().getResolutionForExtent([maxXMap, maxYMap, minXMap, minYMap],map.getSize()); + // map.getView().fit([maxXMap, maxYMap, minXMap, minYMap]); + // map.getView().setResolution(resolution); + } else if(that.mapData.substring(0,1) =="[") { + //that.newHt ="1"; + var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.mapData.replaceAll("\"", "")]}); + var leftJoin = zbNew.replace("\"[", "["); + var rightJoin = leftJoin.replace("\"]", "]"); + hc_landFuther = new ol.layer.Vector({ + title: "add Layer", + source: new ol.source.Vector({ + projection: projection, + features: new ol.format.GeoJSON().readFeatures("{\n" + + " \"type\": \"Feature\",\n" + + " \"geometry\":" + rightJoin + "}"), + }), + style: new ol.style.Style({ + fill: new ol.style.Fill({ + //矢量图层填充颜色，以及透明度 + color: "rgba(204, 255, 204,0.3)", + }), + stroke: new ol.style.Stroke({ + //边界样式 + color: "#47c68f", + width: 3, + }), + }), + }); + //map.addLayer(hc_land); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; + //定位查询位置 + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 + map.getView().animate({ + // 只设置需要的属性即可 + center: center, // 中心点 + zoom: 16.9, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } + } }); } else{ //this.closeMoule = null; @@ -439,12 +621,13 @@ export default { console.log(that.newZb); //图层查询定位开始 ---------start //if(){} + //map.removeLayer(hc_landFuther); if(that.newZb.substring(0,1) =="{"){ //that.newHt ="1"; // var theGeomMap =this.message.replace("Point", "MultiPolygon"); // var pointLeft = theGeomMap.replace("[", "[[[["); // var pointRight = pointLeft.replace("]", "]]]]"); - hc_land = new ol.layer.Vector({ + hc_landFuther = new ol.layer.Vector({ title: "add Layer", source: new ol.source.Vector({ projection: projection, @@ -464,11 +647,11 @@ export default { }), }), }); - 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; + //map.addLayer(hc_landFuther); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 map.getView().animate({ @@ -486,7 +669,7 @@ export default { var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.newZb.replaceAll("\"","")]}); var leftJoin = zbNew.replace("\"[","["); var rightJoin = leftJoin.replace("\"]","]"); - hc_land = new ol.layer.Vector({ + hc_landFuther = new ol.layer.Vector({ title: "add Layer", source: new ol.source.Vector({ projection: projection, @@ -506,11 +689,11 @@ export default { }), }), }); - 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; + //map.addLayer(hc_landFuther); + var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY; //定位查询位置 var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 map.getView().animate({