资源资产显示边界

src/components/gis-map/index.js

@@ -295,7 +295,6 @@ export default {
           this.incomeTownRankList = resp.data;
         });
         financeSummaryOverview(this.queryParams).then((resp) => {
-          console.log(resp, 777);
           let data = resp.data;
           this.financeSummaryOverview.zeroIncomeBook = data.zeroIncomeBook;
           this.financeSummaryOverview.areaTotalIncome = data.areaTotalIncome;

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

@@ -7,8 +7,11 @@ import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.j
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import { attachmentList } from "@/api/common/uploadAttachment.js";
 let gis = null;
+import { treeselectByDeptId } from "@/api/system/dept";
 import Legend from '@/components/legend/index.vue';
-
+import {
+  fromLonLat
+} from 'ol/proj'
 const iconMap = {
   '1': require('./icon/组 4665@2x.png'), // 自用
   '2': require('./icon/组 4665@2x(1).png'), // 闲置
@@ -22,6 +25,11 @@ export default {
   data () {
     return {
       showPermanentDetail: false,
+      deptLayer: "",                  // 坐标点图层
+      countyBorderLayerName: "",      // 区县边界图层名称
+      townBorderLayerName: "",        // 乡镇边界图层名称
+      villageBorderLayerName: "",     // 村边界图层名称
+      groupBorderLayerName: "",       // 组边界图层名称
       LegendData: [
         {
           icon: require('./icon/组 4665@2x.png'),
@@ -217,6 +225,8 @@ export default {
   computed: {
   },
   created () {
+    // 获取geoserver的地址
+    this.getGeoServerUrl();
   },
   mounted () {
     treeselect().then((resp) => this.addrOptions = resp.data);
@@ -230,32 +240,35 @@ export default {
       this.resourceTypeOptions = response.data;
     });
     getInfo().then(res => {
-      this.headerTitle = res.user.deptName + '阳光村务一张图';
-      listDeptExcludeChild(res.user.loginDeptId).then((resp) => {
-        let deptOptions = [res.user.loginDeptId];
-        resp.data.map(resm => {
-          if (res.user.parentDeptName == resm.deptName) {
-            deptOptions.unshift(resm.deptId)
-            deptOptions.unshift(resm.parentId)
-          }
-        })
-        this.addrText = deptOptions;
+      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
+        this.addrOptions = resp.data;
+        this.headerTitle = res.user.deptName + '阳光村务一张图';
+        listDeptExcludeChild(res.user.loginDeptId).then((resp) => {
+          let deptOptions = [res.user.loginDeptId];
+          resp.data.map(resm => {
+            if (res.user.parentDeptName == resm.deptName) {
+              deptOptions.unshift(resm.deptId)
+              deptOptions.unshift(resm.parentId)
+            }
+          })
+          this.addrText = deptOptions;
+        });
+        this.queryParams.deptId = res.user.loginDeptId;
+        this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId;
+        this.majorEventOpenQueryParams.deptId = res.user.loginDeptId;
+        this.subsidyFundsQueryParams.deptId = res.user.loginDeptId;
+        this.permanentQueryParams.deptId = res.user.loginDeptId;
+        this.resourceListQueryParams.deptId = res.user.loginDeptId;
+        this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
+        //列表请求
+        this.getAllList();
+        // 加载地图
+        this.initMap(res.user.loginDeptId);
+
+        // 获取村边界的图层名称
+        this.getVillageBorderLayerName();
       });
-      this.queryParams.deptId = res.user.loginDeptId;
-      this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId;
-      this.majorEventOpenQueryParams.deptId = res.user.loginDeptId;
-      this.subsidyFundsQueryParams.deptId = res.user.loginDeptId;
-      this.permanentQueryParams.deptId = res.user.loginDeptId;
-      this.resourceListQueryParams.deptId = res.user.loginDeptId;
-      this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
-      //列表请求
-      this.getAllList();
-      // 加载地图
-      this.initMap(res.user.loginDeptId);
-      // 获取geoserver的地址
-      this.getGeoServerUrl();
-      // 获取村边界的图层名称
-      this.getVillageBorderLayerName();
+
     })
   },
   methods: {
@@ -263,7 +276,98 @@ export default {
       this.dialogImageUrl = url;
       this.dialogVisible = true;
     },
-    selectAddress (value) {
+    // 绘制地图
+    drawMap (node, isLocated) {    // isLocated 控制地图是否跳转
+      const dept = node.data;
+      gis.getMapContainer().removeLayer(this.mapBorder);
+      this.mapBorder = '';
+      gis.getMapContainer().removeLayer(this.deptLayer);
+      this.deptLayer = '';
+      if (dept.deptLevel === '5') {
+        this.cityId = dept.id;
+        this.currentDeptLevel = '5';
+        if (dept.children && dept.children.length > 0) {
+          // 添加区县边界
+          this.addCountyBorder(dept.children.map(item => item.id));
+          // 添加坐标点图层
+          this.addDeptLayer(dept.children, 'yellow.png');
+        }
+        if (isLocated) {
+          gis.getMapContainer().getView().setZoom(9);
+          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
+        }
+      } else if (dept.deptLevel === '4') {
+        this.countyId = dept.id;
+        this.currentDeptLevel = '4';
+        if (dept.children && dept.children.length > 0) {
+          // 添加乡镇边界
+          this.addTownBorder(dept.children.map(item => item.id));
+          // 添加坐标点图层
+          this.addDeptLayer(dept.children, 'yellow.png');
+        }
+        if (isLocated) {
+          gis.getMapContainer().getView().setZoom(11);
+          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
+        }
+        // this.villageIds = this.findLeafNodeIds(dept);
+      } else if (dept.deptLevel === '3') {
+        this.townId = dept.id;
+        this.countyId = node.path.slice(-2)[0];
+        this.currentDeptLevel = '3';
+        if (dept.children && dept.children.length > 0) {
+          // 添加村边界
+          this.addVillageBorder(dept.children.map(item => item.id));
+          // 添加坐标点图层
+          this.addDeptLayer(dept.children, 'yellow.png');
+        }
+        if (isLocated) {
+          gis.getMapContainer().getView().setZoom(13);
+          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
+        }
+        // this.villageIds = this.findLeafNodeIds(dept);
+      } else if (dept.deptLevel === '2') {
+        this.ruralId = dept.id;
+        this.townId = node.path.slice(-2)[0];
+        this.countyId = node.path.slice(-3)[0];
+        this.currentDeptLevel = '2';
+        if (dept.children && dept.children.length > 0) {
+          const groupIds = dept.children.map(item => item.id);
+          // 添加组边界
+          this.addGroupBorder(groupIds);
+          // 添加组的坐标点图层，并且跳转到图层的中心点位置
+          this.addGroupPointLayer(groupIds, isLocated);
+        } else {
+          // 添加村边界
+          this.addVillageBorder(dept.id);
+          // 添加坐标点图层
+          let deptList = [];
+          deptList.push(dept);
+          // this.addDeptLayer(deptList, 'yellow.png');
+          if (isLocated) {
+            gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
+          }
+        }
+        if (isLocated) {
+          gis.getMapContainer().getView().setZoom(15);
+        }
+        // this.villageIds = this.findLeafNodeIds(dept);
+      } else if (dept.deptLevel === '1') {
+        this.ruralId = node.path.slice(-2)[0];
+        this.townId = node.path.slice(-3)[0];
+        this.countyId = node.path.slice(-4)[0];
+        this.currentDeptLevel = '1';
+        // 添加组边界
+        this.addGroupBorder(dept.id);
+        // 添加组的坐标点图层，并且跳转到图层的中心点位置
+        this.addGroupPointLayer(dept.id, isLocated);
+        if (isLocated) {
+          gis.getMapContainer().getView().setZoom(17);
+        }
+        // this.villageIds = this.findLeafNodeIds(dept);
+      }
+      // this.changeLayerByDept();
+    },
+    selectAddress (value, isLocated = true) {
       const deptId = value[value.length - 1];
       this.queryParams.deptId = deptId;
       this.tempWorkerOpenQueryParams.deptId = deptId;
@@ -301,6 +405,7 @@ export default {
       // 获取资源列表
       this.getResourceList(deptId);
       let node = this.$refs["cascader"].panel.getNodeByValue(value);
+      this.drawMap(node, isLocated);
       const dept = node.data;
       const deptData = {
         deptId: dept.id,
@@ -359,9 +464,26 @@ export default {
     },
     // 获取geoserver的地址
     getGeoServerUrl () {
+      // 获取geoserver的地址
       getConfigKey("system.geoServer.url").then(response => {
         this.mapGeoServerUrl = response.msg;
       });
+      // 获取区县边界图层名称
+      getConfigKey("geoserver.layer.countyBorder").then(response => {
+        this.countyBorderLayerName = response.msg;
+      });
+      // 获取乡镇边界的图层名称
+      getConfigKey("geoserver.layer.townBorder").then(response => {
+        this.townBorderLayerName = response.msg;
+      });
+      // 获取村边界的图层名称
+      getConfigKey("geoserver.layer.villageBorder").then(response => {
+        this.villageBorderLayerName = response.msg;
+      });
+      // 获取组边界的图层名称
+      getConfigKey("geoserver.layer.groupBorder").then(response => {
+        this.groupBorderLayerName = response.msg;
+      });
     },
     // 创建矢量数据源
     addDeptLayer (nextDeptSet) {
@@ -468,6 +590,7 @@ export default {
     initMap (deptId) {
       getDept(deptId).then(response => {
         const dept = response.data;
+
         let mapCenterLocation;
         // 定义地图中心坐标
         if (dept.lng && dept.lat) {
@@ -487,6 +610,35 @@ export default {
         // // 获取资产列表
         this.getPermanentList(deptId);
 
+        let dept2 = this.addrOptions[0];
+        if (dept2.deptLevel === '5') {
+          // 登录身份为市级领导
+          this.userRole = 'cityLeader';
+          this.cityId = dept.id;
+          this.currentDeptLevel = '5';
+          // 添加区县边界
+          this.addCountyBorder(dept.children.map(item => item.id));
+        } else if (dept2.deptLevel === '4') {
+          // 登录身份为县级领导
+          this.userRole = 'countyLeader';
+          this.countyId = dept2.id;
+          this.currentDeptLevel = '4';
+          // 添加乡镇边界
+          this.addTownBorder(dept2.children.map(item => item.id));
+          gis.getView().setZoom(11);
+        } else if (dept2.deptLevel === '3') {
+          // 登录身份为镇级领导
+          this.userRole = 'townLeader';
+          this.townId = dept2.id;
+          this.currentDeptLevel = '3';
+          // 添加村边界
+          this.addVillageBorder(dept2.children.map(item => item.id));
+          gis.getView().setZoom(13);
+        }
+        // 添加坐标点图层
+        if (dept2.children) {
+          this.addDeptLayer(dept2.children);
+        }
         var that = this;
         //点击查询详细信息
         gis.getMapContainer().on("singleclick", function (evt) {
@@ -511,6 +663,19 @@ export default {
         });
       });
     },
+    // 添加区县边界
+    addCountyBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
+    },
+    // 添加乡镇边界
+    addTownBorder (deptIds) {
+      console.log(this.townBorderLayerName);
+      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
+    },
+    // 添加村边界
+    addVillageBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
+    },
     // 获取资源列表
     getResourceList (deptId) {
       getResourceListByDeptId(deptId).then(response => {

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

@@ -9,6 +9,8 @@ import { getResourceListByDeptId, listResource } 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";
+import { getConfigKey } from "@/api/system/config";
+import { treeselectByDeptId } from "@/api/system/dept";
 let gis = null;
 export default {
   components: {
@@ -16,6 +18,7 @@ export default {
   },
   data () {
     return {
+      yellowIcon: require('./icon/yellow.png'),
       //三务公开请求参数
       queryParams: {
         pageNum: 1,
@@ -223,16 +226,100 @@ export default {
   computed: {
   },
   created () {
+    this.getGeoServerUrl();
   },
   mounted () {
-    treeselect().then((resp) => this.addrOptions = resp.data);
     getInfo().then(res => {
-      this.initMap(res.user.loginDeptId);
-      // 加载地图
+      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
+        this.addrOptions = resp.data;
+        this.headerTitle = res.user.deptName + '阳光村务一张图';
+        listDeptExcludeChild(res.user.loginDeptId).then((resp) => {
+          let deptOptions = [res.user.loginDeptId];
+          resp.data.map(resm => {
+            if (res.user.parentDeptName == resm.deptName) {
+              deptOptions.unshift(resm.deptId)
+              deptOptions.unshift(resm.parentId)
+            }
+          })
+          this.addrText = deptOptions;
+        });
+        this.queryParams.deptId = res.user.loginDeptId;
+        this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId;
+        this.majorEventOpenQueryParams.deptId = res.user.loginDeptId;
+        this.subsidyFundsQueryParams.deptId = res.user.loginDeptId;
+        this.permanentQueryParams.deptId = res.user.loginDeptId;
+        this.resourceListQueryParams.deptId = res.user.loginDeptId;
+        this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
+        //列表请求
+        this.getAllList();
+        // 加载地图
+        this.initMap(res.user.loginDeptId);
+
+        // 获取村边界的图层名称
+        this.getVillageBorderLayerName();
+      });
+
     })
+    // treeselect().then((resp) => {
+    //   this.addrOptions = resp.data
+    //   getInfo().then(res => {
+    //     this.initMap(res.user.loginDeptId);
+    //     // 加载地图
+    //   })
+    // });
+
 
   },
   methods: {
+    // 获取村边界的图层名称
+    getVillageBorderLayerName () {
+      getConfigKey("geoserver.layer.villageBorder").then(response => {
+        this.villageBorderLayerName = response.msg;
+      });
+    },
+    // 添加区县边界
+    addCountyBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
+    },
+    // 添加乡镇边界
+    addTownBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
+    },
+    // 添加村边界
+    addVillageBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
+    },
+    // 获取资源列表
+    getResourceList (deptId) {
+      getResourceListByDeptId(deptId).then(response => {
+        if (response.data && response.data.length > 0) {
+          this.addResourceLayer(response.data);
+        }
+      });
+    },
+    // 获取geoserver的地址
+    getGeoServerUrl () {
+      // 获取geoserver的地址
+      getConfigKey("system.geoServer.url").then(response => {
+        this.mapGeoServerUrl = response.msg;
+      });
+      // 获取区县边界图层名称
+      getConfigKey("geoserver.layer.countyBorder").then(response => {
+        this.countyBorderLayerName = response.msg;
+      });
+      // 获取乡镇边界的图层名称
+      getConfigKey("geoserver.layer.townBorder").then(response => {
+        this.townBorderLayerName = response.msg;
+      });
+      // 获取村边界的图层名称
+      getConfigKey("geoserver.layer.villageBorder").then(response => {
+        this.villageBorderLayerName = response.msg;
+      });
+      // 获取组边界的图层名称
+      getConfigKey("geoserver.layer.groupBorder").then(response => {
+        this.groupBorderLayerName = response.msg;
+      });
+    },
     selectAddress (value) {
       const deptId = value[value.length - 1];
       this.queryParams.deptId = deptId;
@@ -303,64 +390,36 @@ export default {
       gis.addAnnotationLayer()
       // // 获取资源列表
       this.getResourceList(deptId);
-      //初始加载当前用户级别的geojson数据
-      // getUserGeo().then((res) => {
-      //   if (res.code == 200) {
-      //     // 存在geojson数据，加载边界图层，定位到当前位置
-      //     if (res.data.geoJson != null && res.data.geoJson != "") {
-      //       // 解析geojson数据,添加轮廓图层
-      //       require(["@/assets/maps/" + res.data.geoJson], (data) => {
-
-      //         this.map.addLayer(boundaryLayer);
-
-      //         //定位查询位置
-      //         const maxXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxX;
-      //         const maxYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxY;
-      //         const minXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minX;
-      //         const minYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minY;
-      //         //获取边界区域的中心位置
-      //         const center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]);
-      //         this.map.getView().animate({
-      //           // 只设置需要的属性即可
-      //           center: center, // 中心点
-      //           zoom: initZoom, // 缩放级别
-      //           rotation: undefined, // 缩放完成view视图旋转弧度
-      //           duration: 1000, // 缩放持续时间，默认不需要设置
-      //         });
-      //       });
-      //     } else { // 不存在geojson数据，直接定位到当前位置
-      //       gis.getMapContainer().getView().animate({
-      //         // 只设置需要的属性即可
-      //         center: fromLonLat([res.data.lng, res.data.lat]), // 中心点
-      //         zoom: initZoom, // 缩放级别
-      //         rotation: undefined, // 缩放完成view视图旋转弧度
-      //         duration: 1000, // 缩放持续时间，默认不需要设置
-      //       });
-      //     }
-      //     //村级组级只定位坐标点   deptLevel：  1 组级、2 村级、3 乡镇级、4 区县级
-      //     if (res.data.deptLevel === '3' || res.data.deptLevel === '4') {
-      //       let locationIcon;
-      //       if (res.data.deptLevel === '3') {
-      //         locationIcon = "red.png";
-      //       } else if (res.data.deptLevel === '4') {
-      //         locationIcon = "yellow.png";
-      //       }
-      //       //获取用户级别的下级区域
-      //       setTimeout(() => {
-      //         getUserGeoList(res.data.deptId).then((res) => {
-      //           if (res.code == 200) {
-      //             this.addDeptLayer(res.data, require(`./icon/${locationIcon}`))
-      //           }
-      //         });
-      //       }, 500);
-      //     } else {
-      //       let lowestOrder = [];
-      //       lowestOrder.push(res.data);
-      //       this.addDeptLayer(lowestOrder, require('./icon/green.png'));
-      //     }
-      //   }
-      // });
-
+      let dept2 = this.addrOptions[0];
+      console.log(this.addrOptions, 'this.addrOptions');
+      if (dept2.deptLevel === '5') {
+        // 登录身份为市级领导
+        this.userRole = 'cityLeader';
+        this.cityId = dept.id;
+        this.currentDeptLevel = '5';
+        // 添加区县边界
+        this.addCountyBorder(dept.children.map(item => item.id));
+      } else if (dept2.deptLevel === '4') {
+        // 登录身份为县级领导
+        this.userRole = 'countyLeader';
+        this.countyId = dept2.id;
+        this.currentDeptLevel = '4';
+        // 添加乡镇边界
+        this.addTownBorder(dept2.children.map(item => item.id));
+        gis.getView().setZoom(11);
+      } else if (dept2.deptLevel === '3') {
+        // 登录身份为镇级领导
+        this.userRole = 'townLeader';
+        this.townId = dept2.id;
+        this.currentDeptLevel = '3';
+        // 添加村边界
+        this.addVillageBorder(dept2.children.map(item => item.id));
+        gis.getView().setZoom(13);
+      }
+      // 添加坐标点图层
+      if (dept2.children) {
+        this.addDeptLayer(dept2.children);
+      }
       gis.getMapContainer().on("click", (evt) => {
         let feature = gis.getMapContainer().forEachFeatureAtPixel(
           evt.pixel,
@@ -484,9 +543,10 @@ export default {
     },
     // 创建矢量数据源
     addDeptLayer (nextDeptSet, locationIcon) {
+      console.log('nextDeptSet', nextDeptSet);
       let features = [];
       nextDeptSet.forEach(item => {
-        let fs = gis.getFeature(item, locationIcon)
+        let fs = gis.getFeature(item, this.yellowIcon)
         features.push(fs);
       });
       gis.getVectorLayerByFs(features)