优化组件定位

src/components/Map/MapGisDrawing.vue

@@ -7,6 +7,7 @@
             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
             <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
             <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
+            <input :id="this.positioningMap" type="button" class="ant-btn ant-btn-red" value="图层定位"/>
             <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
             <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
         </div>
@@ -29,6 +30,8 @@ export default {
       uuidMap: this.guidProduct(),
       drawingPolygonMap: this.guidProduct(),
       drawingResetMap: this.guidProduct(),
+      positioningMap: this.guidProduct(),
+      newZb: null,
     };
   },
   props: ['theGeom','message'],
@@ -245,6 +248,12 @@ export default {
             that.formSubmit();
           }
         });
+        //定位当前绘制图层
+        $("#"+this.positioningMap).click(function () {
+            setTimeout(() => {
+              that.drawingPaceCountryDarw();
+            }, 100);
+        });
       } else{
         //this.closeMoule = null;
         document.getElementById(that.uuidMap).innerHTML = '';
@@ -398,6 +407,7 @@ export default {
               var feature = evt.feature;
               var geometry = feature.getGeometry();
               var coordinate = geometry.getCoordinates();
+              that.newZb = JSON.stringify(coordinate);
               if(coordinate !="" && coordinate !=null){
                 //map.addLayer(vector_drawing);
                 map.removeInteraction(draw);
@@ -424,6 +434,100 @@ export default {
           //that.closeMoule = null;
           that.formSubmit();
         });
+        //定位当前绘制图层
+        $("#"+this.positioningMap).click(function () {
+          console.log(that.newZb);
+          //图层查询定位开始 ---------start
+          //if(){}
+          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({
+              title: "add Layer",
+              source: new ol.source.Vector({
+                projection: projection,
+                features: new ol.format.GeoJSON().readFeatures("{\n" +
+                  "    \"type\": \"Feature\",\n" +
+                  "    \"geometry\":" + that.newZb + "}"),
+              }),
+              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_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({
+              // 只设置需要的属性即可
+              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.newZb.substring(0,1) =="["){
+            //that.newHt ="1";
+            var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [that.newZb.replaceAll("\"","")]});
+            var leftJoin = zbNew.replace("\"[","[");
+            var rightJoin = leftJoin.replace("\"]","]");
+            hc_land = 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_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({
+              // 只设置需要的属性即可
+              center: center, // 中心点
+              zoom: 16.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 {
+
+          }
+          //图层查询定位结束 ---------end
+        });
       }
     },
   },