修改eslint配置增加mock配置

YANGDL

2021-01-05 77f7281ff7cee541aaa51339512e6443b7d89e42

修改eslint配置增加mock配置

 .eslintrc.js

New file
@@ -0,0 +1,28 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        mocha: true
      }
    }
  ]
}

 aliases.config.js

@@ -1,26 +1,26 @@
// const path = require('path')
//
// function resolveSrc(_path) {
//   return path.join(__dirname, _path)
// }
//
// const aliases = {
//   '@src': 'src',
//   '@router': 'src/router',
//   '@views': 'src/views',
//   '@components': 'src/components',
//   '@assets': 'src/assets',
//   '@utils': 'src/utils',
//   '@styles': 'src/styles'
// }
//
// module.exports = {
//   webpack: {},
//   jest: {}
// }
//
// for (const alias in aliases) {
//   module.exports.webpack[alias] = resolveSrc(aliases[alias])
//   module.exports.jest['^' + alias + '/(.*)$'] =
//     '<rootDir>/' + aliases[alias] + '/$1'
// }
const path = require('path')

function resolveSrc(_path) {
  return path.join(__dirname, _path)
}

const aliases = {
  '@src': 'src',
  '@router': 'src/router',
  '@views': 'src/views',
  '@components': 'src/components',
  '@assets': 'src/assets',
  '@utils': 'src/utils',
  '@styles': 'src/styles'
}

module.exports = {
  webpack: {},
  jest: {}
}

for (const alias in aliases) {
  module.exports.webpack[alias] = resolveSrc(aliases[alias])
  module.exports.jest['^' + alias + '/(.*)$'] =
    '<rootDir>/' + aliases[alias] + '/$1'
}

 package.json

@@ -4,7 +4,11 @@
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve-test": "vue-cli-service serve --mode test",
    "serve-production": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development",
    "build-test": "vue-cli-service build --mode test",
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
@@ -32,30 +36,22 @@
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "cache-loader": "^4.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "mockjs": "^1.1.0",
    "less": "^3.13.0",
    "less-loader": "^7.1.0",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",

 src/base/BaseVectorLayer.js

