两清三化移动端地图修改

src/views/plotPremisesMobile/index.vue

@@ -76,10 +76,10 @@
           <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
 
           <div class="pop_content_zd_right">
-            <van-row type="flex" justify="space-between">
+            <!-- <van-row type="flex" justify="space-between">
               <van-col>租地位置：</van-col>
               <van-col>{{deptName}}</van-col>
-            </van-row>
+            </van-row> -->
             <van-row type="flex" justify="space-between">
               <van-col>租地编号：</van-col>
               <van-col class="num">{{ndItem.id}}</van-col>
@@ -116,10 +116,10 @@
           <img src="../../../static/images/plotPremises/plotPremises_img.png" alt="">
 
           <div class="pop_content_zd_right">
-            <van-row type="flex" justify="space-between">
+            <!-- <van-row type="flex" justify="space-between">
               <van-col>租房位置：</van-col>
               <van-col>{{deptName}}</van-col>
-            </van-row>
+            </van-row> -->
             <van-row type="flex" justify="space-between">
               <van-col>租房编号：</van-col>
               <van-col class="num">{{nfItem.id}}</van-col>
@@ -235,6 +235,7 @@ export default {
 
       landLayer: "",                                    // 地块图层
       homesteadLayer: "",                               // 宅基地图层
+      selectedLayer: "",                                // 选中的图层
       deptInfo: {
         leader: null,                                   // 联系人
         phone: null                                     // 电话
@@ -280,6 +281,7 @@ export default {
     getData(){
       plotPremisesStatistics({deptId:this.deptId}).then(response => {
         this.detail = response.data;
+        console.log(this.detail);
       });
     },
     onConfirmDept({ selectedOptions }){
@@ -287,6 +289,13 @@ export default {
       this.deptName = selectedOptions.map((option) => option.label).join('/');
       this.getData();
       this.showAddress = false;
+      this.drawMap(selectedOptions);
+      this.deptInfo.leader = null;
+      this.deptInfo.phone = null;
+      getDept(this.deptId).then(res => {
+        this.deptInfo.leader = res.data.leader;
+        this.deptInfo.phone = res.data.phone;
+      });
     },
 
     tabChange(name){
@@ -294,12 +303,53 @@ export default {
       this.selectChooseOrder = -1;
     },
     listChange(id,type,data){
+      console.log(data);
       this.selectChooseOrder = id;
       this.show = false;
       this.showZF = false;
       this.showZD = false;
-      if (type=='nf'){this.showZF = true;this.nfItem = data;}
-      if (type=='nd'){this.showZD = true;this.ndItem = data;}
+      if (type=='nf') {
+        this.showZF = true;
+        this.nfItem = data;
+      }
+      if (type=='nd') {
+        this.showZD = true;
+        this.ndItem = data;
+      }
+
+      if (this.selectedLayer) {
+        this.map.removeLayer(this.selectedLayer);
+        this.selectedLayer = '';
+      }
+      if (data.theGeom) {
+        this.selectedLayer = new ol.layer.Vector({
+          source: new ol.source.Vector({
+            features: new ol.format.GeoJSON().readFeatures("{\n" +
+              "    \"type\": \"Feature\",\n" +
+              "    \"geometry\":" + data.theGeom + ",    \"properties\":" + JSON.stringify(data.id) + "}"),
+          }),
+          name: 'selectedLayer',
+          style: new ol.style.Style({
+            fill: new ol.style.Fill({
+              //矢量图层填充颜色，以及透明度
+              color: "rgba(255, 84, 87, 0.5)",
+            }),
+            stroke: new ol.style.Stroke({
+              //边界样式
+              color: "#ff5457",
+              width: 2,
+            }),
+          }),
+        });
+        this.map.addLayer(this.selectedLayer);
+        let center = ol.extent.getCenter(this.selectedLayer.getSource().getExtent());
+        this.map.getView().animate({
+          center: center,             // 中心点
+          zoom: 17,                   // 缩放级别
+          rotation: undefined,        // 缩放完成view视图旋转弧度
+          duration: 500,              // 缩放持续时间，默认不需要设置
+        });
+      }
     },
     //获取geoserver的地址
     getGeoServerUrl() {
@@ -456,6 +506,13 @@ export default {
                 this.addDeptLayer(deptNode.children);
               }
             } else if (deptLevel === '2') {
+              this.deptId = deptId;
+              this.getData();
+              let parentNodes = [];
+              this.findParentNode(this.addrOptions, deptId, parentNodes);
+              console.log(parentNodes);
+              this.villageValue = deptId;
+              this.deptName = parentNodes.map(node => node.label).join('/');
               this.currentDeptLevel = '2';
               this.map.removeLayer(this.borderLayer);
               this.borderLayer = '';
@@ -489,6 +546,16 @@ export default {
               });
             }
           }
+        } else {
+          const viewResolution = this.map.getView().getResolution();
+          const url1 = this.landLayer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
+          if (url1) {
+            this.fetchUrl(url1);
+          }
+          const url2 = this.homesteadLayer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
+          if (url2) {
+            this.fetchUrl(url2);
+          }
         }
       });
 
