地图优化

src/components/Map/MapGisObtain.vue

@@ -72,27 +72,28 @@ export default {
             name: "天地图文字标注--卫星影像图",
             resolution:Math.random() * 0.00000001
           });
+          //加载地图
+          that.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: that.uuidMap,
+            view: new ol.View({
+              //center: ol.proj.fromLonLat([115.452752, 31.789033]),
+              zoom: 15,
+              minZoom: 5, //地图缩小限制
+              maxZoom: 18.3, //地图放大限制
+            }),
+            interactions: ol.interaction.defaults({
+              pinchRotate: false // 移动端禁止地图旋转
+            }),
+            //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新
+          });
           if (response.data.length > 0) {
             //setTimeout(() => {
             for (var i = 0; response.data.length > i; i++) {
-              //加载地图
-              that.map = new ol.Map({
-                controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
-                layers: [aerial, yingxzi],
-                projection: projection,
-                target: that.uuidMap,
-                view: new ol.View({
-                  //center: ol.proj.fromLonLat([115.452752, 31.789033]),
-                  zoom: 15,
-                  minZoom: 5, //地图缩小限制
-                  maxZoom: 18.3, //地图放大限制
-                }),
-                interactions: ol.interaction.defaults({
-                  pinchRotate: false // 移动端禁止地图旋转
-                }),
-                //view: new ol.View({ol.view.getResolution() + Math.random() * 0.00000001)});//随机数缩放实现刷新
-              });
               //图层查询定位开始 ---------start
+              console.log( response.data[i].zjdzd.theGeom);
               hc_land = new ol.layer.Vector({
                 title: "add Layer",
                 source: new ol.source.Vector({
@@ -121,6 +122,7 @@ export default {
               var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
               //定位查询位置
               var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+              console.log(center);
               that.map.getView().animate({
                 // 只设置需要的属性即可
                 center: center, // 中心点
@@ -130,45 +132,64 @@ export default {
                 resolution:Math.random() * 0.00000001,
               });
             }
-            that.map.on("singleclick", function (evt) {
-              console.info(1111111);
-              let feature = that.map.forEachFeatureAtPixel(
-                evt.pixel,
-                (feature) => feature
-              );
-              document.getElementById(that.uuidMap).innerHTML = '';
-
-              if (feature) {
-                that.map.removeLayer(geo_zjdzd);
-                this.closeMoule= null;
-                //图层查询定位开始 ---------start
-                geo_zjdzd = 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\":" + feature.values_.zjdzd.theGeom + "}"),
-                  }),
-                  style: new ol.style.Style({
-                    fill: new ol.style.Fill({
-                      //矢量图层填充颜色，以及透明度
-                      color: "rgb(204, 255, 255,0.5)",
-                    }),
-                    stroke: new ol.style.Stroke({
-                      //边界样式
-                      color: "#00FFFF",
-                      width: 8,
-                    }),
-                  }),
-                });
-                that.map.addLayer(geo_zjdzd);
-                that.closeMoule = feature.values_.zjddm;
-              }
-            });
           }
           var geo_zjdzd;
-          console.log("1111");
+          that.map.on("singleclick", function (evt) {
+            let feature = that.map.forEachFeatureAtPixel(
+              evt.pixel,
+              (feature) => feature
+            );
+            //document.getElementById(that.uuidMap).innerHTML = '';
+            if (feature && (feature !==undefined)) {
+              that.map.removeLayer(geo_zjdzd);
+              var aleft = [];
+              for(var i=0;i<feature.values_.geometry.flatCoordinates.length;i++){
+                aleft.push("["+feature.values_.geometry.flatCoordinates[i]+","+feature.values_.geometry.flatCoordinates[i+1] +"]")
+                i = i+1;
+              }
+              var aright = "[[["+aleft +"]]]";
+              var geoThegeom = "{\"type\": \"MultiPolygon\", \"coordinates\": "+aright + "}";
+              this.closeMoule= null;
+              //图层查询定位开始 ---------start
+              geo_zjdzd = 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\":" + geoThegeom + "}"),
+                }),
+                resolution:Math.random() * 0.00000001,
+                style: new ol.style.Style({
+                  fill: new ol.style.Fill({
+                    //矢量图层填充颜色，以及透明度
+                    color: "rgb(204, 255, 255,0.5)",
+                  }),
+                  stroke: new ol.style.Stroke({
+                    //边界样式
+                    color: "#00FFFF",
+                    width: 3,
+                  }),
+                }),
+              });
+              that.map.addLayer(geo_zjdzd);
+              //that.closeMoule = feature.values_.zjddm;
+              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]); //获取边界区域的中心位置
+              that.map.getView().animate({
+                // 只设置需要的属性即可
+                center: center, // 中心点
+                zoom: 16.9, // 缩放级别
+                rotation: undefined, // 缩放完成view视图旋转弧度
+                duration: 1000, // 缩放持续时间，默认不需要设置
+                resolution:Math.random() * 0.00000001,
+              });
+            }
+          });
         }
       });
     },

src/views/onlineHome/phfs/zzjy/zzjyAdd.vue

@@ -132,9 +132,9 @@
 <!--          @cancel="showycsydqsj = false"-->
 <!--        />-->
 <!--      </van-popup>-->
-<!--      <van-dialog v-model:show="mapShow" show-cancel-button>-->
-<!--        <MapGisObtain ref="zjdProductResh" :shqrxm="circulation.zcfmc"></MapGisObtain>-->
-<!--      </van-dialog>-->
+      <van-dialog v-model:show="mapShow" show-cancel-button>
+        <MapGisObtain ref="zjdProductResh" :shqrxm="circulation.zcfmc"></MapGisObtain>
+      </van-dialog>
 <!--      <van-field v-model="circulation.ycsymj" label="有偿使用面积(㎡)" placeholder="请输入有偿使用面积㎡" input-align="right" label-width="auto" type="number"/>-->
 <!--      <van-field v-model="circulation.ycsymjdj" label="有偿使用面积单价(元)" placeholder="请输入有偿使用面积单价" input-align="right" label-width="auto" type="number"/>-->
 <!--      <van-field v-model="circulation.ycsyfy" label="有偿使用费用(元)" placeholder="请输入有偿使用费用" input-align="right" label-width="auto" type="number"/>-->