确权调查承包地块地图

src/views/contracted/village/contractor/contractorLandMap.vue

@@ -4,36 +4,79 @@
     <van-nav-bar left-arrow fixed placeholder @click-left="goBack" >
       <template #title>
         <div class="tb_main">
-<!--          B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p>-->
           地图
         </div>
       </template>
     </van-nav-bar>
 
-    <!-- <div class="tap_block">
-      <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
-      <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p>
-      <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
-      <p class="active">承包地</p>
-    </div> -->
+    <div class="mapBox" id="contractedLandMapBox"></div>
 
-    <div class="mapBox"></div>
+    <div class="contractedLandPopup">
+      <van-dialog v-model="open" title="承包地信息" :show-confirm-button="false" :show-cancel-button="true" cancel-button-text="关闭">
+        <van-form ref="landForm">
+          <van-field v-model="form.dkbm" label="地块代码：" :border="true" input-align="right" />
+          <van-field v-model="form.dkmc" label="地块名称：" :border="true" input-align="right" />
+          <van-field v-model="form.syqxz" label="所有权性质：" :border="true" input-align="right" />
+          <van-field v-model="form.dklb" label="地块类别：" :border="true" input-align="right" />
+          <van-field v-model="form.tdlylx" label="土地利用类型：" :border="true" input-align="right" />
+          <van-field v-model="form.dldj" label="地力等级：" :border="true" input-align="right" />
+          <van-field v-model="form.tdyt" label="土地用途：" :border="true" input-align="right" />
+          <van-field v-model="form.sfjbnt" label="基本农田：" :border="true" input-align="right" />
+          <van-field v-model="form.scmjm" label="实测面积(亩)：" :border="true" input-align="right" />
+          <van-field v-model="form.zjrxm" label="指界人姓名：" :border="true" input-align="right" />
+          <van-field v-model="form.dkdz" label="地块东至：" :border="true" input-align="right" />
+          <van-field v-model="form.dkxz" label="地块西至：" :border="true" input-align="right" />
+          <van-field v-model="form.dknz" label="地块南至：" :border="true" input-align="right" />
+          <van-field v-model="form.dkbz" label="地块北至：" :border="true" input-align="right" />
+          <van-field v-model="form.dkbzxx" label="地块备注信息：" :border="true" input-align="right" />
+        </van-form>
+      </van-dialog>
+    </div>
 
   </div>
 </template>
 <script>
   import Cookies from "js-cookie";
+  import { getConfigKey } from "@/api/system/config";
+  import { listCbdkxx } from "@/api/contracted/cbdkxx";
+  import { getDept } from "@/api/contracted";
+
   export default {
     name: "contractedVillageContractor",
     data() {
       return {
+        form: {},                       // 承包地信息表单
+        open: false,                    // 是否显示承包地信息弹出层
 
+        map: "",                        // 地图
+        mapGeoServerUrl: "",            // geoserver地址
+        mapCenterLocation: [],          // 地图中心坐标
+        landLayerName: "",              // 地块图层名称
       };
     },
     created() {
-
+      // 获取geoserver的地址
+      this.getGeoServerUrl();
+      // 获取地块图层名称
+      this.getLandLayerName();
+    },
+    mounted() {
+      // 获取承包地块列表
+      this.getContractedLandList();
     },
     methods: {
+      // 获取geoserver的地址
+      getGeoServerUrl() {
+        getConfigKey("system.geoServer.url").then(response => {
+          this.mapGeoServerUrl = response.msg;
+        });
+      },
+      // 获取地块图层名称
+      getLandLayerName() {
+        getConfigKey("geoserver.layer.dk").then(response => {
+          this.landLayerName = response.msg;
+        });
+      },
       goBack() {
         this.$router.push({
           name: 'contractedVillageContractorLand',
@@ -45,6 +88,133 @@
           }
         });
       },
+      getContractedLandList() {
+        listCbdkxx({cbfbm: this.$route.params.cbfbm, translate_dict: 1}).then(response => {
+          const landList = response.rows;
+          this.map = "";
+          setTimeout(() => {
+            this.drawMap(landList);
+          }, 500);
+        });
+      },
+      drawMap(landList) {
+        getDept(this.$route.params.deptId).then(response => {
+          let dept = response.data;
+          if (dept.lng && dept.lat) {
+            this.mapCenterLocation = [dept.lng, dept.lat];
+          } else {
+            this.mapCenterLocation = [116.391458, 39.902377];
+          }
+
+          document.getElementById("contractedLandMapBox").innerHTML = "";
+          // 定义地图投影
+          let projection = new ol.proj.Projection({
+            code: "EPSG:3857",
+            units: "degrees",
+          });
+          // 定义地图图层
+          let aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+          });
+          let yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+          });
+          //加载地图
+          this.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: "contractedLandMapBox",
+            view: new ol.View({
+              center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
+              zoom: 17,
+              minZoom: 1, //地图缩小限制
+              maxZoom: 18, //地图放大限制
+              // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
+            }),
+          });
+          // 添加全部的地块图层
+          this.addLandLayer();
+          // 添加承包地块图层
+          this.addContractedLandLayer(landList);
+
+          // 地图点击事件
+          this.map.on("click", (evt) => {
+            let feature = this.map.forEachFeatureAtPixel(
+              evt.pixel,
+              (feature) => feature
+            );
+            if (feature) {
+              // 镇级：加载村级坐标点
+              if (feature.get('level') === 'contractedLand') {
+                this.form = feature.get('landInfo');
+                this.open = true;
+              }
+            }
+          });
+        });
+      },
+      // 添加全部的地块图层
+      addLandLayer() {
+        const landLayer = new ol.layer.Image({
+          source: new ol.source.ImageWMS({
+            url: this.mapGeoServerUrl + '/wms',
+            params: {
+              LAYERS: this.landLayerName,
+              cql_filter: "dept_id = '" + this.$route.params.deptId + "'",
+              SRID: 3857,
+            }
+          }),
+          name: 'landLayer'
+        });
+        this.map.getLayers().insertAt(3, landLayer);
+        // this.map.addLayer(landLayer);
+      },
+      // 添加承包地块图层
+      addContractedLandLayer(landList) {
+        if (landList.length === 0) {
+          return ;
+        }
+        let features = [];
+        landList.forEach(item => {
+          if (item.theGeomJson) {
+            const iconFeature = new ol.Feature({
+              geometry: new ol.geom.MultiPolygon(JSON.parse(item.theGeomJson).coordinates),
+              level: 'contractedLand',
+              landInfo: item
+            });
+            features.push(iconFeature);
+          }
+        });
+        const contractedLandLayer = new ol.layer.Vector({
+          source: new ol.source.Vector({
+            features: features
+          }),
+          name: 'contractedLandLayer',
+          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: 3
+            })
+          })
+        });
+        this.map.getLayers().insertAt(4, contractedLandLayer);
+        this.map.getView().fit(contractedLandLayer.getSource().getExtent());
+        // this.map.getView().setZoom(15);
+      }
     },
   };
 </script>
@@ -82,6 +252,15 @@
     overflow: initial;
   }
 
+  /deep/ .contractedLandPopup .van-dialog {
+    height: 85%;
+    overflow-y: auto;
+  }
+
+  /deep/ .contractedLandPopup .van-field__label {
+    width: 7em;
+  }
+
   .tb_main{
     position: relative;
     p{