地图组件定位优化

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({