资产一张图、资源一张图地图优化

src/api/asset/resource.js

@@ -110,6 +110,23 @@ export function getResourceListNew (query) {
   })
 }
 
+// 精简查询资源性资产列表
+export function listResource2(query) {
+  return request({
+    url: '/api/asset/resource/list/sample',
+    method: 'get',
+    params: query
+  })
+}
+// 查询资源性资产详细
+export function getResource2(id, parms) {
+  return request({
+    url: '/api/asset/resource/get/' + id,
+    method: 'get',
+    params: parms,
+  })
+}
+
 // 清空空间字段
 export function clearTheGeom (id) {
   return request({

src/utils/gis.js

@@ -110,8 +110,8 @@ class GisUtils {
 
   /**
    * 获取适量图层
-   * @param {*} color 
-   * @returns 
+   * @param {*} color
+   * @returns
    */
   getVectorLayerByColor (color) {
     let layer = new VectorLayer({
@@ -255,6 +255,12 @@ class GisUtils {
     return modify;
   }
 
+  layerGetFeatureInfoUrl (layer, coordinate, viewResolution) {
+    console.log(layer)
+    const modify = layer.getSource().getFeatureInfoUrl(coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'})
+    return modify;
+  }
+
   drawLineSplit (source) {
     let draw = new Draw({
       source: source,
@@ -821,7 +827,7 @@ class GisUtils {
    * @param {*} updates 要更新的要素集合
    * @param {*} deletes 要删除的要素集合
    * @param {*} layer 要操作的图层
-   * @param {*} fs 
+   * @param {*} fs
    */
   async crudFs (inserts = null, updates = null, deletes = null, layer = 'cwd2') {
     const geoserverData = {

src/views/industry/main-gis/index.js

@@ -502,7 +502,12 @@ export default {
           const { industryType } = item
           console.log(222, industryType);
           // console.log(222, item);
-          let color = this.LegendData[industryType - 1 + '']
+          let color = {};
+          if (industryType > 5){
+            color = this.LegendData[5]
+          }else{
+            color = this.LegendData[industryType - 1 + '']
+          }
           let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor)
           features.push(fs);
         }

src/views/property/main-gis/index.js

@@ -476,17 +476,17 @@ export default {
     // 添加资产图层
     addPermanentLayer (permanentList) {
       let features = [];
-      permanentList.forEach(item => {
+      permanentList.forEach((item,index) => {
         if (item.theGeom != null && item.theGeom !== '') {
           // //console.log(222, useType, item);
           const { useType } = item
-          let icon = iconMap[useType + '']
-          let fs = gis.getFeature2(item, icon)
-          features.push(fs);
+          if(useType){
+            let icon = iconMap[useType + '']
+            let fs = gis.getFeature2(item, icon)
+            features.push(fs);
+          }
         }
       });
-
-
       gis.getVectorLayerByFs(features)
       gis.mapSetFit(features)
     },

src/views/resources/main-gis/asset-details/index.html

@@ -34,33 +34,48 @@
         <p>{{resourceDetail.location}}</p>
       </div>
       <div>
-        <p>东至</p>
-        <p>{{resourceDetail.east}}</p>
+        <p>利用现状</p>
+        <p>{{resourceDetail.utilizationStatus}}</p>
       </div>
       <div>
-        <p>西至</p>
-        <p>{{resourceDetail.west}}</p>
+        <p>使用人</p>
+        <p>{{resourceDetail.useBy}}</p>
       </div>
       <div>
-        <p>南至</p>
-        <p>{{resourceDetail.south}}</p>
-      </div>
-      <div>
-        <p>北至</p>
-        <p>{{resourceDetail.north}}</p>
-      </div>
-      <div>
-        <p>备注</p>
-        <p>{{resourceDetail.remark}}</p>
-      </div>
-      <div>
-        <p>附件</p>
-        <p>
-          <template v-for="(item,index) in resourceDetail.attachments">
-            <img :src="'/api' + item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.fileUrl)">
-          </template>
-        </p>
+        <p>核查情况</p>
+        <p>{{resourceDetail.checkSituation}}</p>
       </div>
+      <template v-if="showMore">
+        <div>
+          <p>东至</p>
+          <p>{{resourceDetail.east}}</p>
+        </div>
+        <div>
+          <p>西至</p>
+          <p>{{resourceDetail.west}}</p>
+        </div>
+        <div>
+          <p>南至</p>
+          <p>{{resourceDetail.south}}</p>
+        </div>
+        <div>
+          <p>北至</p>
+          <p>{{resourceDetail.north}}</p>
+        </div>
+        <div>
+          <p>备注</p>
+          <p>{{resourceDetail.remark}}</p>
+        </div>
+        <div>
+          <p>附件</p>
+          <p>
+            <template v-for="(item,index) in resourceDetail.attachments">
+              <img :src="'/api' + item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.fileUrl)">
+            </template>
+          </p>
+        </div>
+      </template>
+      <div class="more" @click="showMore = !showMore">查看更多<i :class="showMore?'el-icon-arrow-up':'el-icon-arrow-down'"></i></div>
     </div>
 
   </div>

src/views/resources/main-gis/asset-details/index.js

@@ -11,6 +11,7 @@ export default {
   data () {
     return {
       isLoad: false,
+      showMore: false,
       resourceDetail: {},
       statusOptions: []
     };

src/views/resources/main-gis/asset-details/index.scss

@@ -81,7 +81,7 @@
   }
 
   .echarts_main {
-    height: 600px;
+    //height: 600px;
     overflow-y: auto;
 
     div {
@@ -180,3 +180,7 @@
     }
   }
 }
+.more{
+  justify-content: center;
+  cursor: pointer;
+}

src/views/resources/main-gis/index.js

@@ -3,9 +3,10 @@ import GisUtils from '@/utils/gis.js';
 import {
   fromLonLat
 } from 'ol/proj'
+import * as ol from 'ol';
 import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js";
 import { getInfo } from "@/api/login";
-import { getResourceListByDeptId, listResource, getResourceListNew } from "@/api/asset/resource.js";
+import { getResourceListByDeptId, listResource, listResource2, getResource2 } from "@/api/asset/resource.js";
 import Legend from '@/components/legend/index.vue';
 import { attachmentList } from "@/api/common/uploadAttachment.js";
 import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
@@ -195,6 +196,7 @@ export default {
       townBorderLayerName: "",        // 乡镇边界图层名称
       villageBorderLayerName: "",     // 村边界图层名称
       groupBorderLayerName: "",       // 组边界图层名称
+      resourceLayerName: "",         // 资源边界图层名称
       LegendData: [
         {
           iconStyle: {
@@ -253,19 +255,14 @@ export default {
     this.getGeoServerUrl();
   },
   mounted () {
+
+    // 获取村边界的图层名称
+    this.getVillageBorderLayerName();
+    // 获取资源边界图层名称
+    this.getResourceLayerName();
     getInfo().then(res => {
       treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
         this.addrOptions = resp.data;
-        // listDeptExcludeChild(res.user.deptId).then((resp) => {
-        //   let deptOptions = [res.user.deptId];
-        //   resp.data.map(resm => {
-        //     if (res.user.parentDeptName == resm.deptName) {
-        //       deptOptions.unshift(resm.deptId)
-        //       deptOptions.unshift(resm.parentId)
-        //     }
-        //   })
-        //   this.addrText = [100,...deptOptions];
-        // });
         this.queryParams.deptId = res.user.deptId;
         this.tempWorkerOpenQueryParams.deptId = res.user.deptId;
         this.majorEventOpenQueryParams.deptId = res.user.deptId;
@@ -277,9 +274,6 @@ export default {
         this.getAllList();
         // 加载地图
         this.initMap(res.user.deptId);
-
-        // 获取村边界的图层名称
-        this.getVillageBorderLayerName();
       });
 
     })
@@ -305,6 +299,12 @@ export default {
         this.villageBorderLayerName = response.msg;
       });
     },
+    // 获取资源边界图层名称
+    getResourceLayerName(){
+      getConfigKey("geoserver.layer.resource").then(response => {
+        this.resourceLayerName = response.msg;
+      });
+    },
     // 添加区县边界
     addCountyBorder (deptIds) {
       gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
@@ -417,7 +417,6 @@ export default {
       gis.addTianDiTuLayer()
       gis.addAnnotationLayer()
       // // 获取资源列表
-      this.getResourceList(deptId);
       let dept2 = this.addrOptions[0];
       ////console.log(this.addrOptions, 'this.addrOptions');
       if (dept2.deptLevel === '5') {
@@ -435,6 +434,7 @@ export default {
         // 添加乡镇边界
         this.addTownBorder(dept2.children.map(item => item.id));
         gis.getView().setZoom(11);
+        this.villageIds = this.findLeafNodeIds(dept2);
       } else if (dept2.deptLevel === '3') {
         // 登录身份为镇级领导
         this.userRole = 'townLeader';
@@ -443,11 +443,13 @@ export default {
         // 添加村边界
         this.addVillageBorder(dept2.children.map(item => item.id));
         gis.getView().setZoom(13);
+        this.villageIds = this.findLeafNodeIds(dept2);
       }
       // 添加坐标点图层
       if (dept2.children) {
         this.addDeptLayer(dept2.children);
       }
+      this.getResourceList(deptId);
       gis.getMapContainer().on("click", (evt) => {
         let feature = gis.getMapContainer().forEachFeatureAtPixel(
           evt.pixel,
@@ -466,6 +468,23 @@ export default {
             this.listDialogHidden('detail');
             this.openResourceDialog(feature.values_.detail);
           }
+        }else{
+
+          const viewResolution = gis.getView().getResolution();
+          const url = gis.layerGetFeatureInfoUrl(this.resourceLayer, evt.coordinate, viewResolution);
+          if (url) {
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                  //console.log("data=" + JSON.stringify(data))
+                  if (data.features.length > 0) {
+                    //console.log("id=" + data.features[0].id.split(".").pop())
+                    getResource2(data.features[0].id.split(".").pop()).then((resp) => {
+                      this.openResourceDialog(resp.data);
+                    });
+                  }
+                });
+          }
         }
       });
 
@@ -478,6 +497,18 @@ export default {
         }
       });
     },
+    // 查找所有叶子节点的deptId
+    findLeafNodeIds(tree) {
+      let result = [];
+      if (!tree.children || tree.children.length === 0) {
+        result.push(tree.id);
+      } else {
+        for (let node of tree.children) {
+          result = result.concat(this.findLeafNodeIds(node));
+        }
+      }
+      return result;
+    },
     listDialogHidden (type) {
       if (type == 'detail') {
         //合同信息详情弹窗
@@ -546,11 +577,93 @@ export default {
     },
     // 获取资源列表
     getResourceList (deptId) {
-      getResourceListNew({deptId:deptId}).then(response => {
-        if (response.rows && response.rows.length > 0) {
-          this.addResourceLayer(response.rows);
+
+      if (this.resourceLayer) {
+        this.map.removeLayer(this.resourceLayer);
+        this.resourceLayer = null;
+      }
+
+      if(this.resourceLayerName == '' || this.resourceLayerName == null){ //没有配置geoserver图层，从列表取直接渲染，量大时不适合
+        //console.log("资源图层：直接渲染列表")
+        listResource2({deptId: this.queryParams.deptId}).then(response => {
+          if (response.rows && response.rows.length > 0) {
+            let resourceSource = new ol.source.Vector();
+            for (let resource of response.rows) {
+              if (resource.theGeom) {
+                const feature = new ol.format.GeoJSON().readFeature(resource.theGeom);
+                feature.set('useType', resource.useType);
+                feature.set('level', 'resource');
+                feature.set('detail', resource);
+                resourceSource.addFeature(feature);
+              }
+            }
+            console.log('abc')
+            this.resourceLayer = new ol.layer.Vector({
+              source: resourceSource,
+              style: (feature, resolution) => {
+                let useType = feature.get('useType');
+                if (!useType) {
+                  return null;
+                }
+                let fillColor;
+                let strokeColor;
+                if (useType === '1') {
+                  fillColor = '#fffc0080';
+                  strokeColor = '#fffc00';
+                } else if (useType === '2') {
+                  fillColor = '#f717ff80';
+                  strokeColor = '#f717ff';
+                } else if (useType === '3') {
+                  fillColor = '#00ff3c80';
+                  strokeColor = '#00ff3c';
+                } else if (useType === '4') {
+                  fillColor = '#f6006e80';
+                  strokeColor = '#f6006e';
+                }
+                return new ol.style.Style({
+                  fill: new ol.style.Fill({
+                    //矢量图层填充颜色，以及透明度
+                    color: fillColor,
+                  }),
+                  stroke: new ol.style.Stroke({
+                    //边界样式
+                    color: strokeColor,
+                    width: 3,
+                  }),
+                });
+              }
+            });
+            // this.map.addLayer(this.selectedHomesteadLayer);
+            this.map.getLayers().insertAt(3, this.resourceLayer);
+            this.loading.close();
+          }
+        });
+      }else{ // 配置geoserver图层的，从图层取
+        //console.log("资源图层：geoserver图层")
+        let params = {};
+        if(this.villageIds == '' || this.villageIds == null){
+          params = {
+            LAYERS: this.resourceLayerName,
+            SRID: 3857,
+          };
+        }else{
+          params = {
+            LAYERS: this.resourceLayerName,
+            cql_filter: "dept_id in (" + this.villageIds + ")" ,
+            SRID: 3857,
+          };
         }
-      });
+
+        this.resourceLayer = gis.addImageLayer(this.mapGeoServerUrl, this.resourceLayerName, this.villageIds);
+
+        // this.map.getLayers().insertAt(3, this.resourceLayer);
+      }
+
+      // listResource2({deptId:deptId}).then(response => {
+      //   if (response.rows && response.rows.length > 0) {
+      //     this.addResourceLayer(response.rows);
+      //   }
+      // });
     },
     // 添加资源图层
     addResourceLayer (resourceList) {