资源gis组件

src/api/dataScreen/stockCooperative/index.js

@@ -1,17 +1,17 @@
 import request from '@/utils/request'
 
 //获根据用户获取其所在的行政单位（对象）信息
-export function getUserGeo() {
+export function getUserGeo () {
   return request({
-    url: '/bigData/common/getUserGeo',
+    url: '/api/bigData/common/getUserGeo',
     method: 'get',
   })
 }
 
 //获取村级下拉
-export function getUserGeoList(query) {
+export function getUserGeoList (query) {
   return request({
-    url: '/bigData/common/getUserGeoList/'+query,
+    url: '/api/bigData/common/getUserGeoList/' + query,
     method: 'get'
   })
 }

src/assets/maps/gis.json

@@ -0,0 +1,7 @@
+{
+  "name": "maps",
+  "version": "1.0.0",
+  "dependencies": {
+    
+  }
+}

src/components/gis-map/index.js

@@ -335,8 +335,6 @@ export default {
       return false;
     },
 
-
-
     // 添加坐标点图层
     addDeptLayer (nextDeptSet) {
       let features = [];

src/views/capital/index.js

@@ -17,27 +17,10 @@ import Right32 from './comps/right/bottom/2/index.vue';
 import Bottom2 from './comps/buttom/2/index.vue';
 import Bottom1 from './comps/buttom/1/index.vue';
 
-import { getConfigKey } from "@/api/system/config";
-import { getInfo } from "@/api/login";
-import { treeselect, treeselectByDeptId } from "@/api/system/dept";
-
-import GisUtils from '@/utils/gis.js';
-import {
-  assetsStatistics,
-  deptFundStatistics,
-  financeSummary, financeSummaryOverview, incomeBookRank, incomeMonthStatistics, incomeTownRank,
-  resourceAssetsStatistics
-} from "@/api/dataScreen/bigDataMonitoring2/stockCooperative.js";
 import { comps } from './data.js'
-import {
-  fromLonLat
-} from 'ol/proj'
 
-let gis = null;
+
 import GisMap from '@/components/gis-map/index.vue';
-const DEPT_CHANGED = 1;
-const YEAR_CHANGED = 1 << 1;
-const ALL_CHANGED = ~(1 << 31);
 export default {
   components: {
     GisMap,

src/views/property/index.html

@@ -1,5 +1,6 @@
 <div class="page">
-  <MainGis></MainGis>
+  <MainGis v-if="tab === '1'"></MainGis>
+  <GisMap v-else></GisMap>
   <Header title="资产一张图">
     <div slot="left">
       <Tabs @change="tabChange" :data="tabData"></Tabs>

src/views/property/index.js

@@ -32,19 +32,12 @@ import Right14 from './comps/right/top/4/index.vue';
 import Right24 from './comps/right/middle/4/index.vue';
 import Right34 from './comps/right/bottom/4/index.vue'
 
-import { getConfigKey } from "@/api/system/config";
-import { getInfo } from "@/api/login";
-import { treeselect, treeselectByDeptId } from "@/api/system/dept";
 
-import GisUtils from '@/utils/gis.js';
 
-import { comps } from './data.js'
-import {
-  fromLonLat
-} from 'ol/proj'
 
-let gis = null;
+import { comps } from './data.js'
 
+import GisMap from '@/components/gis-map/index.vue';
 import MainGis from './main-gis/index.vue';
 export default {
   components: {
@@ -76,7 +69,8 @@ export default {
     Right14,
     Right24,
     Right34,
-    MainGis
+    MainGis,
+    GisMap
   },
   data () {
     return {

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

@@ -536,7 +536,6 @@ export default {
     },
     // 添加资源图层
     addResourceLayer (resourceList) {
-      console.log(resourceList, 999);
       let features = [];
       resourceList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {

src/views/resources/comps/right/middle/1/index.js

@@ -27,5 +27,8 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange () {
+
+    }
   }
 };

src/views/resources/index.html

@@ -1,5 +1,6 @@
 <div class="page">
-  <div class="map" id="map"></div>
+  <MainGis v-if="tab === '1'"></MainGis>
+  <GisMap v-else></GisMap>
   <Header title="资源一张图">
     <div slot="left">
       <Tabs @change="tabChange" :data="tabData"></Tabs>

src/views/resources/index.js

@@ -15,21 +15,15 @@ import Right12 from './comps/right/top/2/index.vue';
 import Right22 from './comps/right/middle/2/index.vue';
 import Right32 from './comps/right/bottom/2/index.vue';
 import Bottom1 from './comps/buttom/1/index.vue';
-
-import { getConfigKey } from "@/api/system/config";
-import { getInfo } from "@/api/login";
-import { treeselect, treeselectByDeptId } from "@/api/system/dept";
-
-import GisUtils from '@/utils/gis.js';
+import GisMap from '@/components/gis-map/index.vue';
+import MainGis from './main-gis/index.vue';
 
 import { comps } from './data.js'
-import {
-  fromLonLat
-} from 'ol/proj'
 
-let gis = null;
 export default {
   components: {
+    GisMap,
+    MainGis,
     Header,
     Tabs,
     Left11,
@@ -48,6 +42,7 @@ export default {
   },
   data () {
     return {
+      comps,
       tabData: [
         {
           id: '1',
@@ -58,18 +53,7 @@ export default {
           name: '预警分析'
         }
       ],
-      yellowIcon: require('./icon/yellow.png'),
       tab: '1',
-      comps,
-      map: "",                        // 地图
-      mapGeoServerUrl: "",            // geoserver地址
-      mapBorder: "",                  // 地图边界
-      deptLayer: "",                  // 坐标点图层
-      countyBorderLayerName: "",      // 区县边界图层名称
-      townBorderLayerName: "",        // 乡镇边界图层名称
-      villageBorderLayerName: "",     // 村边界图层名称
-      groupBorderLayerName: "",       // 组边界图层名称
-      addrOptions: [],
     };
   },
   computed: {
@@ -80,156 +64,10 @@ export default {
   created () {
   },
   mounted () {
-    // 获取geoserver的地址
-    this.getGeoServerUrl();
-    getInfo().then(res => {
-      // this.getData();
-      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
-        this.addrOptions = resp.data;
-        // 初始化地图
-        this.initMap();
-      });
-    });
   },
   methods: {
     tabChange (info) {
       this.tab = info.id;
-    },
-    // 初始化地图
-    initMap () {
-      let dept = this.addrOptions[0];
-      let mapCenterLocation;
-      if (dept.lng && dept.lat) {
-        mapCenterLocation = [dept.lng, dept.lat];
-      } else {
-        mapCenterLocation = [116.391461, 39.902359];
-      }
-      gis = new GisUtils('map')
-      gis.addTianDiTuLayer()
-      gis.addAnnotationLayer()
-      if (dept.deptLevel === '5') {
-        // 登录身份为市级领导
-        this.userRole = 'cityLeader';
-        this.cityId = dept.id;
-        this.currentDeptLevel = '5';
-        // 添加区县边界
-        this.addCountyBorder(dept.children.map(item => item.id));
-      } else if (dept.deptLevel === '4') {
-        // 登录身份为县级领导
-        this.userRole = 'countyLeader';
-        this.countyId = dept.id;
-        this.currentDeptLevel = '4';
-        // 添加乡镇边界
-        this.addTownBorder(dept.children.map(item => item.id));
-        gis.getView().setZoom(11);
-        // this.villageIds = this.findLeafNodeIds(dept);
-      } else if (dept.deptLevel === '3') {
-        // 登录身份为镇级领导
-        this.userRole = 'townLeader';
-        this.townId = dept.id;
-        this.currentDeptLevel = '3';
-        // 添加村边界
-        this.addVillageBorder(dept.children.map(item => item.id));
-        this.map.getView().setZoom(13);
-        // this.villageIds = this.findLeafNodeIds(dept);
-      }
-      // 添加坐标点图层
-      if (dept.children) {
-        this.addDeptLayer(dept.children, 'yellow.png');
-      }
-      gis.getView().setCenter(fromLonLat(mapCenterLocation))
-
-      // 地图点击事件
-      gis.getMapContainer().on("click", (evt) => {
-        let feature = this.map.forEachFeatureAtPixel(
-          evt.pixel,
-          (feature) => feature
-        );
-        if (feature) {
-          // 镇级：加载村级坐标点
-          if (feature.get('level') === 'deptPoint') {
-            let parentIds = [];
-            this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds);
-            this.addrText = parentIds;
-            this.selectAddress(parentIds);
-          }
-        }
-      });
-    },
-
-    selectAddress (value, isLocated = true) {  // isLocated 控制地图是否跳转
-      this.queryParams.deptId = value[value.length - 1];
-      this.getData(DEPT_CHANGED);
-      let node = this.$refs["cascader"].panel.getNodeByValue(value);
-      this.drawMap(node, isLocated);
-    },
-
-    // 查找指定deptId的所有父节点id
-    findParentNodeIds (tree, deptId, result) {
-      for (let node of tree) {
-        if (node.id === deptId) {
-          result.unshift(node.id);
-          return true;
-        }
-        if (node.children && node.children.length > 0) {
-          let isFind = this.findParentNodeIds(node.children, deptId, result);
-          if (isFind) {
-            result.unshift(node.id);
-            return true;
-          }
-        }
-      }
-      return false;
-    },
-
-
-
-    // 添加坐标点图层
-    addDeptLayer (nextDeptSet) {
-      let features = [];
-      nextDeptSet.forEach(item => {
-        let fs = gis.getFeature(item, this.yellowIcon)
-        features.push(fs);
-      });
-      console.log(features, 88);
-      gis.getVectorLayerByFs(features)
-      gis.mapSetFit(features)
-
-    },
-    // 添加区县边界
-    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)
-    },
-    // 获取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;
-      });
     }
   }
 };

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

@@ -0,0 +1,14 @@
+<div class="map border" id="map2">
+  <!--选择地址-->
+  <!-- <div class="select_address">
+    <div class="dot left"></div>
+    <div class="dot right"></div>
+    <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
+      <template slot-scope="{ node, data }">
+        <span>{{ data.label }}</span>
+        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+      </template>
+    </el-cascader>
+  </div> -->
+</div>
+

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

@@ -0,0 +1,183 @@
+
+import GisUtils from '@/utils/gis.js';
+import {
+  fromLonLat
+} from 'ol/proj'
+import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/index.js";
+import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
+import { getInfo } from "@/api/login";
+import { getConfigKey } from "@/api/system/config";
+import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js";
+import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
+import { attachmentList } from "@/api/common/uploadAttachment.js";
+let gis = null;
+export default {
+  components: {
+  },
+  data () {
+    return {
+    };
+  },
+  computed: {
+  },
+  created () {
+  },
+  mounted () {
+    this.initMap();
+  },
+  methods: {
+    // 加载地图
+    initMap () {
+      gis = new GisUtils('map2')
+      gis.addTianDiTuLayer()
+      gis.addAnnotationLayer()
+      const initZoom = 11;
+      //初始加载当前用户级别的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'));
+          }
+        }
+      });
+
+      gis.getMapContainer().on("click", (evt) => {
+        let feature = gis.getMapContainer().forEachFeatureAtPixel(
+          evt.pixel,
+          (feature) => feature
+        );
+        if (feature) {
+          // 镇级：加载村级坐标点
+          if (feature.get('deptLevel') === '3') {
+            gis.getMapContainer().getView().animate({
+              center: fromLonLat([feature.get('lng'), feature.get('lat')]), // 中心点
+              zoom: 12, // 缩放级别
+              rotation: undefined, // 缩放完成view视图旋转弧度
+              duration: 1000, // 缩放持续时间，默认不需要设置
+            });
+            //根据镇级deptID获取下级部门集合，并创建坐标点
+            getUserGeoList(feature.get('deptId')).then((res) => {
+              if (res.code == 200) {
+                let content = res.data;
+                if (this.villagePointLayer) {
+                  gis.getMapContainer().removeLayer(this.villagePointLayer);
+                  this.villagePointLayer = "";
+                }
+                this.villagePointLayer = this.addDeptLayer(content, require('./icon/green.png'));
+              }
+            });
+          }
+        }
+      });
+
+      // 缩小地图，重新加载页面
+      gis.getMapContainer().on("moveend", (evt) => {
+        const zoom = gis.getMapContainer().getView().getZoom();
+        if (this.villagePointLayer && zoom < 10.5) {
+          gis.getMapContainer().removeLayer(this.villagePointLayer);
+          this.villagePointLayer = "";
+        }
+      });
+    },
+    // 创建矢量数据源
+    addDeptLayer (nextDeptSet, locationIcon) {
+      let features = [];
+      nextDeptSet.forEach(item => {
+        let fs = gis.getFeature(item, locationIcon)
+        features.push(fs);
+      });
+      gis.getVectorLayerByFs(features)
+      gis.mapSetFit(features)
+    },
+    // 获取资源列表
+    getResourceList (deptId) {
+      getResourceListByDeptId(deptId).then(response => {
+        if (response.data && response.data.length > 0) {
+          this.addResourceLayer(response.data);
+        }
+      });
+    },
+    // 添加资源图层
+    addResourceLayer (resourceList) {
+      let features = [];
+      resourceList.forEach(item => {
+        if (item.theGeom != null && item.theGeom !== '') {
+          let fs = gis.getFeature3(item)
+          features.push(fs);
+        }
+
+      });
+
+
+      gis.getVectorLayerByFs(features)
+      gis.mapSetFit(features)
+    },
+    getAllList () {
+      //三务公开
+      // this.getList(null);
+      // //零工公开
+      // this.getTempWorkerOpenList();
+      // //重大事项公开
+      // this.getMajorEventOpenList();
+      // //补贴资金管理
+      // this.getSubsidyFundsList();
+      // //固定资产
+      // this.getPermanentListList();
+      // //资源资产
+      // this.getResourceListList();
+      // //合同信息
+      // this.getContractionByPermanentList();
+      // //资金情况
+      // this.getFundAndBankAmountByDeptIdArray();
+    },
+  }
+};

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

@@ -0,0 +1,42 @@
+.map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+//选择地址
+.select_address {
+  height: 30px;
+  width: 300px;
+  position: absolute;
+  left: 480px;
+  top: 112px;
+  z-index: 302;
+
+  // <div class="dot left"></div>
+  //     <div class="dot right"></div>
+  ::v-deep {
+    .el-input--suffix {
+      // background: url('../../../../assets/images/dataScreen/bigDataMonitoring2/stockCooperative/addText_bg.png') center center no-repeat !important;
+      background-size: 100% 100% !important;
+      height: 35px;
+      width: 280px;
+
+      .el-input__inner {
+        background: none !important;
+        border: 0 none !important;
+        color: #a7dbff;
+        font-size: 1.66vh;
+        text-align: center;
+        padding: 0;
+        padding-top: .9vh;
+      }
+
+      .el-input__icon {
+        display: none !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>