@@ -514,6 +581,10 @@ export default {
             this.landLayer = "";
             this.map.removeLayer(this.homesteadLayer);
             this.homesteadLayer = "";
+            if (this.selectedLayer) {
+              this.map.removeLayer(this.selectedLayer);
+              this.selectedLayer = "";
+            }
             this.deptInfo.leader = null;
             this.deptInfo.phone = null;
           } else if (this.currentDeptLevel === '3' && zoom < 11) {
@@ -560,6 +631,10 @@ export default {
             this.landLayer = "";
             this.map.removeLayer(this.homesteadLayer);
             this.homesteadLayer = "";
+            if (this.selectedLayer) {
+              this.map.removeLayer(this.selectedLayer);
+              this.selectedLayer = "";
+            }
             this.deptInfo.leader = null;
             this.deptInfo.phone = null;
           } else if (this.currentDeptLevel === '3' && zoom < 11) {
@@ -588,6 +663,76 @@ export default {
       }
       return null;
     },
+    findParentNode(tree, deptId, result) {
+      for (let node of tree) {
+        if (node.id === deptId) {
+          result.unshift(node);
+          return true;
+        }
+        if (node.children && node.children.length > 0) {
+          let isFind = this.findParentNode(node.children, deptId, result);
+          if (isFind) {
+            result.unshift(node);
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    fetchUrl(url) {
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          if (data.features.length > 0) {
+            let arr = data.features[0].id.split(".");
+            let tableName = arr[0];
+            let id = arr[1];
+
+            this.show = false;
+            this.showList = false;
+            this.showZF = false;
+            this.showZD = false;
+            if (tableName.startsWith("t_homestead_zjdzdxx")) {
+              this.showZF = true;
+              this.nfItem = {
+                id: id,
+                zdmj: data.features[0].properties.ZDMJ,
+              };
+            }
+            if (tableName.startsWith("t_sys_dk")) {
+              this.showZD = true;
+              this.ndItem = {
+                id: id,
+                scmjm: data.features[0].properties.SCMJM,
+              };
+            }
+
+            if (this.selectedLayer) {
+              this.map.removeLayer(this.selectedLayer);
+              this.selectedLayer = "";
+            }
+            this.selectedLayer = new ol.layer.Vector({
+              source: new ol.source.Vector({
+                features: new ol.format.GeoJSON().readFeatures(data)
+              }),
+              name: 'selectedLayer',
+              style: new ol.style.Style({
+                fill: new ol.style.Fill({
+                  //矢量图层填充颜色，以及透明度
+                  color: "rgba(255, 84, 87, 0.3)",
+                }),
+                stroke: new ol.style.Stroke({
+                  //边界样式
+                  color: "#ff5457",
+                  width: 3,
+                }),
+              })
+            });
+            this.map.addLayer(this.selectedLayer);
+            // this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);
+          }
+        });
+    },
     // 添加区县边界
     addCountyBorder() {
       this.borderLayer = new ol.layer.Image({
@@ -697,26 +842,6 @@ export default {
     },
     // 添加地块图层
     addLandLayer(deptId) {
-      /* let params = {};
-      if (this.street === '全部' && this.cun === '全部') {
-        params = {
-          LAYERS: this.homesteadLayerName,
-          SRID: 3857,
-        };
-      } else if (this.street !== '全部' && this.cun === '全部') {
-        let villageDeptIds = this.houseCunship.map(item => item.deptId);
-        params = {
-          LAYERS: this.homesteadLayerName,
-          cql_filter: "dept_id in (" + villageDeptIds + ")",
-          SRID: 3857,
-        };
-      } else if (this.street !== '全部' && this.cun !== '全部') {
-        params = {
-          LAYERS: "zjd_dc:t_sys_dk",                                 // 测试用的图层，正式使用时要换成自己发布的图层
-          cql_filter: "dept_id = '" + this.deptId + "'",
-          SRID: 3857,
-        };
-      } */
       this.landLayer = new ol.layer.Image({
         source: new ol.source.ImageWMS({
           url: "http://218.59.175.43:8090/geoserver/zjd_dc/wms",     // 测试用的geoserver服务器链接，正式使用时需要换掉
@@ -733,26 +858,6 @@ export default {
     },
     // 添加宅基地图层
     addHomesteadLayer(deptId) {
-      /* let params = {};
-      if (this.street === '全部' && this.cun === '全部') {
-        params = {
-          LAYERS: this.homesteadLayerName,
-          SRID: 3857,
-        };
-      } else if (this.street !== '全部' && this.cun === '全部') {
-        let villageDeptIds = this.houseCunship.map(item => item.deptId);
-        params = {
-          LAYERS: this.homesteadLayerName,
-          cql_filter: "dept_id in (" + villageDeptIds + ")",
-          SRID: 3857,
-        };
-      } else if (this.street !== '全部' && this.cun !== '全部') {
-        params = {
-          LAYERS: "zjd_dc:t_sys_dk",                                 // 测试用的图层，正式使用时要换成自己发布的图层
-          cql_filter: "dept_id = '" + this.deptId + "'",
-          SRID: 3857,
-        };
-      } */
       this.homesteadLayer = new ol.layer.Image({
         source: new ol.source.ImageWMS({
           url: "http://218.59.175.43:8090/geoserver/zjd_dc/wms",     // 测试用的geoserver服务器链接，正式使用时需要换掉
@@ -767,6 +872,53 @@ export default {
       this.map.addLayer(this.homesteadLayer);
       // this.map.getLayers().insertAt(3, this.homesteadLayer);
     },
+    drawMap(selectedOptions) {
+      const villageNode = selectedOptions[selectedOptions.length - 1];
+      const ids = selectedOptions.map(option => option.id);
+
+      this.currentDeptLevel = '2';
+      this.townId = ids[ids.length - 2];
+      this.countyId = ids[ids.length - 3];
+      this.map.removeLayer(this.borderLayer);
+      this.borderLayer = '';
+      // 添加村边界
+      const cqlFilter = "dept_id = '" + villageNode.id + "'";
+      this.addVillageBorder(cqlFilter);
+
+      let villagePoint = {
+        id: villageNode.id,
+        label: villageNode.label,
+        lng: villageNode.lng,
+        lat: villageNode.lat,
+        deptLevel: villageNode.deptLevel,
+      };
+      let depts = [];
+      depts.push(villagePoint);
+      this.map.removeLayer(this.deptLayer);
+      this.deptLayer = '';
+      this.addDeptLayer(depts);
+
+      if (this.landLayer) {
+        this.map.removeLayer(this.landLayer);
+        this.landLayer = '';
+      }
+      if (this.homesteadLayer) {
+        this.map.removeLayer(this.homesteadLayer);
+        this.homesteadLayer = '';
+      }
+      if (this.selectedLayer) {
+        this.map.removeLayer(this.selectedLayer);
+        this.selectedLayer = "";
+      }
+      this.addLandLayer(villageNode.id);
+      this.addHomesteadLayer(villageNode.id);
+      this.map.getView().animate({
+        center: ol.proj.fromLonLat([villageNode.lng, villageNode.lat]), // 中心点
+        zoom: 17, // 缩放级别
+        rotation: undefined, // 缩放完成view视图旋转弧度
+        duration: 1000, // 缩放持续时间，默认不需要设置
+      });
+    },
   },
 };
 </script>