rongxin.nongjing.expo/src/views/capital/index.js

import Header from '@/components/header/index.vue';
import Tabs from '@/components/tabs/index.vue';

import Left11 from './comps/left/top/1/index.vue';
import Left21 from './comps/left/middle/1/index.vue';
import Left31 from './comps/left/bottom/1/index.vue';
import Right11 from './comps/right/top/1/index.vue';
import Right21 from './comps/right/middle/1/index.vue';
import Right31 from './comps/right/bottom/1/index.vue';

import Left12 from './comps/left/top/2/index.vue';
import Left22 from './comps/left/middle/2/index.vue';
import Left32 from './comps/left/bottom/2/index.vue';
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 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 { comps } from './data.js'
import {
  fromLonLat
} from 'ol/proj'

let gis = null;
export default {
  components: {
    Header,
    Tabs,
    Left11,
    Left21,
    Left31,
    Right11,
    Right21,
    Right31,
    Left12,
    Left22,
    Left32,
    Right12,
    Right22,
    Right32,
    Bottom2,
    Bottom1
  },
  data () {
    return {
      tabData: [
        {
          id: '1',
          name: '统计分析'
        },
        {
          id: '2',
          name: '预警分析'
        }
      ],
      yellowIcon: require('./icon/yellow.png'),
      tab: '1',
      comps,
      map: "",                        // 地图
      mapGeoServerUrl: "",            // geoserver地址
      mapBorder: "",                  // 地图边界
      deptLayer: "",                  // 坐标点图层
      countyBorderLayerName: "",      // 区县边界图层名称
      townBorderLayerName: "",        // 乡镇边界图层名称
      villageBorderLayerName: "",     // 村边界图层名称
      groupBorderLayerName: "",       // 组边界图层名称
      addrOptions: [],
    };
  },
  computed: {
    currentComp: function () {
      return this.comps[this.tab]
    }
  },
  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;
      });
    }
  }
};