@@ -8,12 +8,12 @@
    LOAD_TYPE_URL = 'url' // ajax加载方法
    /**
     * 初始化图层
     * @param {*} options 
     * @param {*} options
     * <code>
     * {
     *   map : '地图引用'
     *   params : 地图加载参数
     *   
     *
     *   code : 图层编号
     *   name : 图层名称
     *   loadType : 图层加载类型， json或者url
@@ -22,114 +22,114 @@
     * }
     * </code>
     */
    constructor(options){
        this.map = options.map // 必填项
        this.params = options.params // 必填项，加载图层数据的参数， 子类需要，可以是{}空对象
    constructor (options) {
      this.map = options.map // 必填项
      this.params = options.params // 必填项，加载图层数据的参数， 子类需要，可以是{}空对象

        this.layerCode = options.code || '' // 图层编码
        this.layerName = options.name || '' // 图层名称
        this.layerLoadType = options.loadType || BaseVectorLayer.LOAD_TYPE_JSON // 图层加载类型
        this.layerUrl = options.url || '' // 数据请求地址
        this.layerData = options.data || '' // 原始GeoJson数据
      this.layerCode = options.code || '' // 图层编码
      this.layerName = options.name || '' // 图层名称
      this.layerLoadType = options.loadType || BaseVectorLayer.LOAD_TYPE_JSON // 图层加载类型
      this.layerUrl = options.url || '' // 数据请求地址
      this.layerData = options.data || '' // 原始GeoJson数据

        this.layerHandler = null // 图层引用
      this.layerHandler = null // 图层引用

        this.features = [] // 所有被构建出来的Features
        this.featuresArray = [] // 所有被构建出来的Features保存备份，避免再次被加载。 load方法全生命周期只被调用一次
      this.features = [] // 所有被构建出来的Features
      this.featuresArray = [] // 所有被构建出来的Features保存备份，避免再次被加载。 load方法全生命周期只被调用一次

        this.featuresGroup = new Map() // 对加载的数据进行分组，便于后续控制。 但在数据初始化时，需要手动分组。否则，分组
      this.featuresGroup = new Map() // 对加载的数据进行分组，便于后续控制。 但在数据初始化时，需要手动分组。否则，分组

        this._init(this.map, this.params)
      this._init(this.map, this.params)
    }

    /**
     * 初始化基本的图层并加载到map中
     */
    _init(map){
        this.layerHandler = L.layerGroup().addTo(map)
    _init (map) {
      this.layerHandler = L.layerGroup().addTo(map)
    }

    /**
     * 加载数据
     * @param boolean isAddToMap 是否直接将marker添加到地图中, 默认是加载
     */
    load(isAddToMap = true){
        if(this.layerHandler) { // 默认，应该只会加载一次，但是如果有的图层要定时刷新，则需要先清除原图层的数据
            this.layerHandler.clearLayers()
        }
    load (isAddToMap = true) {
      if (this.layerHandler) { // 默认，应该只会加载一次，但是如果有的图层要定时刷新，则需要先清除原图层的数据
        this.layerHandler.clearLayers()
      }

        let features = [] 
      const features = []

        // 依据加载方式加载数据
        if(this.layerLoadType === BaseVectorLayer.LOAD_TYPE_JSON) {
            this.features = this._loadFromJSON()
            
        }else if(this.layerLoadType === BaseVectorLayer.LOAD_TYPE_URL) {
            this.features = this._loadFromURL()
        }else {
            console.log('图层【'+this.layerCode+'_'+this.layerName+'】的'+this.loadType+'加载方式暂不支持！')
        }
      // 依据加载方式加载数据
      if (this.layerLoadType === BaseVectorLayer.LOAD_TYPE_JSON) {
        this.features = this._loadFromJSON()
      } else if (this.layerLoadType === BaseVectorLayer.LOAD_TYPE_URL) {
        this.features = this._loadFromURL()
      } else {
        console.log('图层【' + this.layerCode + '_' + this.layerName + '】的' + this.loadType + '加载方式暂不支持！')
      }

        if(isAddToMap){ // 添加到地图中
            this.layerHandler.addLayer(features)
        }
      if (isAddToMap) { // 添加到地图中
        this.layerHandler.addLayer(features)
      }
    }

    _loadFromJSON(){
        console.log('该方法是抽象方法，在子类尚未实现！')
    _loadFromJSON () {
      console.log('该方法是抽象方法，在子类尚未实现！')
    }
    _loadFromURL(){
        console.log('该方法是抽象方法，在子类尚未实现！')

    _loadFromURL () {
      console.log('该方法是抽象方法，在子类尚未实现！')
    }

    /**
     * 显示图层， 如果groups参数，则只显示group对应的图层
     * @param {} groups 数组，元素之与layerGroups键值对应。
     */
    show(groups){
        if(typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
            if(this.layerHandler) {
                for(let i = 0, len = groups.length; i < len; i++) {
                    let gFeaturesArray = this.featuresGroup.get(groups[i])
                    if(gFeaturesArray || gFeaturesArray.length > 0){
                        gFeaturesArray.forEach(element => {
                            this.layerHandler.removeLayer(element) // 避免被重复加载
                            this.layerHandler.addLayer(element)
                        });
                    }
                }
    show (groups) {
      if (typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
        if (this.layerHandler) {
          for (let i = 0, len = groups.length; i < len; i++) {
            const gFeaturesArray = this.featuresGroup.get(groups[i])
            if (gFeaturesArray || gFeaturesArray.length > 0) {
              gFeaturesArray.forEach(element => {
                this.layerHandler.removeLayer(element) // 避免被重复加载
                this.layerHandler.addLayer(element)
              })
            }
        } else { // 否则加载全部的数据
            if(this.layerHandler) {
                this.layerHandler.clearLayers()
                for(let i = 0, len = this.featuresArray.length; i < len; ++i){
                    this.layerHandler.addLayer(this.featuresArray[i])
                }
            }
          }
        }
      } else { // 否则加载全部的数据
        if (this.layerHandler) {
          this.layerHandler.clearLayers()
          for (let i = 0, len = this.featuresArray.length; i < len; ++i) {
            this.layerHandler.addLayer(this.featuresArray[i])
          }
        }
      }
    }

    /**
     * 隐藏图层， 如果groups参数，则只隐藏group对应的图层
     * @param {} groups 数组，元素之与layerGroups键值对应。 如果图层在初始加载时，没有对数据分组，该方法不会有效果。
     */
    hide(groups){
        if(typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
            if(this.layerHandler) {
                for(let i = 0, len = groups.length; i < len; i++) {
                    let gFeaturesArray = this.featuresGroup.get(groups[i])
                    if(gFeaturesArray || gFeaturesArray.length > 0){
                        gFeaturesArray.forEach(element => {
                            this.layerHandler.removeLayer(element)
                        });
                    }
                }
    hide (groups) {
      if (typeof groups !== 'undefined') { // 如果传递了groups， 则按分组的要求加载图层
        if (this.layerHandler) {
          for (let i = 0, len = groups.length; i < len; i++) {
            const gFeaturesArray = this.featuresGroup.get(groups[i])
            if (gFeaturesArray || gFeaturesArray.length > 0) {
              gFeaturesArray.forEach(element => {
                this.layerHandler.removeLayer(element)
              })
            }
        } else { // 否则卸载全部的数据
            if(this.layerHandler) {
                this.layerHandler.clearLayers()
            }
          }
        }
      } else { // 否则卸载全部的数据
        if (this.layerHandler) {
          this.layerHandler.clearLayers()
        }
      }
    }
}


 src/components/LayerController/BaseMapController.vue

@@ -1,7 +1,7 @@
<template>
<div class="floatPanel frontMap basemapLayer">
  <div  v-for="item in basemapLayers" :key="item.id" class="basemapLayerItem">{{item.text}}</div>
</div>
  <div class="floatPanel frontMap basemapLayer">
    <div v-for="item in basemapLayers" :key="item.id" class="basemapLayerItem">{{ item.text }}</div>
  </div>
</template>

<script>
@@ -9,7 +9,7 @@
  name: 'BaseMapController',
  mixins: [],
  components: [],
  data() {
  data () {
    return {
      basemapLayers: [
        {
@@ -79,25 +79,28 @@
</script>

<style scoped lang="less">
  .frontMap{
    z-index: 1000;
  }
  .floatPanel{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 94px;
    height: 32px;
  }
  .basemapLayer{
    border: lightgray 1px solid;
  }
  .basemapLayerItem{
    width: 26px;
    height: 26px;
    margin: 2px;
.frontMap {
  z-index: 1000;
}

    float: left;
    background-color: white;
  }
.floatPanel {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 94px;
  height: 32px;
}

.basemapLayer {
  border: lightgray 1px solid;
}

.basemapLayerItem {
  width: 26px;
  height: 26px;
  margin: 2px;

  float: left;
  background-color: white;
}
</style>

 src/components/LayerController/LayerController.vue

@@ -1,15 +1,13 @@
<template>
  <div class="float-panel">
    <!-- <i class="horn horn-tl"></i> -->
    <!-- <i class="horn horn-tr"></i> -->
    <i class="horn horn-br"></i>
    <i class="horn horn-bl"></i>

    <div class="head title-border">
      <div class="title-text-border">
        <div class="title-icon"></div>
        <div class="title-text">业务看板</div>
        <div class="title-button" :class="{'switch-head-up':true, 'switch-head-down': !panelSwitch.main}" @click="switchPanel">
        <div class="title-button" :class="{'switch-head-up':true, 'switch-head-down': !panelSwitch.main}"
             @click="switchPanel">
          <!-- <i class="el-icon-arrow-down"></i> -->
        </div>
      </div>
@@ -23,17 +21,14 @@
</template>

<script>
import api from './LayerControllerAPI'
// import { mapState, mapMutations } from 'vuex'
import '@assets/css/map/magic.min.css'
import presets from './layerControllerPresets'
// import $ from 'jquery'

import iconSetting from '@/assets/images/map-pages/icon/setting.png'

export default {
  name: 'LayerController',
  components: { },
  components: {},
  props: {
    preset: {
      type: String,
@@ -41,66 +36,65 @@
    }
  },
  computed: {
    map(){
    map () {
      return this.$store.state.map.map
    },
    L(){
    L () {
      return this.$store.state.map.L
    },
    layerHelper(){
    layerHelper () {
      return this.$store.state.map.layerHelper
    },
    layerControllerVisible(){
    layerControllerVisible () {
      return this.$store.state.map.layerControllerVisible
    }
  },
  data() {
  data () {
    return {
      height:'200px',
      icons:{
        setting:iconSetting
      height: '200px',
      icons: {
        setting: iconSetting
      },
      panelSwitch: {
        main: true // 主窗口
      }
    }
  },
  mounted() {
     this.$nextTick(function() {
        this.init()
        console.log(api)
     })
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    init() {
    init () {
      this.initPreset()
    },
    initPreset() {
    initPreset () {
      if (this.preset !== 'default') {
        let prmPreset = presets[this.preset]
        const prmPreset = presets[this.preset]
        Object.assign(this.layerControllerVisible, prmPreset) // 防止预设参数与默认参数不一致导致报错，如果没有按照您的配置发生改变，请检查拼写是否正确
        if (prmPreset === 'undefined') {
          console.log('该图层控制面板的预设没有找到，请检查预设名称是否正确！')
        } else {
          this.$store.commit('updateLayerControllerVisible', this.layerControllerVisible);
          this.$store.commit('updateLayerControllerVisible', this.layerControllerVisible)
        }
      }
    },
    switchPanel() {
    switchPanel () {
      this.panelSwitch.main = !this.panelSwitch.main
      if (this.panelSwitch.main) {
        this.height = '200px'
      } else {
        this.height = '0px'
      }
    },
    }
  }
}
</script>

<style lang="less">

.float-panel{
.float-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
@@ -108,14 +102,17 @@
  height: auto;
  font-size: 11px;
  z-index: 1000;
  div{
    color:#90c8e0;

  div {
    color: #90c8e0;
  }
  #panelInnerContent{

  #panelInnerContent {
    overflow: hidden;
    transition: all 0.5s linear;
  }
  .title-border{

  .title-border {
    width: 100%;
    height: 28px;
    background: #10488c;
@@ -123,6 +120,7 @@
    clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
    position: relative;
  }

  .title-border:before {
    content: "";
    display: block;
@@ -133,6 +131,7 @@
    left: 0;
    background-color: #38c8ef;
  }

  .title-border:after {
    content: "";
    display: block;
@@ -145,6 +144,7 @@
    -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
    clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
  }

  .title-text-border {
    width: 100%;
    height: 28px;
@@ -152,7 +152,8 @@
    -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
    clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
  }
  .title-icon{

  .title-icon {
    float: left;
    width: 22px;
    height: 22px;
@@ -160,7 +161,8 @@
    margin-left: 2px;
    background-image: url(/assets/images/map-pages/icon/setting.png);
  }
  .title-text{

  .title-text {
    float: left;
    width: 150px;
    color: #00d0f9;
@@ -172,7 +174,8 @@
    filter: brightness(100%);
    text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
  }
  .title-line{

  .title-line {
    display: inline-block;
    width: 120px;
    height: 1px;
@@ -182,7 +185,8 @@
    line-height: 5px;
    vertical-align: middle;
  }
  .title-point{

  .title-point {
    display: inline-block;
    width: 5px;
    height: 5px;
@@ -191,25 +195,27 @@
    line-height: 5px;
    vertical-align: middle;
  }
  .title-button{

  .title-button {
    float: right;
    width: 28px;
    height: 28px;
    cursor: pointer;
    :hover{

    :hover {
      font-weight: bold;
      color: white;
    }
  }

  .body-box{
    background-color: rgba(44,62,80, 0.6);
  .body-box {
    background-color: rgba(44, 62, 80, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    height: auto;
  }

  .switch-head-up{
  .switch-head-up {
    width: 22px;
    height: 16px;
    float: right;
@@ -221,12 +227,14 @@
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }
  .switch-head-down{

  .switch-head-down {
    transform: rotateX(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
  }
  select{

  select {
    background: transparent;
    margin: 6px;
    border: .5px solid #569EB7;
@@ -234,48 +242,56 @@
    color: #569EB7;
    padding: 0 16px;
  }
  .horn{

  .horn {
    width: 6px;
    height: 6px;
    float: left;
    position: absolute;
  }
  .horn-tl{

  .horn-tl {
    background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
    left: -1px;
    top: -1px;
  }
  .horn-tr{

  .horn-tr {
    background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
    right: -1px;
    top: -1px;
  }
  .horn-bl{

  .horn-bl {
    background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
    left: -1px;
    bottom: -1px;
  }
  .horn-br{

  .horn-br {
    background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
    right: -1px;
    bottom: -1px;
  }
  ::-webkit-scrollbar{

  ::-webkit-scrollbar {
    width: 7px;
    height: 5px !important;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #0661AE;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0661AE;
    border: 1px solid transparent;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background   : #0E3565;
    background: #0E3565;
  }
}


 src/components/LayerController/LayerControllerAPI.js

File was deleted

 src/components/LayerController/layerControllerPresets.js

@@ -1,26 +1,26 @@
/**
 * 大图图层控制面板的显示预设
 */
let bigmapPreset = { // 图层控制面板的显示状态››
    layerController: true, // 爸爸栏目：是否显示图层控制面板
const bigmapPreset = { // 图层控制面板的显示状态››
  layerController: true // 爸爸栏目：是否显示图层控制面板
}

/**
 * 综合报警图层控制面板的显示预设
 */
let warningPreset = { // 图层控制面板的显示状态››
    layerController: true, // 爸爸栏目：是否显示图层控制面板
const warningPreset = { // 图层控制面板的显示状态››
  layerController: true // 爸爸栏目：是否显示图层控制面板
}

/**
 * 综合报警图层控制面板的显示预设
 */
let vehicleWarningPreset = { // 图层控制面板的显示状态››
    layerController: true, // 爸爸栏目：是否显示图层控制面板
const vehicleWarningPreset = { // 图层控制面板的显示状态››
  layerController: true // 爸爸栏目：是否显示图层控制面板
}

export default {
    bigmapPreset,
    warningPreset,
    vehicleWarningPreset
  bigmapPreset,
  warningPreset,
  vehicleWarningPreset
}

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,14 +1,16 @@
<template>
  <div class="inner-panel">
  <div class="inner-panel" v-show="isShow">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
      <el-checkbox style="position: absolute;" name="basemap" v-model="selectedBasemap"   :value="item.code" label="item.code" @change="changeBasemap">标注</el-checkbox>
<!--      <el-popover-->
<!--          placement="top-start"-->
<!--          trigger="hover"-->
<!--          content="item.name">-->
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name" @click="changeBasemap"/>
<!--      </el-popover>-->
<!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->
      <div style="display: flex;">
        <el-checkbox :src="item.conf.icon_actived" style="display: flex;" name="basemap" v-model="selectedBasemap"
                     :value="item.code" label="item.code" @change="changeBasemap">标注
        </el-checkbox>
        <img style="position: absolute;" :src="item.conf.icon_actived" width="50" height="50" :title="item.name"
             @click="changeBasemap"/>
      </div>


      <!--      <input  style="position: absolute;" type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>标注-->

    </div>
  </div>
@@ -20,6 +22,7 @@
  components: {},
  data() {
    return {
      isShow: true,
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
@@ -32,6 +35,9 @@
  mounted() {
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow
    },
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
@@ -39,8 +45,14 @@
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  }

  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
};
</script>

@@ -50,6 +62,7 @@
  justify-content: center;
  align-items: center;
}

.basemap-layer-item {
  display: flex;
  width: 50px;
@@ -62,6 +75,7 @@
    left: 0px;
    top: -53px;
  }

  .basemap-layer-item-name {
    position: relative;
    left: 0px;

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,168 +1,169 @@
<template>
    <div class="inner-panel">
        <div class="tile-panel">
            <div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                              @change="swTileLayer"/></div>
        </div>
        <div class="wmts-panel">
            <div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                              @change="swWmtsLayer"/></div>
        </div>
        <div class="wms-panel">
            <div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox">
                <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                            @change="swAllLayers(item)"/>{{item.name}} <span @click="swFilter(item)" class="btn-filter">过滤</span>
                </div>
                <div class="layerbox-item">
                    <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{itm.sname}}
                    </div>
                </div>
            </div>
        </div>
  <div class="inner-panel">
    <div class="tile-panel">
      <div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                        @change="swTileLayer"/></div>
    </div>
    <div class="wmts-panel">
      <div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name"
                                                                        @change="swWmtsLayer"/></div>
    </div>
    <div class="wms-panel">
      <div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox">
        <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                    @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"
                                                                       class="btn-filter">过滤</span>
        </div>
        <div class="layerbox-item">
          <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"
                                                                                            :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                            :checked="itm.checked"
                                                                                            :value="itm.code"
                                                                                            @change="swWmsLayer(itm)"/>{{ itm.sname }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import WmsHelper from "../../helpers/WmsHelper";
import WmsHelper from "../../helpers/WmsHelper";


    export default {
        name: "LcServiceLayer",
        components: {},
        data() {
            return {
                selectedLineLayer: [], // 选中的管线图层
                selectedSubsidiaryLayer: [], // 选中的附属要素
                serviceTileLayerList: [], // Tile图层列表
                serviceWmtsLayerList: [], // Wmts图层列表
                serviceWmsLayerList: [] // 图层列表
            };
        },
        computed: {
          serviceLayerHelper(){
              return this.$store.state.map.serviceLayerHelper
          },
          mapConfig(){
            return this.$store.state.map.mapConfig
          }
        },
        mounted() {
            // console.log('03步骤：', this.helper)
        },
        methods: {
            swAllLayers(item) {
                // eslint-disable-next-line no-debugger
                item.checked = !item.checked
                for (let i = 0, len = item.layers.length; i < len; ++i) {
                    item.layers[i].checked = item.checked
                }
                this.updateWms()

                console.log(this.mapConfig)
            },
            swTileLayer() {
                console.log('该TILE方法未实现！')
            },
            swWmtsLayer() {
                console.log('该WMTS方法未实现！')
            },
            swWmsLayer(itm) {
                console.log('22222222')
                itm.checked = !itm.checked
                this.updateWms()
            },
            swFilter(item) {
                this.$store.commit('setSelectedServiceLayer', item.code)
                this.$store.commit('toggleServiceLayerFilter')
            },
            updateServiceLayerList() {
                // eslint-disable-next-line no-debugger
                // debugger
                let tileCfg = this.serviceLayerHelper.getTileLayers()
                this.serviceTileLayerList = []
                for (let i = 0, len = tileCfg.length; i < len; ++i) {
                    if (tileCfg[i].config.inLegend) {
                        console.log(tileCfg[i])
                    }
                }
                let wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
                this.serviceWmtsLayerList = []
                for (let i = 0, len = wmtsCfg.length; i < len; ++i) {
                    if (wmtsCfg[i].config.inLegend) {
                        console.log(wmtsCfg[i])
                    }
                }
                let wmsCfg = this.serviceLayerHelper.getWmsLayers()
                this.serviceWmsLayerList = []
                for (let i = 0, len = wmsCfg.length; i < len; ++i) {
                    if (wmsCfg[i].config.inLegend) {
                        this.serviceWmsLayerList.push(wmsCfg[i].config)
                    }
                }
            },
            updateWms() {
                console.log('------')
                var mapConfig = this.mapConfig
                var wmsHelper = new WmsHelper()
                wmsHelper.initMapConfig(mapConfig)
                var wmsLayersMap = wmsHelper.getWmsLayersMap()
                //var filterURL = wmsHelper.getFilterURL()
                console.log(wmsLayersMap)
                for (var k in wmsLayersMap) {
                    var layers = wmsLayersMap[k]
                    var tileLayer = this.serviceLayerHelper.getTileLayer(k)
                    if (tileLayer) {
                        tileLayer.setParams({layers: layers.join(',')}, false)
                        tileLayer.setUrl(tileLayer.config.url,false)
                    }
                }
            }
        },
        watch: {
            serviceLayerHelper(newVal) {
                if (newVal != null) {
                    this.updateServiceLayerList();
                }
            },
        },
export default {
  name: "LcServiceLayer",
  components: {},
  data() {
    return {
      selectedLineLayer: [], // 选中的管线图层
      selectedSubsidiaryLayer: [], // 选中的附属要素
      serviceTileLayerList: [], // Tile图层列表
      serviceWmtsLayerList: [], // Wmts图层列表
      serviceWmsLayerList: [] // 图层列表
    };
  },
  computed: {
    serviceLayerHelper() {
      return this.$store.state.map.serviceLayerHelper
    },
    mapConfig() {
      return this.$store.state.map.mapConfig
    }
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods: {
    swAllLayers(item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      for (let i = 0, len = item.layers.length; i < len; ++i) {
        item.layers[i].checked = item.checked
      }
      this.updateWms()

      console.log(this.mapConfig)
    },
    swTileLayer() {
      console.log('该TILE方法未实现！')
    },
    swWmtsLayer() {
      console.log('该WMTS方法未实现！')
    },
    swWmsLayer(itm) {
      console.log('22222222')
      itm.checked = !itm.checked
      this.updateWms()
    },
    swFilter(item) {
      this.$store.commit('setSelectedServiceLayer', item.code)
      this.$store.commit('toggleServiceLayerFilter')
    },
    updateServiceLayerList() {
      // eslint-disable-next-line no-debugger
      // debugger
      let tileCfg = this.serviceLayerHelper.getTileLayers()
      this.serviceTileLayerList = []
      for (let i = 0, len = tileCfg.length; i < len; ++i) {
        if (tileCfg[i].config.inLegend) {
          console.log(tileCfg[i])
        }
      }
      let wmtsCfg = this.serviceLayerHelper.getWmtsLayers()
      this.serviceWmtsLayerList = []
      for (let i = 0, len = wmtsCfg.length; i < len; ++i) {
        if (wmtsCfg[i].config.inLegend) {
          console.log(wmtsCfg[i])
        }
      }
      let wmsCfg = this.serviceLayerHelper.getWmsLayers()
      this.serviceWmsLayerList = []
      for (let i = 0, len = wmsCfg.length; i < len; ++i) {
        if (wmsCfg[i].config.inLegend) {
          this.serviceWmsLayerList.push(wmsCfg[i].config)
        }
      }
    },
    updateWms() {
      console.log('------')
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      //var filterURL = wmsHelper.getFilterURL()
      console.log(wmsLayersMap)
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({layers: layers.join(',')}, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  },
  watch: {
    serviceLayerHelper(newVal) {
      if (newVal != null) {
        this.updateServiceLayerList();
      }
    },
  },
};
</script>

<style scoped lang="less">
    .inner-panel {
.inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn-filter {
    cursor: pointer;
  }

  .wms-panel {
    display: flex;
    flex-flow: column;

    .layerbox {
      width: 100%;
      display: flex;
      flex-flow: column;

      .layerbox-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        margin-left: 15px;
        margin-top: 5px;

        .btn-filter {
            cursor: pointer;
        .basemap-layer-item {
          width: 50%;
        }

        .wms-panel {
            display: flex;
            flex-flow: column;

            .layerbox {
                width: 100%;
                display: flex;
                flex-flow: column;

                .layerbox-item {
                    display: flex;
                    flex-flow: row wrap;
                    margin-left: 15px;
                    margin-top: 5px;

                    .basemap-layer-item {
                        width: 50%;
                    }
                }
            }
        }
      }
    }
  }
}

</style>

 src/components/helpers/BasemapHelper.js

@@ -1,16 +1,17 @@
/* eslint-disable no-debugger */
import AjaxUtils from '@/utils/AjaxUtils'

/**
 * 底图管理助手，负责底图创建及开关
 */
class BasemapHelper{
    constructor(options) {
        this.map = options.map
        this.L = options.L
        this.basemapList = []
        this.basemapMap = new Map()
        this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
    }
class BasemapHelper {
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
  }

    /**
     * 该方法负责各种底图加载到地图上
@@ -18,13 +19,13 @@
     * @param defBasemapName 初始化完成后，默认显示的图层
     */
    initBasemap = (mapConfig, isIntranet) => {
        if(isIntranet) { // 内网
            this._getToken(mapConfig); // 获取token后，并按配置加载地图
        }else { // 外网
            this._createBasemapByConfig(mapConfig)
        }
      if (isIntranet) { // 内网
        this._getToken(mapConfig) // 获取token后，并按配置加载地图
      } else { // 外网
        this._createBasemapByConfig(mapConfig)
      }

        return this.basemapMap
      return this.basemapMap
    }

    /**
@@ -32,7 +33,7 @@
     * @returns {null} 结构：[{名称, 图层引用}]
     */
    getBasemapList = () => {
        return this.basemapList
      return this.basemapList
    }

    /**
@@ -41,7 +42,7 @@
     * @param code 名称
     */
    getBasemap = (map, code) => {
        return this.basemapMap.get(code)
      return this.basemapMap.get(code)
    }

    /**
@@ -50,15 +51,15 @@
     * @param isHideOthers 是否先关闭其他图层，默认是true
     */
    showBasemap = (code, isHideOthers = true) => {
        let basemap = this.basemapMap.get(code)
        if(isHideOthers) {
            for(let i = 0, len = this.basemapList.length; i < len; ++i){
                this.map.removeLayer(this.basemapList[i].layer)
                this.map.removeLayer(this.basemapList[i].annotation)
            }
      const basemap = this.basemapMap.get(code)
      if (isHideOthers) {
        for (let i = 0, len = this.basemapList.length; i < len; ++i) {
          this.map.removeLayer(this.basemapList[i].layer)
          this.map.removeLayer(this.basemapList[i].annotation)
        }
        this.map.addLayer(basemap.layer)
        this.map.addLayer(basemap.annotation)
      }
      this.map.addLayer(basemap.layer)
      this.map.addLayer(basemap.annotation)
    }

    /**
@@ -66,68 +67,68 @@
     * @param layer 待关闭图层引用
     */
    hideBasemap = (code) => {
        let basemap = this.basemapMap.get(code)
        this.map.removeLayer(basemap.layer)
        this.map.removeLayer(basemap.annotation)
      const basemap = this.basemapMap.get(code)
      this.map.removeLayer(basemap.layer)
      this.map.removeLayer(basemap.annotation)
    }

    // 公网创建地图部分
    _createBasemapByConfig(mapConfig){
        let internetBasemaps = mapConfig.mapConfig.InternetBaseMaps
        for(let i = 0, len = internetBasemaps.length; i < len; ++i) {
            let basemapConfig = internetBasemaps[i]
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)
    _createBasemapByConfig (mapConfig) {
      const internetBasemaps = mapConfig.mapConfig.InternetBaseMaps
      for (let i = 0, len = internetBasemaps.length; i < len; ++i) {
        const basemapConfig = internetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                conf: basemapConfig,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }
         
            this.basemapList.push(basemap);
            this.basemapMap.set(basemapConfig.code, basemap)
            if(typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
                this.basemapLayerGroup.addLayer(basemapLayer)
                this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
            }
        const basemap = {
          code: basemapConfig.code,
          name: basemapConfig.name,
          conf: basemapConfig,
          layer: basemapLayer,
          annotation: basemapAnnotationLayer
        }

        this.basemapList.push(basemap)
        this.basemapMap.set(basemapConfig.code, basemap)
        if (typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
          this.basemapLayerGroup.addLayer(basemapLayer)
          this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
        }
      }
    }

    // 内网地图创建部分
    // 获取内网地图token，并加载到地图中
    _getToken = (mapConfig) => {
        let params = mapConfig.TokenConfig
        AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
            this._showTDT(token, mapConfig)
        })
      const params = mapConfig.TokenConfig
      AjaxUtils.GetDataAsynByUrl(params.url, params.option, (token) => {
        this._showTDT(token, mapConfig)
      })
    }

    // 内网地图加载，并加载到地图
    _showTDT = (token, mapConfig) => {
        let intranetBasemaps = mapConfig.mapConfig.IntranetBaseMaps
        for(let i = 0, len = intranetBasemaps.length; i < len; ++i) {
            let basemapConfig = intranetBasemaps[i]
            let basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
            let basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)
      const intranetBasemaps = mapConfig.mapConfig.IntranetBaseMaps
      for (let i = 0, len = intranetBasemaps.length; i < len; ++i) {
        const basemapConfig = intranetBasemaps[i]
        const basemapLayer = this.L.tileLayer(basemapConfig.map.url, basemapConfig.map.option)
        const basemapAnnotationLayer = this.L.tileLayer(basemapConfig.annotation.url, basemapConfig.annotation.option)

            let basemap = {
                code: basemapConfig.code,
                name: basemapConfig.name,
                conf: basemapConfig,
                layer: basemapLayer,
                annotation: basemapAnnotationLayer
            }
         
            this.basemapList.push(basemap);
            this.basemapMap.set(basemapConfig.code, basemap)
            if(typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
                this.basemapLayerGroup.addLayer(basemapLayer)
                this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
            }
        const basemap = {
          code: basemapConfig.code,
          name: basemapConfig.name,
          conf: basemapConfig,
          layer: basemapLayer,
          annotation: basemapAnnotationLayer
        }

        this.basemapList.push(basemap)
        this.basemapMap.set(basemapConfig.code, basemap)
        if (typeof basemapConfig.isAddToMap !== 'undefined' && basemapConfig.isAddToMap) {
          this.basemapLayerGroup.addLayer(basemapLayer)
          this.basemapLayerGroup.addLayer(basemapAnnotationLayer)
        }
      }
    }
}


 src/components/helpers/ServiceLayerHelper.js

@@ -5,159 +5,159 @@
import L from 'leaflet'

class ServiceLayerHelper {
    constructor(options) {
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersWMSArray = []
        this.tileLayersWMTSArray = []
        this.tileLayersTileArray = []
        this.mapConfig = {}
    }
  constructor (options) {
    this.map = options.map
    this.L = options.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.mapConfig = {}
  }

    getTileLayer(code) {
        return this.tileLayersMap.get(code)
    }
  getTileLayer (code) {
    return this.tileLayersMap.get(code)
  }

    /**
  /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig) {
        this.mapConfig = mapConfig
        this._loadLayers(mapConfig)
    }
  initServiceLayers (mapConfig) {
    this.mapConfig = mapConfig
    this._loadLayers(mapConfig)
  }

    /**
  /**
     * 按配置文件加载三种不同类型的
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
    _loadLayers(mapConfig, isAddToMap = true) {
        console.debug('ServiceLayerHelper加载参数：', mapConfig)
        for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = mapConfig.mapConfig.ServiceLayers[i]
            if (opt.type === 'wmts') {
                this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            } else if (opt.type === 'wms') {
                this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            } else if (opt.type === 'tile') {
                this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }
        }
  _loadLayers (mapConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', mapConfig)
    for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
      const opt = mapConfig.mapConfig.ServiceLayers[i]
      if (opt.type === 'wmts') {
        this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      }
    }
  }

    /**
  /**
     * 往地图中加入一个WMTS服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadWmtsLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer(options.url, options.option);
        layer.config = config
  loadWmtsLayer (options, isAddToMap = true, config) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = config

        if (isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMTSArray.push(layer)
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMTSArray.push(layer)
  }

    /**
  /**
     * 往地图中加入一个WMS服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadWmsLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer.wms(options.url, options.option);
        layer.config = config
  loadWmsLayer (options, isAddToMap = true, config) {
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = config

        if (isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMSArray.push(layer)
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMSArray.push(layer)
  }

    /**
  /**
     * 往地图中加入一个TILE服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadTileLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs: options.crs || L.CRS.EPSG4326,
            maxZoom: options.maxZoom || 21,
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
        layer.config = config
  loadTileLayer (options, isAddToMap = true, config) {
    const layer = this.L.tileLayer(options.url, {
      layers: options.layers || 'all', // country
      format: options.format || 'image/png',
      transparent: options.true || true,
      crs: options.crs || L.CRS.EPSG4326,
      maxZoom: options.maxZoom || 21,
      minZoom: options.minZoom || 1,
      zoomOffset: options.zoomOffset || 0
    })
    layer.config = config

        if (isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersTileArray.push(layer)
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersTileArray.push(layer)
  }

    /**
  /**
     * 隐藏服务图层
     * @param {*} name
     */
    hideTileLayer(code) {
        if (this.tileLayersMap) {
            let tileLayer = this.tileLayersMap.get(code)
            this.map.removeLayer(tileLayer)
        }
  hideTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
      this.map.removeLayer(tileLayer)
    }
  }

    /**
  /**
     * 展示服务图层
     * @param {*} name
     */
    showTileLayer(code) {
        if (this.tileLayersMap) {
            let tileLayer = this.tileLayersMap.get(code)
            this.map.addLayer(tileLayer)
        }
  showTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
      this.map.addLayer(tileLayer)
    }
  }

    /**
  /**
     * 获取所有的TILE服务图层
     */
    getTileLayers() {
        return this.tileLayersTileArray
    }
  getTileLayers () {
    return this.tileLayersTileArray
  }

    /**
  /**
     * 获取所有的WMTS服务图层
     */
    getWmtsLayers() {
        return this.tileLayersWMTSArray
    }
  getWmtsLayers () {
    return this.tileLayersWMTSArray
  }

    /**
  /**
     * 获取所有的WMS服务图层
     */
    getWmsLayers() {
        return this.tileLayersWMSArray
    }
  getWmsLayers () {
    return this.tileLayersWMSArray
  }

    /**
  /**
     * 通过code查找WMS的服务配置
     * @param {} code wms服务配置的code
     */
    getWMSConfig(code) {
        let mc = this.mapConfig
        for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
            if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
                return mc.mapConfig.ServiceLayers[i]
            }
        }
        return null
  getWMSConfig (code) {
    const mc = this.mapConfig
    for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
      if (code == mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }
    return null
  }
}

export default ServiceLayerHelper

 src/components/helpers/VectorLayerHelper.js

@@ -1,56 +1,56 @@
/**
 * 业务相关矢量图管理助手，负责业务相关矢量图创建及开关
 */
function VectorLayerHelper(options) {
    this.map = options.map
    this.L = options.L
    this.vectorLayerMap = new Map()
    this.vectorLayerList = []
    this.vectorLayerGroup = null
    this.vueState = {} // 用户图层权限
    /**
function VectorLayerHelper (options) {
  this.map = options.map
  this.L = options.L
  this.vectorLayerMap = new Map()
  this.vectorLayerList = []
  this.vectorLayerGroup = null
  this.vueState = {} // 用户图层权限
  /**
     * 该方法负责各种底图加载到地图上
     * 不同页面加载图层不同根据模块类型选择加载不同图层
     * @param map
     */
    this.initVectorLayers = (vueState) => {
        this.vectorLayerGroup = options.L.layerGroup().addTo(options.map)
        this.vueState = vueState
    }
  this.initVectorLayers = (vueState) => {
    this.vectorLayerGroup = options.L.layerGroup().addTo(options.map)
    this.vueState = vueState
  }

    /**
  /**
     * 获取所有的图层列表
     * @returns {null} 结构：[{名称, 图层引用}]
     */
    this.getVectorLayerList = () => {
        return this.vectorLayerList
    }
  this.getVectorLayerList = () => {
    return this.vectorLayerList
  }

    /**
  /**
     * 通过名称获取图层对象
     * @param name 名称
     */
    this.getVectorLayer = (code) => {
        return this.vectorLayerMap[code]
    }
  this.getVectorLayer = (code) => {
    return this.vectorLayerMap[code]
  }

    /**
  /**
     * 显示某个图层
     * @param name  图层名称
     */
    this.showVectorLayer = (code) => {
        let layer = this.vectorLayerMap.get(code)
        this.map.addLayer(layer)
    }
  this.showVectorLayer = (code) => {
    const layer = this.vectorLayerMap.get(code)
    this.map.addLayer(layer)
  }

    /**
  /**
     * 隐藏某个图层
     * @param name  图层名称
     */
    this.hideVectorLayer = (code) => {
        let layer = this.vectorLayerMap.get(code)
        this.map.removeLayer(layer)
    }
  this.hideVectorLayer = (code) => {
    const layer = this.vectorLayerMap.get(code)
    this.map.removeLayer(layer)
  }
}

export default VectorLayerHelper

 src/components/helpers/WmsHelper.js

@@ -1,77 +1,77 @@
/**
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
function WmsHelper() {
    this.filters = {}
    this.wmsLayersMap = {}
function WmsHelper () {
  this.filters = {}
  this.wmsLayersMap = {}

    this.initMapConfig = (mapConfig) => {
        var serviceLayers = mapConfig.mapConfig.ServiceLayers
        for (var i = 0; i < serviceLayers.length; i++) {
            var service = serviceLayers[i]
            var checked = service.checked
            if (!checked) {
                break
            }
            var filtersGroup = service.filtersGroup
            if (filtersGroup) {
                this.initLayer(service.code, filtersGroup)
            }
        }
  this.initMapConfig = (mapConfig) => {
    var serviceLayers = mapConfig.mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var service = serviceLayers[i]
      var checked = service.checked
      if (!checked) {
        break
      }
      var filtersGroup = service.filtersGroup
      if (filtersGroup) {
        this.initLayer(service.code, filtersGroup)
      }
    }
    this.initLayer = (wms, layersGroup) => {
        for (var i = 0; i < layersGroup.length; i++) {
            var filters = layersGroup[i].filters
            for (var j = 0; j < filters.length; j++) {
                var layer = filters[j]
                var checked = layer.checked
                var code = layer.code
                if (checked) {
                    this.addLayer(wms, code)
                }
            }
  }
  this.initLayer = (wms, layersGroup) => {
    for (var i = 0; i < layersGroup.length; i++) {
      var filters = layersGroup[i].filters
      for (var j = 0; j < filters.length; j++) {
        var layer = filters[j]
        var checked = layer.checked
        var code = layer.code
        if (checked) {
          this.addLayer(wms, code)
        }
      }
    }
    this.initFilter = () => {
        /* for (var i = 0; i < filters.length; i++) {
  }
  this.initFilter = () => {
    /* for (var i = 0; i < filters.length; i++) {
             var filter = filters[i]
             this.addFilter()
         }*/
         } */
  }
  this.addLayer = (wms, layer) => {
    var wmsLayer = this.wmsLayersMap[wms]
    if (wmsLayer) {
      wmsLayer[wmsLayer.length] = layer
    } else {
      this.wmsLayersMap[wms] = [layer]
    }
    this.addLayer = (wms, layer) => {
        var wmsLayer = this.wmsLayersMap[wms]
        if (wmsLayer) {
            wmsLayer[wmsLayer.length] = layer
        } else {
            this.wmsLayersMap[wms] = [layer]
  }
  this.addFilter = (condition) => {
    // var filter = this.filters[layer]
    // if (filter) {
    this.filters[this.filters.length] = condition
    // } else {
    //    this.filters[layer] = [condition]
    // }
  }
  this.getWmsLayersMap = () => {
    return this.wmsLayersMap
  }
  this.getFilterURL = () => {
    var filterURL = ''
    var conditions = ''
    for (var f in this.filters) {
      var filters = this.filters[f]
      for (var i = 0; i < filters.length; i++) {
        conditions += filters[i]
        if (i < filters.length) {
          conditions += ','
        }
      }
      filterURL += f + '.(' + conditions + ');'
    }
    this.addFilter = (condition) => {
        //var filter = this.filters[layer]
        //if (filter) {
        this.filters[this.filters.length] = condition
        //} else {
        //    this.filters[layer] = [condition]
        // }
    }
    this.getWmsLayersMap = () => {
        return this.wmsLayersMap
    }
    this.getFilterURL = () => {
        var filterURL = ''
        var conditions = ''
        for (var f in this.filters) {
            var filters = this.filters[f]
            for (var i = 0; i < filters.length; i++) {
                conditions += filters[i]
                if (i < filters.length) {
                    conditions += ','
                }
            }
            filterURL += f + '.(' + conditions + ');'
        }
        return filterURL.substr(0, filterURL.length - 1)
    }
    return filterURL.substr(0, filterURL.length - 1)
  }
}

export default WmsHelper

 src/components/mapmodules/CommonLayerLoad.js

@@ -4,71 +4,80 @@
import L from 'leaflet'

import MapConfig from '@/conf/MapConfig'

const tokenStr = 'tk=' + 'f1b72b5e7cb1175acddfa485f1bc9770' + '&'

class CommonLayerLoad {
    // 中国蓝色覆盖层
    loadBlueMap() {
        return L.tileLayer(MapConfig.BLUEMAP_HOST + '/server/ogcserver/whp_basemap_tile/wmts?x={x}&y={y}&z={z}', {
            maxZoom: 7,
            minZoom: 1,
            zoomOffset: 1
  // 中国蓝色覆盖层
  loadBlueMap () {
    return L.tileLayer(MapConfig.BLUEMAP_HOST + '/server/ogcserver/whp_basemap_tile/wmts?x={x}&y={y}&z={z}', {
      maxZoom: 7,
      minZoom: 1,
      zoomOffset: 1

        })
    }
    // 道路路
    loadNormalMap() {
        return L.tileLayer('http://t0.tianditu.gov.cn/vec_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
    // 道路标注
    loadNormalMapa() {
        return L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
    })
  }

        })
    }
    // 影像图
    loadImgMapm() {
        return L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?' + tokenStr +
  // 道路路
  loadNormalMap () {
    return L.tileLayer('http://t0.tianditu.gov.cn/vec_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1
    })
  }

  // 道路标注
  loadNormalMapa () {
    return L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1

    })
  }

  // 影像图
  loadImgMapm () {
    return L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?' + tokenStr +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
    // 影像标注
    loadImgMapa() {
        return L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?' + tokenStr +
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1
    })
  }

  // 影像标注
  loadImgMapa () {
    return L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?' + tokenStr +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
    // 中石化内网影像图
    loadIntranetImgMap(token) {
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-image-globe/WMTS?token=' + token + '&' +
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1
    })
  }

  // 中石化内网影像图
  loadIntranetImgMap (token) {
    return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-image-globe/WMTS?token=' + token + '&' +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
    // 中石化内网影像图标注
    loadIntranetImgMapCia(token) {
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-image/WMTS?token=' + token + '&' +
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1
    })
  }

  // 中石化内网影像图标注
  loadIntranetImgMapCia (token) {
    return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-image/WMTS?token=' + token + '&' +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 1,
            zoomOffset: 1
        })
    }
      maxZoom: 18,
      minZoom: 1,
      zoomOffset: 1
    })
  }
}

export default CommonLayerLoad

 src/components/mapmodules/SafetyIndexBar.js

@@ -1,120 +1,122 @@
import echarts from 'echarts'

function drawSafetyBar(carDataArray, shipDataArray, plateDataArray) {
    let myChart = echarts.init(document.getElementById('safetyBarIndex'))
    myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: '#33FF90'
            },
            extraCssText: 'background-color: rgba(73,177,231, 0.1);'
function drawSafetyBar (carDataArray, shipDataArray, plateDataArray) {
  const myChart = echarts.init(document.getElementById('safetyBarIndex'))
  myChart.setOption({
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        color: '#33FF90'
      },
      extraCssText: 'background-color: rgba(73,177,231, 0.1);'
    },
    legend: {
      data: ['船舶', '车辆'],
      top: '6%',
      right: '4%',
      textStyle: {
        color: '#33FFF8'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: plateDataArray,
        axisTick: {
          alignWithLabel: true
        },
        legend: {
            data: ['船舶', '车辆'],
            top: '6%',
            right: '4%',
            textStyle: {
                color: '#33FFF8'
            }
        axisLabel: {
          color: '#33FFF8'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#33FFF8'
        },
        xAxis: [
            {
                type: 'category',
                data: plateDataArray,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#33FFF8'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: [ '#315070' ],
                        width: 1,
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [
            {
                name: '船舶',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(88,228,239)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        barBorderRadius: [15, 15, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#00ACFE' },
                            { offset: 0.5, color: '#034B88' },
                            { offset: 1, color: '#051A4C' }
                        ])
                    }
                },
                data: shipDataArray
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#315070'],
            width: 1,
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: '船舶',
        type: 'bar',
        barWidth: '12%',
        color: 'rgb(88,228,239)',
        itemStyle: {
          normal: {
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: '#ffffff',
                fontSize: 12
              }
            },
            {
                name: '车辆',
                type: 'bar',
                barWidth: '12%',
                color: 'rgb(73,117,231)',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, // 开启显示
                            position: 'top', // 在上方显示
                            textStyle: { // 数值样式
                                color: '#ffffff',
                                fontSize: 12
                            }
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#FED700' },
                            { offset: 0.5, color: '#846B03' },
                            { offset: 1, color: '#423105' }
                        ]),
                        barBorderRadius: [ 15, 15, 0, 0 ]
                    }
                },
                data: carDataArray
            }
        ]
    })
    window.addEventListener('resize', () => { myChart.resize() })
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00ACFE' },
              { offset: 0.5, color: '#034B88' },
              { offset: 1, color: '#051A4C' }
            ])
          }
        },
        data: shipDataArray
      },
      {
        name: '车辆',
        type: 'bar',
        barWidth: '12%',
        color: 'rgb(73,117,231)',
        itemStyle: {
          normal: {
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: { // 数值样式
                color: '#ffffff',
                fontSize: 12
              }
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FED700' },
              { offset: 0.5, color: '#846B03' },
              { offset: 1, color: '#423105' }
            ]),
            barBorderRadius: [15, 15, 0, 0]
          }
        },
        data: carDataArray
      }
    ]
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

export default {
    drawSafetyBar
  drawSafetyBar
}

 src/components/mapmodules/SafetyIndexLine.js

@@ -1,107 +1,109 @@
import echarts from 'echarts'
import dayjs from 'dayjs'

function drawSafetyLine() {
    let myChart = echarts.init(document.getElementById('safetyIndex'))
    let yyyy = dayjs().format('YYYY') + '-'
    let resDate = ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16']
    let resValue = [35, 20, 10, 20, 40, 30, 10]
    let safetyStandardValue = 20
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            formatter: '<span style="text-align: center;display:block; color: #33FF90">' + yyyy + '{b0}</span>' +
function drawSafetyLine () {
  const myChart = echarts.init(document.getElementById('safetyIndex'))
  const yyyy = dayjs().format('YYYY') + '-'
  const resDate = ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16']
  const resValue = [35, 20, 10, 20, 40, 30, 10]
  const safetyStandardValue = 20
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      formatter: '<span style="text-align: center;display:block; color: #33FF90">' + yyyy + '{b0}</span>' +
                '<span style="color: #33FF90">{a0}：{c0}</span><br/>' +
                '<span style="color: #33FF90">安全标准指数：' + safetyStandardValue + '</span>', // 自定义tip格式
            backgroundColor: 'rgba(73,177,231, 0.1)',
            axisPointer: {
                lineStyle: {
                    color: 'rgba(73,177,231, 0.5)',
                    type: 'dashed'
                }
      backgroundColor: 'rgba(73,177,231, 0.1)',
      axisPointer: {
        lineStyle: {
          color: 'rgba(73,177,231, 0.5)',
          type: 'dashed'
        }
      }
    },
    grid: {
      left: '4%',
      right: '10%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: resDate,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#33FFF8'
        }
      },
      axisTick: { // x轴刻度线
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dotted', // 设置网格线类型 dotted:虚线 solid:实线
          color: 'rgb(73,177,231, 0.3)'
        },
        show: true
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#33FFF8'
        }
      },
      axisTick: { // y轴刻度线
        show: false
      },
      nameTextStyle: {
        lineHeight: 20
      }
    },
    series: [
      {
        name: '安全指数',
        type: 'line',
        data: resValue,
        itemStyle: {
          normal: {
            lineStyle: {
              color: 'rgb(233,209,74)',
              width: 2 // 设置线条粗细
            }
          }
        },
        grid: {
            left: '4%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: resDate,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#33FFF8'
                }
            },
            axisTick: { // x轴刻度线
                show: false
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dotted', // 设置网格线类型 dotted:虚线 solid:实线
                    color: 'rgb(73,177,231, 0.3)'
                },
                show: true
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#33FFF8'
                }
            },
            axisTick: { // y轴刻度线
                show: false
            },
            nameTextStyle: {
                lineHeight: 20
            }
        },
        series: [
        markLine: {
          symbol: 'none', // 去掉标准线箭头
          data: [
            {
                name: '安全指数',
                type: 'line',
                data: resValue,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(233,209,74)',
                            width: 2 // 设置线条粗细
                        }
                    }
                },
                markLine: {
                    symbol: 'none', // 去掉标准线箭头
                    data: [
                        {
                            label: {
                                normal: {
                                    position: 'end',
                                    formatter: ''
                                }
                            },
                            name: '标准值',
                            yAxis: 20,
                            lineStyle: {
                                type: 'solid',
                                color: '#33FFF8',
                                width: 1
                            }
                        }
                    ]
              label: {
                normal: {
                  position: 'end',
                  formatter: ''
                }
              },
              name: '标准值',
              yAxis: 20,
              lineStyle: {
                type: 'solid',
                color: '#33FFF8',
                width: 1
              }
            }
        ]
    })
    window.addEventListener('resize', () => { myChart.resize() })
          ]
        }
      }
    ]
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

export default {
    drawSafetyLine
  drawSafetyLine
}

 src/components/mapmodules/SafetyIndexPie.js

@@ -1,42 +1,45 @@
import echarts from 'echarts'

function drawSafetyPie(options) {
    let id = options.id
    // var title = options.title
    let series = options.series
    let legend = getLegend(series)
    series = setSeriesLabel(series)
    let myChart = echarts.init(document.getElementById(id))
    console.log(series)
    console.log(legend)
    // 指定图表的配置项和数据
    myChart.setOption({
        series: series
    })
    window.addEventListener('resize', () => { myChart.resize() })
function drawSafetyPie (options) {
  const id = options.id
  // var title = options.title
  let series = options.series
  const legend = getLegend(series)
  series = setSeriesLabel(series)
  const myChart = echarts.init(document.getElementById(id))
  console.log(series)
  console.log(legend)
  // 指定图表的配置项和数据
  myChart.setOption({
    series: series
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

function setSeriesLabel(series) {
    for (var i = 0; i < series.length; i++) {
        series[i]['label'] = {
            position: 'inside',
            formatter: '{d}%',
            color: '#090607'
        }
function setSeriesLabel (series) {
  for (var i = 0; i < series.length; i++) {
    series[i].label = {
      position: 'inside',
      formatter: '{d}%',
      color: '#090607'
    }
    return series
  }
  return series
}

function getLegend(series) {
    var legend = []
    for (var i = 0; i < series.length; i++) {
        var datas = series[i].data
        for (var j = 0; j < datas.length; j++) {
            legend[legend.length] = datas[j].name
        }
function getLegend (series) {
  var legend = []
  for (var i = 0; i < series.length; i++) {
    var datas = series[i].data
    for (var j = 0; j < datas.length; j++) {
      legend[legend.length] = datas[j].name
    }
    return legend
  }
  return legend
}

export default {
    drawSafetyPie
  drawSafetyPie
}

 src/components/panel/MonitorHZ.vue

@@ -1,154 +1,154 @@
<template>
    <div class="monitorHz">
        <el-card class="search-panel" style="background: #07325b;">
            <el-form ref="form" :model="form" label-width="80px" class="search-form">
                <el-form-item label="载具号：">
                    <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-row>
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="form.name"
                                        type="date"
                                        style="width: 118px;"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item>
                                <el-date-picker
                                        v-model="form.name"
                                        type="date"
                                        style="width: 118px;"
                                        placeholder="选择日期"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                    </el-col>
                    <el-col :span="2">
                        <div class="B-TMD-inp-button" @click="handleSearch"></div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="search-result" style="height:360px;">
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
                <el-row :gutter="20">
                    <el-col :span="2" style="padding-left: 15px">
                        {{ index+1 }}、
                    </el-col>
                    <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        {{ item.processorName }}
                        <br/>
                        {{ item.startAddress }}
                    </el-col>
                    <el-col :span="6">
                        <a class="el-icon-location" style="font-size: 18px;margin-left:5px"
                           @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a>
                        <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    :current-page.sync="currentPage1"
                    @current-change="handleSearch"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="1000"
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
  <div class="monitorHz">
    <el-card class="search-panel" style="background: #07325b;">
      <el-form ref="form" :model="form" label-width="80px" class="search-form">
        <el-form-item label="载具号：">
          <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-row>
              <el-form-item label="时间：">
                <el-date-picker
                    v-model="form.name"
                    type="date"
                    style="width: 118px;"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item>
                <el-date-picker
                    v-model="form.name"
                    type="date"
                    style="width: 118px;"
                    placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="2">
            <div class="B-TMD-inp-button" @click="handleSearch"></div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="search-result" style="height:360px;">
      <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
        <el-row :gutter="20">
          <el-col :span="2" style="padding-left: 15px">
            {{ index + 1 }}、
          </el-col>
          <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            {{ item.processorName }}
            <br/>
            {{ item.startAddress }}
          </el-col>
          <el-col :span="6">
            <a class="el-icon-location" style="font-size: 18px;margin-left:5px"
               @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a>
            <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
          small
          :current-page.sync="currentPage1"
          @current-change="handleSearch"
          :page-size="10"
          layout="prev, pager, next"
          :total="1000"
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: 'MonitorAreaTips',
        components: {},
        data() {
            return {
                isPanelVisible: false,
                total: 0,
                list: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            handleClose(done) {
                console.log(done)
            },
            handleClick(tab, event) {
                console.log(tab, event)
            },
            handleSearch() {

            }
        },
        mounted() {
            this.handleSearch()
        }
export default {
  name: 'MonitorAreaTips',
  components: {},
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="less">
    .monitorHz {
        .el-message-box__content {
            background-color: #030D2E;
        }
.monitorHz {
  .el-message-box__content {
    background-color: #030D2E;
  }

        .search-form .el-form-item {
            margin: 0px;
        }
  .search-form .el-form-item {
    margin: 0px;
  }

        .search-form .el-icon-search {
            display: grid;
            line-height: 30px;
            font-size: 18px;
        }
  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }

        .search-panel {
            border: #07325B;
            background-color: #07325B;
        }
  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }

        .search-result {
            margin: 5px 0px 0px 0px;
            padding: 0px;
            border: #051842;
            overflow-y: scroll;
            background-color: #051842;
        }
  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }

        .B-TMD-table-list {
            margin-top: 10px;
            text-align: left;
            padding-left: 10px;
            color: #328EB5;
            width: 100%;
            line-height: 25px;
            background-color: #0B3B6D;
        }
  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    color: #328EB5;
    width: 100%;
    line-height: 25px;
    background-color: #0B3B6D;
  }

        .footer-page {
            position: absolute;
            bottom: 5px;
        }
    }
  .footer-page {
    position: absolute;
    bottom: 5px;
  }
}
</style>

 src/components/panel/MonitorPanel.vue

@@ -129,12 +129,12 @@
import $ from 'jquery'
import MonitorHZ from './MonitorHZ'
import mapApi from '@/api/mapApi'
import {mapState} from 'vuex'
import { mapState } from 'vuex'

export default {
  name: 'MonitorPanel',
  components: {MonitorHZ},
  data() {
  components: { MonitorHZ },
  data () {
    return {
      isPanelVisible: false,
      wayBillVisible: true,
@@ -153,19 +153,19 @@
      attachOptions: [{
        value: '1',
        label: '阀门'
      },{
      }, {
        value: '2',
        label: '管廊'
      },{
      }, {
        value: '3',
        label: '管架'
      },{
      }, {
        value: '4',
        label: '三通'
      },{
      }, {
        value: '5',
        label: '四通'
      },{
      }, {
        value: '6',
        label: '弯头'
      }],
@@ -217,13 +217,13 @@
      currentCorpType: state => state.currentCorpType,
      currentCorp: state => state.currentCorp
    }),
    layerHelper() {
    layerHelper () {
      return this.$store.layerHelper
    }
  },
  watch: {
    currentCorpType: async function (val) {
      let params = {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
@@ -235,13 +235,13 @@
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    currentCorp: async function (val) {
      let params = {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
@@ -253,27 +253,27 @@
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    }
  },
  methods: {
    handleClose(done) {
    handleClose (done) {
      console.log(done)
    },
    handlePipelineType(item){
    handlePipelineType (item) {
      console.log(item)
      if(item === '2'){
      if (item === '2') {
        this.dataTypeOptions = this.attachOptions
      }else if(item === '1'){
      } else if (item === '1') {
        this.dataTypeOptions = this.pipelineOptions
      }
    },
    async handlePage(page) {
    async handlePage (page) {
      console.log(page)
      let params = {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
@@ -285,43 +285,43 @@
        size: this.pageSize,
        current: page
      }
      let datas = await this.handleGetDatas(params)
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    handleLocation(item) {
    handleLocation (item) {
      window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
    },
    toggleMonitorPanel() {
      let el = $('.btn-stretch')
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
      // let cs = 'btn-stretch-active'
      var rightControl = $('#right-panel')
      let right = rightControl.css('right')
      const right = rightControl.css('right')
      if (right === '10px') {
        rightControl.animate({
          right: '-290px'
        })
        el.css({
          'transform': 'rotateY(180deg)',
          transform: 'rotateY(180deg)',
          'transform-origin': '50% 50%',
          'transition': 'transform 1s linear'
          transition: 'transform 1s linear'
        })
      } else {
        rightControl.animate({
          right: '10px'
        })
        el.css({
          'transform': 'rotateY(0deg)',
          transform: 'rotateY(0deg)',
          'transform-origin': '50% 50%',
          'transition': 'transform 1s linear'
          transition: 'transform 1s linear'
        })
      }
    },
    async handleSearch() {
    async handleSearch () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      let params = {
      const params = {
        transNo: this.form.transNo,
        carrierName: this.form.carrierName,
        transMode: this.form.transMode,
@@ -332,15 +332,15 @@
        size: this.pageSize,
        current: this.current
      }
      let datas = await this.handleGetDatas(params)
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.pager.records
      // this.total = datas.data.pager.total
    },
    async handleInit() {
    async handleInit () {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      let params = {
      const params = {
        transNo: '',
        carrierName: '',
        transMode: '',
@@ -352,48 +352,48 @@
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      const datas = await this.handleGetDatas(params)
      console.log(datas)
      // this.list = datas.data.records
      // this.total = datas.data.total
    },
    async handleSetOrgCodeStrings() {
      let orgCodes = await this.handleGetOrgCode()
    async handleSetOrgCodeStrings () {
      const orgCodes = await this.handleGetOrgCode()
      let orgCodesString = ''
      for (let i = 0; i < orgCodes.data.length; i++) {
        let org = orgCodes.data[i]
        const org = orgCodes.data[i]
        orgCodesString += org.orgCode + ','
      }
      this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
    },
    async handleGetOrgCode() {
      let params = {
    async handleGetOrgCode () {
      const params = {
        orgSector: this.currentCorpType,
        serviceType: ''
      }
      let datas = await mapApi.getOrganizationompanyList(params)
      const datas = await mapApi.getOrganizationompanyList(params)
      return datas
    },
    async handleGetDatas(params) {
    async handleGetDatas (params) {
      // let datas = await mapApi.getTransOrderlist(params)

      let datas = params
      const datas = params
      return datas
    },
    showHZ() {
    showHZ () {
      this.wayBillVisible = true
      this.hzVisible = false
      this.isWaybillHover = true
      this.isRouteHover = false
    },
    showWayBill() {
    showWayBill () {
      this.hzVisible = true
      this.wayBillVisible = false
      this.isWaybillHover = false
      this.isRouteHover = true
    }
  },
  mounted() {
  mounted () {
    this.handleInit()
  }
}
@@ -524,12 +524,12 @@
    width: 16px;
    height: 22px;
    display: block;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 -90px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat 0 -90px;
    cursor: pointer;
  }

  .B-TMD-table-list-title-y-car {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -45px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -45px 0;
    width: 38px;
    height: 38px;
    display: block;
@@ -537,7 +537,7 @@
  }

  .B-TMD-table-list-title-y-car-offline {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -90px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -90px 0;
    width: 38px;
    height: 38px;
    display: block;
@@ -545,7 +545,7 @@
  }

  .B-TMD-table-list-title-y-car-warning {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat 0 0;
    width: 38px;
    height: 38px;
    display: block;
@@ -555,7 +555,7 @@
  .btn-stretch {
    width: 20px;
    height: 28px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    margin-left: 10px;
    margin-top: 3px;
    cursor: pointer;
@@ -566,7 +566,7 @@
  }

  .btn-stretch-active {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
  }

  .panel-tab {
@@ -577,7 +577,7 @@
    width: 40px;
    z-index: 500;
    background-color: #030D2E;
    background: url('/assets/images/map-pages/icon/caidan.png') no-repeat;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
  }

  .B-TMT-tab-div {
@@ -598,7 +598,7 @@
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -320px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -320px 0;
  }

  .B-TMT-tab-route {
@@ -606,7 +606,7 @@
    height: 19px;
    margin-left: 5px;
    margin-top: 6px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -169px 0;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -169px 0;
  }

  .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
@@ -614,7 +614,7 @@
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important;
  }

  .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
@@ -622,7 +622,7 @@
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important;
  }

  .panel-tab ul {
@@ -640,7 +640,7 @@
    top: 0;
    right: 0;
    z-index: 999;
    background: url('/assets/images/map-pages/icon/bgc.png') no-repeat;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
  }

  .panel_searchTotal {
@@ -726,7 +726,7 @@
    color: #34e0ff;
    width: 100%;
    line-height: 25px;
    background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
    background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
  }

  .B-TMD-inp-button {

 src/components/utils/AjaxUtils.js

File was deleted

 src/components/utils/DateUtils.js

File was deleted

 src/components/utils/GISUtil.js

File was deleted

 src/components/utils/JsonUtils.js

File was deleted

 src/components/utils/MiscUtils.js

File was deleted

 src/components/utils/wfsQueryUtils.js

File was deleted

 src/conf/MapConfig.js

@@ -1,12 +1,12 @@
import * as L from 'leaflet'

let curWwwPath = window.document.location.href
let pathname = window.document.location.pathname
let pos = curWwwPath.indexOf(pathname)
let HOST_URL = curWwwPath.substring(0, pos)
const curWwwPath = window.document.location.href
const pathname = window.document.location.pathname
const pos = curWwwPath.indexOf(pathname)
const HOST_URL = curWwwPath.substring(0, pos)

// basemap主机配置
const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080'  // 内网天地图主机地址
const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080' // 内网天地图主机地址
const TIANDITU_GIS_HOST = 'http://t0.tianditu.gov.cn' // 公网天地图主机地址
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770

@@ -24,595 +24,595 @@
console.log(GEOM_POINT, GEOM_POLYLINE, GEOM_POLYGON)

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
    maxZoom: 18,
    center: [26, 104],
    zoom: 3,
    worldCopyJump: true,
    inertia: true,
    zoomControl: false,
    attributionControl: false,
    editable: true
  crs: L.CRS.EPSG4326,
  minZoom: 3,
  maxZoom: 18,
  center: [26, 104],
  zoom: 3,
  worldCopyJump: true,
  inertia: true,
  zoomControl: false,
  attributionControl: false,
  editable: true
}

const mapConfig = {
    IsLoadMapByToken: true, // 是否通过token加载地图
    showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
    IntranetBaseMaps: [
        {
            code: 'sinopec_img',
            name: '中石化天地图影像',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
                type: 'wmts',
                visible: false,
                layerType: 'img_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS?'+
                'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图影像标注',
                type: 'wmts',
                visible: false,
                layerType: 'cia_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS?'+
                'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
        },
        {
            code: 'sinopec_vec',
            name: '中石化天地图矢量',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
                type: 'wmts',
                visible: false,
                layerType: 'vec_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS?'+
                'layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图矢量标注',
                type: 'wmts',
                visible: false,
                layerType: 'cva_c',
                isLoadMapByToken: true,
                url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS?'+
                'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            }
  IsLoadMapByToken: true, // 是否通过token加载地图
  showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
  IntranetBaseMaps: [
    {
      code: 'sinopec_img',
      name: '中石化天地图影像',
      icon_actived: '/assets/images/map-pages/icon/img.png',
      icon_deactived: '/assets/images/map-pages/icon/img.png',
      isAddToMap: true,
      map: {
        layerName: '天地图影像地图',
        type: 'wmts',
        visible: false,
        layerType: 'img_c',
        isLoadMapByToken: true,
        url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-image-globe/WMTS?' +
                    'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
    ],
    InternetBaseMaps: [
        {
            code: 'tianditu_img',
            name: '天地图影像',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
                type: 'wmts',
                visible: false,
                layerType: 'img_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/img_c/wmts?layer=img&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图影像标注',
                type: 'wmts',
                visible: false,
                layerType: 'cia_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/cia_c/wmts?layer=cia&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
        },
        {
            code: 'tianditu_vec',
            name: '天地图影像',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
                type: 'wmts',
                visible: false,
                layerType: 'vec_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/vec_c/wmts?layer=vec&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            },
            annotation: {
                layerName: '天地图矢量标注',
                type: 'wmts',
                visible: false,
                layerType: 'cva_c',
                isLoadMapByToken: true,
                url: TIANDITU_GIS_HOST + '/cva_c/wmts?layer=cva&style=default&tilematrixset=c'+
                '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'+
                '&tk=' + TIANDITU_GIS_TOKEN,
                option:{
                    maxZoom: 18,
                    minZoom: 1,
                    zoomOffset: 1
                }
            }
      },
      annotation: {
        layerName: '天地图影像标注',
        type: 'wmts',
        visible: false,
        layerType: 'cia_c',
        isLoadMapByToken: true,
        url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-image/WMTS?' +
                    'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
    ],
    ArcBaseMaps: [
        {
            layerName: 'arcgis影像底图',
            type: 'tile',
            visible: true,
            layerType: 'cia_c',
            isLoadMapByToken: false,
            url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
      }
    },
    {
      code: 'sinopec_vec',
      name: '中石化天地图矢量',
      icon_actived: '/assets/images/map-pages/icon/road.png',
      icon_deactived: '/assets/images/map-pages/icon/road.png',
      isAddToMap: false,
      map: {
        layerName: '天地图矢量地图',
        type: 'wmts',
        visible: false,
        layerType: 'vec_c',
        isLoadMapByToken: true,
        url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-vector-globe/WMTS?' +
                    'layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
    ],
      },
      annotation: {
        layerName: '天地图矢量标注',
        type: 'wmts',
        visible: false,
        layerType: 'cva_c',
        isLoadMapByToken: true,
        url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-tdt-label-vector/WMTS?' +
                    'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}',
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
      }
    }
  ],
  InternetBaseMaps: [
    {
      code: 'tianditu_img',
      name: '天地图影像',
      icon_actived: '/assets/images/map-pages/icon/img.png',
      icon_deactived: '/assets/images/map-pages/icon/img.png',
      isAddToMap: true,
      map: {
        layerName: '天地图影像地图',
        type: 'wmts',
        visible: false,
        layerType: 'img_c',
        isLoadMapByToken: true,
        url: TIANDITU_GIS_HOST + '/img_c/wmts?layer=img&style=default&tilematrixset=c' +
                    '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
                    '&tk=' + TIANDITU_GIS_TOKEN,
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
      },
      annotation: {
        layerName: '天地图影像标注',
        type: 'wmts',
        visible: false,
        layerType: 'cia_c',
        isLoadMapByToken: true,
        url: TIANDITU_GIS_HOST + '/cia_c/wmts?layer=cia&style=default&tilematrixset=c' +
                    '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
                    '&tk=' + TIANDITU_GIS_TOKEN,
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
      }
    },
    {
      code: 'tianditu_vec',
      name: '天地图影像',
      icon_actived: '/assets/images/map-pages/icon/road.png',
      icon_deactived: '/assets/images/map-pages/icon/road.png',
      isAddToMap: false,
      map: {
        layerName: '天地图矢量地图',
        type: 'wmts',
        visible: false,
        layerType: 'vec_c',
        isLoadMapByToken: true,
        url: TIANDITU_GIS_HOST + '/vec_c/wmts?layer=vec&style=default&tilematrixset=c' +
                    '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
                    '&tk=' + TIANDITU_GIS_TOKEN,
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
      },
      annotation: {
        layerName: '天地图矢量标注',
        type: 'wmts',
        visible: false,
        layerType: 'cva_c',
        isLoadMapByToken: true,
        url: TIANDITU_GIS_HOST + '/cva_c/wmts?layer=cva&style=default&tilematrixset=c' +
                    '&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}' +
                    '&tk=' + TIANDITU_GIS_TOKEN,
        option: {
          maxZoom: 18,
          minZoom: 1,
          zoomOffset: 1
        }
      }
    }
  ],
  ArcBaseMaps: [
    {
      layerName: 'arcgis影像底图',
      type: 'tile',
      visible: true,
      layerType: 'cia_c',
      isLoadMapByToken: false,
      url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
    }
  ],

    ServiceLayers:[
  ServiceLayers: [
    {
      code: 'guojie',
      name: '国界',
      icon_actived: '',
      icon_deactived: '',
      type: 'wmts',
      url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
      inLegend: true,
      checked: true,
      option: {
        zoomOffset: 1
      }
    },
    {
      code: 'pipeline',
      name: '管网数据',
      icon_actived: '',
      icon_deactived: '',
      type: 'wms',
      url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
      inLegend: true,
      checked: true,
      option: {
        layers: 'all',
        styles: '', // Comma-separated list of WMS styles.
        format: 'image/png', // WMS image format (use 'image/png' for layers with transparency).
        transparent: true, // If true, the WMS service will return images with transparency.
        version: '1.1.1', // Version of the WMS service to use
        crs: L.CRS.EPSG4326, // Coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
        uppercase: false
      },
      layers: [
        {
            code:'guojie',
            name:'国界',
            icon_actived: '',
            icon_deactived: '',
            type:'wmts',
            url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
            inLegend: true,
            checked: true,
            option:{
                zoomOffset: 1
            }
          code: 'rainline',
          name: '雨水线',
          sname: '雨水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
            code:'pipeline',
            name:'管网数据',
            icon_actived: '',
            icon_deactived: '',
            type:'wms',
            url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
            inLegend: true,
            checked: true,
            option:{
                layers:'all',
                styles:'', // Comma-separated list of WMS styles.
                format:'image/png', // WMS image format (use 'image/png' for layers with transparency).
                transparent:true,    // If true, the WMS service will return images with transparency.
                version:'1.1.1',    // Version of the WMS service to use
                crs:L.CRS.EPSG4326, // Coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
                uppercase:false
            },
            layers:[
                {
                    code:'rainline',
                    name:'雨水线',
                    sname:'雨水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'oilline',
                    name:'含油污水线',
                    sname:'含油污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'saltline',
                    name:'含盐污水线',
                    sname:'含盐污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'alkaliline',
                    name:'含碱污水线',
                    sname:'含碱污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'outlet',
                    name:'排口',
                    sname:'排口',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'accidentline',
                    name:'事故水线',
                    sname:'事故水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'loopline',
                    name:'循环水线',
                    sname:'循环水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'purifyline',
                    name:'净化水线',
                    sname:'净化水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'lifeline',
                    name:'生活污水',
                    sname:'生活污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'areainfo',
                    name:'区域信息',
                    sname:'区域信息',
                    checked: true, // 默认选中状态
                    filter:{}
                },
            ],
            filtersGroup:[
                {
                    code:'fsss',
                    name:'附属设施',
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'fourlink',
                            name:'四通',
                            sname:'四通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'tee',
                            name:'三通',
                            sname:'三通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'piperack',
                            name:'管架(墩)',
                            sname:'管架',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pipegallery',
                            name:'管廊(带)',
                            sname:'管廊',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pipesegment',
                            name:'流向',
                            sname:'流向',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pipeline',
                            name:'管网',
                            sname:'管网',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'valve',
                            name:'阀门',
                            sname:'阀门',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'elbow',
                            name:'弯头',
                            sname:'弯头',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                    ]
                },
                {
                    code:'hbss',
                    name:'环保设施',
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'manhole',
                            name:'窨井',
                            sname:'窨井',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'firedike',
                            name:'防火堤',
                            sname:'防火堤',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'raingate',
                            name:'雨篦子',
                            sname:'雨篦子',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'overflowweir',
                            name:'溢流堰',
                            sname:'溢流堰',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'chokevalve',
                            name:'截流闸',
                            sname:'截流闸',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'collectingbasin',
                            name:'集水池(罐)',
                            sname:'集水池',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'oilseparator',
                            name:'隔油池',
                            sname:'隔油池',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                    ]
                },
                {
                    code:'pk',
                    name:'排口',
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'dischargeport',
                            name:'排放口',
                            sname:'排放口',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        }
                    ]
                },
                {
                    code:'qyxx',
                    name:'区域信息',
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'thirdpartypipe',
                            name:'第三方管道',
                            sname:'第三方管道',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'firefightingunit',
                            name:'消防单位',
                            sname:'消防单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'emergencyesources',
                            name:'应急物资',
                            sname:'应急物资',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'emergencyres',
                            name:'社会专业应急救援队伍',
                            sname:'专业应急救援',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'maintenanceteam',
                            name:'维抢修队伍',
                            sname:'维抢修队伍',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'hospital',
                            name:'医院',
                            sname:'医院',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pointpreservationzone',
                            name:'自然保护区',
                            sname:'自然保护区',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pointhydrology',
                            name:'水体',
                            sname:'水体',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'sensitivetarget',
                            name:'敏感目标',
                            sname:'敏感目标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'envmonunit',
                            name:'环境监测单位',
                            sname:'环境监测单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pointcontaminants',
                            name:'监测点污染物指标信息',
                            sname:'污染物指标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'dischargeportaround',
                            name:'排放口周边环境敏感信息',
                            sname:'排放口周边环境',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pump',
                            name:'泵',
                            sname:'泵',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'liquidlevelmeter',
                            name:'液位计',
                            sname:'液位计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'flowmeter',
                            name:'流量计',
                            sname:'流量计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'video',
                            name:'视频监控配置',
                            sname:'视频监控',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'onlinemonitoring',
                            name:'在线监测设备配置',
                            sname:'在线监测',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'combustiblegas',
                            name:'可燃气体报警设备配置',
                            sname:'可燃气体报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'hydrogensulfide',
                            name:'H2S浓度报警设备配置',
                            sname:'H2S浓度报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'controlpoint',
                            name:'管线点',
                            sname:'管线点',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'pipesegment',
                            name:'管段',
                            sname:'管段',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        }
                    ]
                }
            ]
          code: 'oilline',
          name: '含油污水线',
          sname: '含油污水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'saltline',
          name: '含盐污水线',
          sname: '含盐污水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'alkaliline',
          name: '含碱污水线',
          sname: '含碱污水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'outlet',
          name: '排口',
          sname: '排口',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'accidentline',
          name: '事故水线',
          sname: '事故水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'loopline',
          name: '循环水线',
          sname: '循环水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'purifyline',
          name: '净化水线',
          sname: '净化水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'lifeline',
          name: '生活污水',
          sname: '生活污水',
          checked: true, // 默认选中状态
          filter: {}
        },
        {
          code: 'areainfo',
          name: '区域信息',
          sname: '区域信息',
          checked: true, // 默认选中状态
          filter: {}
        }
    ]
      ],
      filtersGroup: [
        {
          code: 'fsss',
          name: '附属设施',
          checked: true, // 默认选中状态
          filters: [
            {
              code: 'fourlink',
              name: '四通',
              sname: '四通',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'tee',
              name: '三通',
              sname: '三通',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'piperack',
              name: '管架(墩)',
              sname: '管架',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pipegallery',
              name: '管廊(带)',
              sname: '管廊',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pipesegment',
              name: '流向',
              sname: '流向',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pipeline',
              name: '管网',
              sname: '管网',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'valve',
              name: '阀门',
              sname: '阀门',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'elbow',
              name: '弯头',
              sname: '弯头',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            }
          ]
        },
        {
          code: 'hbss',
          name: '环保设施',
          checked: true, // 默认选中状态
          filters: [
            {
              code: 'manhole',
              name: '窨井',
              sname: '窨井',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'firedike',
              name: '防火堤',
              sname: '防火堤',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'raingate',
              name: '雨篦子',
              sname: '雨篦子',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'overflowweir',
              name: '溢流堰',
              sname: '溢流堰',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'chokevalve',
              name: '截流闸',
              sname: '截流闸',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'collectingbasin',
              name: '集水池(罐)',
              sname: '集水池',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'oilseparator',
              name: '隔油池',
              sname: '隔油池',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            }
          ]
        },
        {
          code: 'pk',
          name: '排口',
          checked: true, // 默认选中状态
          filters: [
            {
              code: 'dischargeport',
              name: '排放口',
              sname: '排放口',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            }
          ]
        },
        {
          code: 'qyxx',
          name: '区域信息',
          checked: true, // 默认选中状态
          filters: [
            {
              code: 'thirdpartypipe',
              name: '第三方管道',
              sname: '第三方管道',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'firefightingunit',
              name: '消防单位',
              sname: '消防单位',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'emergencyesources',
              name: '应急物资',
              sname: '应急物资',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'emergencyres',
              name: '社会专业应急救援队伍',
              sname: '专业应急救援',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'maintenanceteam',
              name: '维抢修队伍',
              sname: '维抢修队伍',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'hospital',
              name: '医院',
              sname: '医院',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pointpreservationzone',
              name: '自然保护区',
              sname: '自然保护区',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pointhydrology',
              name: '水体',
              sname: '水体',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'sensitivetarget',
              name: '敏感目标',
              sname: '敏感目标',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'envmonunit',
              name: '环境监测单位',
              sname: '环境监测单位',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pointcontaminants',
              name: '监测点污染物指标信息',
              sname: '污染物指标',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'dischargeportaround',
              name: '排放口周边环境敏感信息',
              sname: '排放口周边环境',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pump',
              name: '泵',
              sname: '泵',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'liquidlevelmeter',
              name: '液位计',
              sname: '液位计',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'flowmeter',
              name: '流量计',
              sname: '流量计',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'video',
              name: '视频监控配置',
              sname: '视频监控',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'onlinemonitoring',
              name: '在线监测设备配置',
              sname: '在线监测',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'combustiblegas',
              name: '可燃气体报警设备配置',
              sname: '可燃气体报警',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'hydrogensulfide',
              name: 'H2S浓度报警设备配置',
              sname: 'H2S浓度报警',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'controlpoint',
              name: '管线点',
              sname: '管线点',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            },
            {
              code: 'pipesegment',
              name: '管段',
              sname: '管段',
              checked: true, // 默认选中状态
              geom: GEOM_POINT
            }
          ]
        }
      ]
    }
  ]
}

/**
 * 内网GIS，获取token参数
 */
const TokenConfig = {
    url: SINOPEC_GIS_HOST + '/RemoteTokenServer', // 获取token的服务接口
    option: {
        request: 'getToken',
        username: 'sipms', // 获取token的用户名
        password: 'sinopecipms', // 获取token的密码
        expiration: 1440,
        clientid: 'ref.' + HOST_URL// 获取token的应用服务器地址
    }
  url: SINOPEC_GIS_HOST + '/RemoteTokenServer', // 获取token的服务接口
  option: {
    request: 'getToken',
    username: 'sipms', // 获取token的用户名
    password: 'sinopecipms', // 获取token的密码
    expiration: 1440,
    clientid: 'ref.' + HOST_URL// 获取token的应用服务器地址
  }
}

export default {
    mapOptions,
    mapConfig,
    TokenConfig,
  mapOptions,
  mapConfig,
  TokenConfig,

    BLUEMAP_HOST
  BLUEMAP_HOST
}

 src/main.js

@@ -18,12 +18,12 @@
echarts.registerTheme('dark', echartsDarkTheme)

// 开发环境下加载假数据
if (process.env.NODE_ENV === 'development') {
  console.log('当前处于开发模式！')
if (process.env.VUE_APP_MOCK && process.env.NODE_ENV === 'development') {
  console.warn('当前处于mock数据请求！')
  require('./mock')
}

window.vm = new Vue({
  router,
  store,
  render: h => h(App),
  render: h => h(App)
}).$mount('#app')

 src/router/routes.js

@@ -9,29 +9,29 @@
 * }
 */
// 默认跳转路由
import App from "../App";
import PipeLineIndex from "../views/baseInfoMgr/pipeline/PipeLineIndex";
import MapTemplate from "../views/MapTemplate";
import App from '../App'
import PipeLineIndex from '../views/baseInfoMgr/pipeline/PipeLineIndex'
import MapTemplate from '../views/MapTemplate'

// 应用业务相关路由，挂载menu上的page
export const routes = [{
    path: '/',
    name: 'Main',
    component: App,
    redirect: '/home',
    children: [{
        path: 'home',
        name: 'Home',
        meta: {
            title: '首页'
        },
        component: MapTemplate
    }, {
        path: 'baseInfoMgr/pipeLine',
        name: 'baseInfoMgr',
        component: PipeLineIndex,
        meta: {
            title: '基础数据维护'
        }
    }]
  path: '/',
  name: 'Main',
  component: App,
  redirect: '/home',
  children: [{
    path: 'home',
    name: 'Home',
    meta: {
      title: '首页'
    },
    component: MapTemplate
  }, {
    path: 'baseInfoMgr/pipeLine',
    name: 'baseInfoMgr',
    component: PipeLineIndex,
    meta: {
      title: '基础数据维护'
    }
  }]
}]

 src/store/modules/app.js

@@ -1,29 +1,27 @@
export default {

    state: {
  state: {

        //属性
    // 属性

        demoValue:{}
    demoValue: {}

    },
  },

    getters: {
  getters: {

        getDemoValue: state => state.demoValue
    getDemoValue: state => state.demoValue

    },
  },

    mutations: {
  mutations: {

        //set方法
    // set方法

        setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

    setDemoValue (state, demoValue) {
      state.demoValue = demoValue
    }

  }

}

 src/store/modules/map.js

@@ -1,50 +1,50 @@
import mapConfig from '../../conf/MapConfig'

const state = {
    currentCorp: null,
    currentCorpType: null,
    L: null,
    map: null, // 实例化的map
    basemapHelper: {}, // 影像地图图层控制器实现助手程序
    serviceLayerHelper: {}, // 服务图层控制器实现助手程序
    vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
    layerControllerVisible: { // 图层控制面板的显示状态››
        layerController: true, // 爸爸栏目：是否显示图层控制面板
    },
    showServiceLayerFilter: false, // Service图层过滤器
    selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
    serviceLayerFilters: {}, // 服务图层控制过滤配置
    mapConfig: mapConfig
  currentCorp: null,
  currentCorpType: null,
  L: null,
  map: null, // 实例化的map
  basemapHelper: {}, // 影像地图图层控制器实现助手程序
  serviceLayerHelper: {}, // 服务图层控制器实现助手程序
  vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
  layerControllerVisible: { // 图层控制面板的显示状态››
    layerController: true // 爸爸栏目：是否显示图层控制面板
  },
  showServiceLayerFilter: false, // Service图层过滤器
  selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
  serviceLayerFilters: {}, // 服务图层控制过滤配置
  mapConfig: mapConfig
}
const mutations = {
    setMapObj(state, mObject) {
        state.L = mObject.L
        state.map = mObject.map
    },
    setBasemapHelper(state, layerHelper) {
        state.basemapHelper = layerHelper
    },
    setServiceLayerHelper(state, layerHelper) {
        state.serviceLayerHelper = layerHelper
    },
    setVectorLayerHelper(state, layerHelper) {
        state.vectoryLayerHelper = layerHelper
    },
    updateLayerControllerVisible(state, preset) {
        state.layerControllerVisible = preset
    },
    setSelectedServiceLayer(state, selectedServiceLayer) {
        state.selectedServiceLayer = selectedServiceLayer
    },
    toggleServiceLayerFilter(state) {
        state.showServiceLayerFilter = !state.showServiceLayerFilter
    }
  setMapObj (state, mObject) {
    state.L = mObject.L
    state.map = mObject.map
  },
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper
  },
  setServiceLayerHelper (state, layerHelper) {
    state.serviceLayerHelper = layerHelper
  },
  setVectorLayerHelper (state, layerHelper) {
    state.vectoryLayerHelper = layerHelper
  },
  updateLayerControllerVisible (state, preset) {
    state.layerControllerVisible = preset
  },
  setSelectedServiceLayer (state, selectedServiceLayer) {
    state.selectedServiceLayer = selectedServiceLayer
  },
  toggleServiceLayerFilter (state) {
    state.showServiceLayerFilter = !state.showServiceLayerFilter
  }
}
const actions = {

}
export default {
    state,
    mutations,
    actions
  state,
  mutations,
  actions
}

 src/utils/AjaxUtils.js

@@ -6,22 +6,20 @@
 * @param pData   参数
 * @param pBackFun 成功回调
 */
function post4JsonDataByUrl(pUrl, pData, pBackFun) {
    $.ajax({
        type: 'post',
        url: pUrl,
        dataType: 'json',
        data: pData,
        async: true,
        success: function(datas, nnn) {
            console.log(nnn)
            pBackFun(datas)
        },
        error: function(err, nnnn) {
            console.log(nnnn)
            console.error('数据获取失败', err, pUrl)
        }
    })
function post4JsonDataByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'post',
    url: pUrl,
    dataType: 'json',
    data: pData,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (err, nnnn) {
      console.error('数据获取失败', err, pUrl)
    }
  })
}

/**
@@ -30,82 +28,74 @@
 * @param pData   参数
 * @param pBackFun 成功回调
 */
function get4JsonDataByUrl(pUrl, pData, pBackFun) {
    $.ajax({
        type: 'get',
        url: pUrl,
        dataType: 'json',
        data: pData,
        async: true,
        success: function(datas, nnn) {
            console.log(nnn)
            pBackFun(datas)
        },
        error: function(err, nnnn) {
            console.log(nnnn)
            console.error('数据获取失败', err, pUrl)
        }
    })
function get4JsonDataByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'get',
    url: pUrl,
    dataType: 'json',
    data: pData,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (err, nnnn) {
      console.error('数据获取失败', err, pUrl)
    }
  })
}

function GetDataAsynByUrl(pUrl, pData, pBackFun) {
    $.ajax({
        type: 'GET',
        url: pUrl,
        data: pData,
        timeout: 600000,
        async: true,
        success: function(datas, nnn) {
            console.log(nnn)
            pBackFun(datas)
        },
        error: function(e, nnnn) {
            console.log(e,nnnn)
            console.error('数据获取失败', pUrl)
        }
    })
function GetDataAsynByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'GET',
    url: pUrl,
    data: pData,
    timeout: 600000,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (e, nnnn) {
      console.error('数据获取失败', pUrl)
    }
  })
}
function postDataAsynByUrl(pUrl, pData, pBackFun) {
    $.ajax({
        type: 'post',
        url: pUrl,
        data: pData,
        timeout: 600000,
        async: true,
        success: function(datas, nnn) {
            console.log(nnn)
            pBackFun(datas)
        },
        error: function(e, nnnn) {
            console.log(e,nnnn)
            console.error('数据获取失败', pUrl)
        }
    })
function postDataAsynByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'post',
    url: pUrl,
    data: pData,
    timeout: 600000,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (e, nnnn) {
      console.error('数据获取失败', pUrl)
    }
  })
}

function GetDataByUrl(pUrl, pData, pBackFun) {
    $.ajax({
        type: 'GET',
        url: pUrl,
        data: pData,
        timeout: 600000,
        success: function(datas, nnn) {
            console.log(nnn)
            pBackFun(datas)
        },
        error: function(e, nnnn) {
            console.log(nnnn)
            // tmpErrJSONTextParse(e, pBackFun) // todo SGIS Server有个WFS图层服务json解析错误， 这里是暂时处理，等过几天黎耀修改好了，这里需要修改回去。
            console.log('返回的错误信息：', e)
            console.error('数据获取失败', pUrl)
        }
    })
function GetDataByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'GET',
    url: pUrl,
    data: pData,
    timeout: 600000,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (e, nnnn) {
      // tmpErrJSONTextParse(e, pBackFun) // todo SGIS Server有个WFS图层服务json解析错误， 这里是暂时处理，等过几天黎耀修改好了，这里需要修改回去。
      console.log('返回的错误信息：', e)
      console.error('数据获取失败', pUrl)
    }
  })
}

export default {
    post4JsonDataByUrl,
    get4JsonDataByUrl,
    GetDataAsynByUrl,
    postDataAsynByUrl,
    GetDataByUrl
  post4JsonDataByUrl,
  get4JsonDataByUrl,
  GetDataAsynByUrl,
  postDataAsynByUrl,
  GetDataByUrl
}

 src/utils/DateUtils.js

@@ -4,26 +4,26 @@
 * @param date
 * @returns {*}
 */
function dateFormat(fmt, date) {
    let ret
    const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
function dateFormat (fmt, date) {
  let ret
  const opt = {
    'Y+': date.getFullYear().toString(), // 年
    'm+': (date.getMonth() + 1).toString(), // 月
    'd+': date.getDate().toString(), // 日
    'H+': date.getHours().toString(), // 时
    'M+': date.getMinutes().toString(), // 分
    'S+': date.getSeconds().toString() // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  }
  for (const k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt)
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
    }
    for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
    }
    return fmt
  }
  return fmt
}

export default {
    dateFormat
  dateFormat
}

 src/utils/GISUtil.js

@@ -1,113 +1,113 @@
// ==============坐标系转换===============
var GSP = {
    PI: 3.14159265358979324,
    x_pi: 3.14159265358979324 * 3000.0 / 180.0,
    delta: function(lat, lon) {
        // Krasovsky 1940
        //
        // a = 6378245.0, 1/f = 298.3
        // b = a * (1 - f)
        // ee = (a^2 - b^2) / a^2;
        var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
        var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
        var dLat = this.transformLat(lon - 105.0, lat - 35.0)
        var dLon = this.transformLon(lon - 105.0, lat - 35.0)
        var radLat = lat / 180.0 * this.PI
        var magic = Math.sin(radLat)
        magic = 1 - ee * magic * magic
        var sqrtMagic = Math.sqrt(magic)
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI)
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI)
        return { 'lat': dLat, 'lon': dLon }
    },
  PI: 3.14159265358979324,
  x_pi: 3.14159265358979324 * 3000.0 / 180.0,
  delta: function (lat, lon) {
    // Krasovsky 1940
    //
    // a = 6378245.0, 1/f = 298.3
    // b = a * (1 - f)
    // ee = (a^2 - b^2) / a^2;
    var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
    var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
    var dLat = this.transformLat(lon - 105.0, lat - 35.0)
    var dLon = this.transformLon(lon - 105.0, lat - 35.0)
    var radLat = lat / 180.0 * this.PI
    var magic = Math.sin(radLat)
    magic = 1 - ee * magic * magic
    var sqrtMagic = Math.sqrt(magic)
    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI)
    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI)
    return { lat: dLat, lon: dLon }
  },

    // WGS-84 to GCJ-02
    gcj_encrypt: function(wgsLat, wgsLon) {
        if (this.outOfChina(wgsLat, wgsLon)) { return { 'lat': wgsLat, 'lon': wgsLon } }
  // WGS-84 to GCJ-02
  gcj_encrypt: function (wgsLat, wgsLon) {
    if (this.outOfChina(wgsLat, wgsLon)) { return { lat: wgsLat, lon: wgsLon } }

        var d = this.delta(wgsLat, wgsLon)
        return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon }
    },
    // GCJ-02 to WGS-84
    gcj_decrypt: function(gcjLat, gcjLon) {
        if (this.outOfChina(gcjLat, gcjLon)) { return { 'lat': gcjLat, 'lon': gcjLon } }
    var d = this.delta(wgsLat, wgsLon)
    return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }
  },
  // GCJ-02 to WGS-84
  gcj_decrypt: function (gcjLat, gcjLon) {
    if (this.outOfChina(gcjLat, gcjLon)) { return { lat: gcjLat, lon: gcjLon } }

        var d = this.delta(gcjLat, gcjLon)
        return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon }
    },
    // GCJ-02 to WGS-84 exactly
    gcj_decrypt_exact: function(gcjLat, gcjLon) {
        let initDelta = 0.01
        let threshold = 0.000000001
        let dLat = initDelta
        let dLon = initDelta
        let mLat = gcjLat - dLat
        let mLon = gcjLon - dLon
        let pLat = gcjLat + dLat
        let pLon = gcjLon + dLon
        let wgsLat
        let wgsLon
        let i = 0
        while (1) {
            wgsLat = (mLat + pLat) / 2
            wgsLon = (mLon + pLon) / 2
            var tmp = this.gcj_encrypt(wgsLat, wgsLon)
            dLat = tmp.lat - gcjLat
            dLon = tmp.lon - gcjLon
            if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold)) { break }
    var d = this.delta(gcjLat, gcjLon)
    return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }
  },
  // GCJ-02 to WGS-84 exactly
  gcj_decrypt_exact: function (gcjLat, gcjLon) {
    const initDelta = 0.01
    const threshold = 0.000000001
    let dLat = initDelta
    let dLon = initDelta
    let mLat = gcjLat - dLat
    let mLon = gcjLon - dLon
    let pLat = gcjLat + dLat
    let pLon = gcjLon + dLon
    let wgsLat
    let wgsLon
    let i = 0
    while (1) {
      wgsLat = (mLat + pLat) / 2
      wgsLon = (mLon + pLon) / 2
      var tmp = this.gcj_encrypt(wgsLat, wgsLon)
      dLat = tmp.lat - gcjLat
      dLon = tmp.lon - gcjLon
      if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold)) { break }

            if (dLat > 0) pLat = wgsLat; else mLat = wgsLat
            if (dLon > 0) pLon = wgsLon; else mLon = wgsLon
      if (dLat > 0) pLat = wgsLat; else mLat = wgsLat
      if (dLon > 0) pLon = wgsLon; else mLon = wgsLon

            if (++i > 10000) break
        }
        // console.log(i);
        return { 'lat': wgsLat, 'lon': wgsLon }
    },
    // GCJ-02 to BD-09
    bd_encrypt: function(gcjLat, gcjLon) {
        let x = gcjLon
        let y = gcjLat
        let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)
        let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi)
        let bdLon = z * Math.cos(theta) + 0.0065
        let bdLat = z * Math.sin(theta) + 0.006
        return { 'lat': bdLat, 'lon': bdLon }
    },
    // BD-09 to GCJ-02
    bd_decrypt: function(bdLat, bdLon) {
        let x = bdLon - 0.0065
        let y = bdLat - 0.006
        let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
        let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
        let gcjLon = z * Math.cos(theta)
        let gcjLat = z * Math.sin(theta)
        return { 'lat': gcjLat, 'lon': gcjLon }
    },
    // WGS-84 to Web mercator
    // mercatorLat -> y mercatorLon -> x
    mercator_encrypt: function(wgsLat, wgsLon) {
        let x = wgsLon * 20037508.34 / 180.0
        let y = Math.log(Math.tan((90.0 + wgsLat) * this.PI / 360.0)) / (this.PI / 180.0)
        y = y * 20037508.34 / 180.0
        return { 'lat': y, 'lon': x }
        /*
      if (++i > 10000) break
    }
    // console.log(i);
    return { lat: wgsLat, lon: wgsLon }
  },
  // GCJ-02 to BD-09
  bd_encrypt: function (gcjLat, gcjLon) {
    const x = gcjLon
    const y = gcjLat
    const z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)
    const theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi)
    const bdLon = z * Math.cos(theta) + 0.0065
    const bdLat = z * Math.sin(theta) + 0.006
    return { lat: bdLat, lon: bdLon }
  },
  // BD-09 to GCJ-02
  bd_decrypt: function (bdLat, bdLon) {
    const x = bdLon - 0.0065
    const y = bdLat - 0.006
    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
    const gcjLon = z * Math.cos(theta)
    const gcjLat = z * Math.sin(theta)
    return { lat: gcjLat, lon: gcjLon }
  },
  // WGS-84 to Web mercator
  // mercatorLat -> y mercatorLon -> x
  mercator_encrypt: function (wgsLat, wgsLon) {
    const x = wgsLon * 20037508.34 / 180.0
    let y = Math.log(Math.tan((90.0 + wgsLat) * this.PI / 360.0)) / (this.PI / 180.0)
    y = y * 20037508.34 / 180.0
    return { lat: y, lon: x }
    /*
        if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
            return null;
        var x = 6378137.0 * wgsLon * 0.017453292519943295;
        var a = wgsLat * 0.017453292519943295;
        var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        return {'lat' : y, 'lon' : x};
        //*/
    },
    // Web mercator to WGS-84
    // mercatorLat -> y mercatorLon -> x
    mercator_decrypt: function(mercatorLat, mercatorLon) {
        var x = mercatorLon / 20037508.34 * 180.0
        var y = mercatorLat / 20037508.34 * 180.0
        y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.0)) - this.PI / 2)
        return { 'lat': y, 'lon': x }
        /*
        // */
  },
  // Web mercator to WGS-84
  // mercatorLat -> y mercatorLon -> x
  mercator_decrypt: function (mercatorLat, mercatorLon) {
    var x = mercatorLon / 20037508.34 * 180.0
    var y = mercatorLat / 20037508.34 * 180.0
    y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.0)) - this.PI / 2)
    return { lat: y, lon: x }
    /*
        if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
            return null;
        if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
@@ -116,41 +116,41 @@
        var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
        var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
        return {'lat' : y, 'lon' : x};
        //*/
    },
    // two point's distance
    distance: function(latA, lonA, latB, lonB) {
        var earthR = 6371000.0
        var x = Math.cos(latA * this.PI / 180.0) * Math.cos(latB * this.PI / 180.0) * Math.cos((lonA - lonB) * this.PI / 180)
        var y = Math.sin(latA * this.PI / 180.0) * Math.sin(latB * this.PI / 180.0)
        var s = x + y
        if (s > 1) s = 1
        if (s < -1) s = -1
        var alpha = Math.acos(s)
        var distance = alpha * earthR
        return distance
    },
    outOfChina: function(lat, lon) {
        if (lon < 72.004 || lon > 137.8347) { return true }
        if (lat < 0.8293 || lat > 55.8271) { return true }
        return false
    },
    transformLat: function(x, y) {
        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0
        ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0
        return ret
    },
    transformLon: function(x, y) {
        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
        ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0
        ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0
        return ret
    }
        // */
  },
  // two point's distance
  distance: function (latA, lonA, latB, lonB) {
    var earthR = 6371000.0
    var x = Math.cos(latA * this.PI / 180.0) * Math.cos(latB * this.PI / 180.0) * Math.cos((lonA - lonB) * this.PI / 180)
    var y = Math.sin(latA * this.PI / 180.0) * Math.sin(latB * this.PI / 180.0)
    var s = x + y
    if (s > 1) s = 1
    if (s < -1) s = -1
    var alpha = Math.acos(s)
    var distance = alpha * earthR
    return distance
  },
  outOfChina: function (lat, lon) {
    if (lon < 72.004 || lon > 137.8347) { return true }
    if (lat < 0.8293 || lat > 55.8271) { return true }
    return false
  },
  transformLat: function (x, y) {
    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0
    ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0
    return ret
  },
  transformLon: function (x, y) {
    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
    ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0
    ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0
    return ret
  }
}

export default {
    GSP
  GSP
}

 src/utils/JsonUtils.js

@@ -3,46 +3,46 @@
 * @param {Object} type： 默认不传 ==>全部小写;传1 ==>全部大写;传2 ==>首字母大写
 * 将json的key值进行大小写转换
 */
function jsonKeysToCase(json, type) {
    if (typeof json === 'object') {
        var tempJson = JSON.parse(JSON.stringify(json))
        toCase(tempJson)
        return tempJson
    } else {
        return json
    }
function jsonKeysToCase (json, type) {
  if (typeof json === 'object') {
    var tempJson = JSON.parse(JSON.stringify(json))
    toCase(tempJson)
    return tempJson
  } else {
    return json
  }

    function toCase(json) {
        if (typeof json === 'object') {
            if (Array.isArray(json)) {
                json.forEach(function(item) {
                    toCase(item)
                })
            } else {
                for (var key in json) {
                    var item = json[key]
                    if (typeof item === 'object') {
                        toCase(item)
                    }
                    delete (json[key])
                    switch (type) {
                        case 1:
                            // key值全部大写
                            json[key.toLocaleUpperCase()] = item
                            break
                        case 2:
                            // key值首字母大写，其余小写
                            json[key.substring(0, 1).toLocaleUpperCase() + key.substring(1).toLocaleLowerCase()] = item
                            break
                        default:
                            // 默认key值全部小写
                            json[key.toLocaleLowerCase()] = item
                            break
                    }
                }
            }
  function toCase (json) {
    if (typeof json === 'object') {
      if (Array.isArray(json)) {
        json.forEach(function (item) {
          toCase(item)
        })
      } else {
        for (var key in json) {
          var item = json[key]
          if (typeof item === 'object') {
            toCase(item)
          }
          delete (json[key])
          switch (type) {
            case 1:
              // key值全部大写
              json[key.toLocaleUpperCase()] = item
              break
            case 2:
              // key值首字母大写，其余小写
              json[key.substring(0, 1).toLocaleUpperCase() + key.substring(1).toLocaleLowerCase()] = item
              break
            default:
              // 默认key值全部小写
              json[key.toLocaleLowerCase()] = item
              break
          }
        }
      }
    }
  }
}

export default jsonKeysToCase

 src/utils/MiscUtils.js

@@ -1,118 +1,118 @@
// 参数名称:authCode    值: 所有:0 化工销售:HXXT; 炼油销售:LXXT;  江苏石油:CPYXT;  销售华东:XSHD
let SysAuthCode = '0'
const SysAuthCode = '0'
/**
 * Created by liangruizhe on 2019/01/14
 */
// ==============时间===============
// 获取当前时间
function GetCurrentTime() {
    var today = new Date()
    var year = today.getFullYear()
    var month = today.getMonth() + 1
    var day = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
    var hours = today.getHours() > 9 ? today.getHours() : '0' + today.getHours()
    var minutes = today.getMinutes() > 9 ? today.getMinutes() : '0' + today.getMinutes()
    var seconds = today.getSeconds() > 9 ? today.getSeconds() : '0' + today.getSeconds()
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
function GetCurrentTime () {
  var today = new Date()
  var year = today.getFullYear()
  var month = today.getMonth() + 1
  var day = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
  var hours = today.getHours() > 9 ? today.getHours() : '0' + today.getHours()
  var minutes = today.getMinutes() > 9 ? today.getMinutes() : '0' + today.getMinutes()
  var seconds = today.getSeconds() > 9 ? today.getSeconds() : '0' + today.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}
// 获取当天零点时间
function GetCurrentDayTime() {
    var today = new Date()
    var year = today.getFullYear()
    var month = today.getMonth() + 1
    var day = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
    return year + '-' + month + '-' + day + ' 00:01:01'
function GetCurrentDayTime () {
  var today = new Date()
  var year = today.getFullYear()
  var month = today.getMonth() + 1
  var day = today.getDate() > 9 ? today.getDate() : '0' + today.getDate()
  return year + '-' + month + '-' + day + ' 00:01:01'
}
// UtcToDateTime
function UtcToDateTime(time) {
    var date = new Date(time)
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
function UtcToDateTime (time) {
  var date = new Date(time)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}
// UtcToMonDate
function UtcToMonDate(time) {
    var date = new Date(time)
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return month + '/' + day + ' ' + hour + ':' + minute + ':' + second
function UtcToMonDate (time) {
  var date = new Date(time)
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return month + '/' + day + ' ' + hour + ':' + minute + ':' + second
}
// yyyy-MM-dd
function convertDateFromString(dateString) {
    if (dateString) {
        var date = new Date(dateString.replace(/-/, '/'))
        return date
    }
function convertDateFromString (dateString) {
  if (dateString) {
    var date = new Date(dateString.replace(/-/, '/'))
    return date
  }
}
// yyyy-MM-dd hh:mm:ss
function convertDateTimeFromString(dateString) {
    if (dateString) {
        var arr1 = dateString.split(' ')
        var sdate = arr1[0].split('-')
        var stime = arr1[1].split(':')
        var date = new Date(sdate[0], sdate[1] - 1, sdate[2], stime[0], stime[1], stime[2])
        return date
    }
function convertDateTimeFromString (dateString) {
  if (dateString) {
    var arr1 = dateString.split(' ')
    var sdate = arr1[0].split('-')
    var stime = arr1[1].split(':')
    var date = new Date(sdate[0], sdate[1] - 1, sdate[2], stime[0], stime[1], stime[2])
    return date
  }
}
// ==============空间计算===============
// 计算点串距离
function getLength(arrPnts, isJwd) {
    var dist = 0
    var length = 0
    var offset = 103133.845
    var fntPnt = null
    var lastPnt = null
    if (isJwd === undefined) isJwd = true
    if (arrPnts.length < 2) {
        return 0
    }
    for (var i = 0; i < arrPnts.length - 1; i++) {
        fntPnt = arrPnts[i]
        lastPnt = arrPnts[i + 1]
        if (lastPnt) {
            var xD = Math.abs(fntPnt.x - lastPnt.x)
            var yD = Math.abs(fntPnt.y - lastPnt.y)
function getLength (arrPnts, isJwd) {
  var dist = 0
  var length = 0
  var offset = 103133.845
  var fntPnt = null
  var lastPnt = null
  if (isJwd === undefined) isJwd = true
  if (arrPnts.length < 2) {
    return 0
  }
  for (var i = 0; i < arrPnts.length - 1; i++) {
    fntPnt = arrPnts[i]
    lastPnt = arrPnts[i + 1]
    if (lastPnt) {
      var xD = Math.abs(fntPnt.x - lastPnt.x)
      var yD = Math.abs(fntPnt.y - lastPnt.y)

            if (isJwd) {
                if (Math.abs(fntPnt.x) > 180) {
                    xD = xD / 3600
                    yD = yD / 3600
                }
                dist = (Math.sqrt(Math.pow(xD, 2) + Math.pow(yD, 2))) * offset
            } else {
                dist = (Math.sqrt(Math.pow(xD, 2) + Math.pow(yD, 2)))
            }

            length += dist
      if (isJwd) {
        if (Math.abs(fntPnt.x) > 180) {
          xD = xD / 3600
          yD = yD / 3600
        }
        dist = (Math.sqrt(Math.pow(xD, 2) + Math.pow(yD, 2))) * offset
      } else {
        dist = (Math.sqrt(Math.pow(xD, 2) + Math.pow(yD, 2)))
      }

      length += dist
    }
    return length
  }
  return length
}

// 计算点到线段的距离
function getDistance(point, lineP1, lineP2) {
    var a = Number((lineP1.y - lineP2.y) / (lineP1.x - lineP2.x))
    var b = -1
    var c = Number(lineP2.y - a * lineP2.x)
    var td = Math.abs(a * point.x + b * point.y + c) / Math.sqrt(a * a + b * b)
    return td
function getDistance (point, lineP1, lineP2) {
  var a = Number((lineP1.y - lineP2.y) / (lineP1.x - lineP2.x))
  var b = -1
  var c = Number(lineP2.y - a * lineP2.x)
  var td = Math.abs(a * point.x + b * point.y + c) / Math.sqrt(a * a + b * b)
  return td
}

export default {
    SysAuthCode,
    getDistance,
    getLength,
    GetCurrentTime,
    GetCurrentDayTime,
    UtcToDateTime,
    UtcToMonDate,
    convertDateFromString,
    convertDateTimeFromString
  SysAuthCode,
  getDistance,
  getLength,
  GetCurrentTime,
  GetCurrentDayTime,
  UtcToDateTime,
  UtcToMonDate,
  convertDateFromString,
  convertDateTimeFromString
}

 src/utils/MixinAuthority.js

File was deleted

 src/utils/MixinEmitter.js

File was deleted

 src/utils/authorityAPI.js

File was deleted

 src/utils/axios.js

File was deleted

 src/utils/constant.js

File was deleted

 src/utils/dictionary.js

File was deleted

 src/utils/navigation.js

File was deleted

 src/utils/tools.js

File was deleted

 src/utils/wfsQueryUtils.js

@@ -9,48 +9,48 @@
 *    }
 * @returns {string}
 */
function getPropertyNameQueryAndOrWFSUrl(params) {
   var url = ''
   if ((params.Or === undefined || params.Or.length === 0) && (params.And === undefined || params.And.length === 0) && (params.Not === undefined || params.Not.length === 0)) {
      url = params.Url + '?VERSION=1.0.0&SERVICE=WFS&REQUEST=getfeature&TYPENAME=' + params.TypeName + '&outputformat=json&maxfeature=20000'
   } else {
      url = params.Url + '?VERSION=1.0.0&SERVICE=WFS&REQUEST=getfeature&TYPENAME=' + params.TypeName + '&outputformat=json&maxfeature=20000&Filter=<Filter>'
   }
   if (params.Or != null && params.Or.length !== 0) {
       if (params.Or.length === 1) {
           url += '<PropertyIsEqualTo><PropertyName>' + params.Or[0].PropertyName + '</PropertyName><Literal>' + params.Or[0].PropertyValue + '</Literal></PropertyIsEqualTo>'
       } else {
           url += '<OR>'
           for (let i = 0; i < params.Or.length; i++) {
               url += '<PropertyIsEqualTo><PropertyName>' + params.Or[i].PropertyName + '</PropertyName><Literal>' + params.Or[i].PropertyValue + '</Literal></PropertyIsEqualTo>'
           }
           url += '</OR>'
       }
   }
   if (params.And != null && params.And.length !== 0) {
      if (params.And.length === 1) {
              url += '<PropertyIsEqualTo><PropertyName>' + params.And[0].PropertyName + '</PropertyName><Literal>' + params.And[0].PropertyValue + '</Literal></PropertyIsEqualTo>'
      } else {
          url += '<AND>'
          for (let j = 0; j < params.And.length; j++) {
              url += '<PropertyIsEqualTo><PropertyName>' + params.And[j].PropertyName + '</PropertyName><Literal>' + params.And[j].PropertyValue + '</Literal></PropertyIsEqualTo>'
          }
          url += '</AND>'
function getPropertyNameQueryAndOrWFSUrl (params) {
  var url = ''
  if ((params.Or === undefined || params.Or.length === 0) && (params.And === undefined || params.And.length === 0) && (params.Not === undefined || params.Not.length === 0)) {
    url = params.Url + '?VERSION=1.0.0&SERVICE=WFS&REQUEST=getfeature&TYPENAME=' + params.TypeName + '&outputformat=json&maxfeature=20000'
  } else {
    url = params.Url + '?VERSION=1.0.0&SERVICE=WFS&REQUEST=getfeature&TYPENAME=' + params.TypeName + '&outputformat=json&maxfeature=20000&Filter=<Filter>'
  }
  if (params.Or != null && params.Or.length !== 0) {
    if (params.Or.length === 1) {
      url += '<PropertyIsEqualTo><PropertyName>' + params.Or[0].PropertyName + '</PropertyName><Literal>' + params.Or[0].PropertyValue + '</Literal></PropertyIsEqualTo>'
    } else {
      url += '<OR>'
      for (let i = 0; i < params.Or.length; i++) {
        url += '<PropertyIsEqualTo><PropertyName>' + params.Or[i].PropertyName + '</PropertyName><Literal>' + params.Or[i].PropertyValue + '</Literal></PropertyIsEqualTo>'
      }
   }
   if (params.Not != null && params.Not.length !== 0) {
      url += '<NOT>'
       for (let k = 0; k < params.Not.length; k++) {
           url += '<PropertyIsEqualTo><PropertyName>' + params.Not[k].PropertyName + '</PropertyName><Literal>' + params.Not[k].PropertyValue + '</Literal></PropertyIsEqualTo>'
       }
      url += '</NOT>'
   }
    if ((params.Or !== undefined && params.Or.length !== 0) || (params.And !== undefined && params.And.length !== 0) || (params.Not !== undefined && params.Not.length !== 0)) {
        url += '</Filter>'
      url += '</OR>'
    }
   return url
  }
  if (params.And != null && params.And.length !== 0) {
    if (params.And.length === 1) {
      url += '<PropertyIsEqualTo><PropertyName>' + params.And[0].PropertyName + '</PropertyName><Literal>' + params.And[0].PropertyValue + '</Literal></PropertyIsEqualTo>'
    } else {
      url += '<AND>'
      for (let j = 0; j < params.And.length; j++) {
        url += '<PropertyIsEqualTo><PropertyName>' + params.And[j].PropertyName + '</PropertyName><Literal>' + params.And[j].PropertyValue + '</Literal></PropertyIsEqualTo>'
      }
      url += '</AND>'
    }
  }
  if (params.Not != null && params.Not.length !== 0) {
    url += '<NOT>'
    for (let k = 0; k < params.Not.length; k++) {
      url += '<PropertyIsEqualTo><PropertyName>' + params.Not[k].PropertyName + '</PropertyName><Literal>' + params.Not[k].PropertyValue + '</Literal></PropertyIsEqualTo>'
    }
    url += '</NOT>'
  }
  if ((params.Or !== undefined && params.Or.length !== 0) || (params.And !== undefined && params.And.length !== 0) || (params.Not !== undefined && params.Not.length !== 0)) {
    url += '</Filter>'
  }
  return url
}

export default {
    getPropertyNameQueryAndOrWFSUrl
  getPropertyNameQueryAndOrWFSUrl
}

 src/views/MapTemplate.vue

@@ -1,13 +1,13 @@
<template>
  <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap></lc-basemap>
            <div class="barline"></div>
            <lc-service-layer></lc-service-layer>
        </sgis-layer-controller>
        <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
        <monitor-panel></monitor-panel>
    <div id="map" ref="rootmap"></div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <div class="bar-line"></div>
      <lc-service-layer></lc-service-layer>
    </sgis-layer-controller>
    <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
    <monitor-panel></monitor-panel>
  </div>
</template>

@@ -24,71 +24,72 @@

export default {
  name: 'MapTemplate',
  components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter},
  data(){
  components: { SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter },
  data () {
    return {
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed:{
    showServiceLayerFilter(){
  computed: {
    showServiceLayerFilter () {
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig(){
    mapConfig () {
      return this.$store.state.map.mapConfig
    }
  },
  beforeMount(){
      this.$nextTick(() => {
          this.init()
      })
  beforeMount () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods:{
    saveMapStatus(){
      this.$store.commit('setMapObj', this.mapObj);
      this.$store.commit('setBasemapHelper', this.basemapHelper);
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper);
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper);
  methods: {
    saveMapStatus () {
      this.$store.commit('setMapObj', this.mapObj)
      this.$store.commit('setBasemapHelper', this.basemapHelper)
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)
    },
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
    init () {
      const mapcontainer = this.$refs.rootmap
      this.mapObj = Sgis.initMap(mapcontainer)

        this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
        this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数，表示是否内网底图
      this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.mapConfig, false) // 第二个参数，表示是否内网底图

        this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
        this.serviceLayerHelper.initServiceLayers(this.mapConfig)
      this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
      this.serviceLayerHelper.initServiceLayers(this.mapConfig)

        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers(this.mapConfig)
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.mapConfig)


        this.saveMapStatus()
        // this.setMapObj(this.mapObj)
        // this.setBasemapHelper(this.basemapHelper)
        // this.setServiceLayerHelper(this.serviceLayerHelper)
        // this.setVectorLayerHelper(this.vectorLayerHelper)
      }
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
    }
  }
}
</script>

<style lang="less">

.full-screen{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
  #map{
.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;

  #map {
    height: 100%;
    width: 100%;
  }
  .barline{

  .bar-line {
    width: 100%;
    height: 1px;
    background-color: #0661AE;