Merge remote-tracking branch 'origin/master'

YANGDL

2021-02-26 56b43d0a37ec52b718b32b00c63eb88f2e2744f3

Merge remote-tracking branch 'origin/master'

 package.json

@@ -21,7 +21,7 @@
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.6.0",
    "leaflet-canvas-marker": "^0.2.0",
    "leaflet-canvas-markers": "^1.0.6",
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",

 src/Sgis.js

@@ -4,7 +4,6 @@

import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
import WmtsSupport from '@components/plugin/wmts_plugins'

@@ -21,7 +20,6 @@
  Editable.init(L) // 图层编辑
  PathDrag.init(L) // 路径拖拽
  MagicMarker.init(L) // 动画Marker
  CanvasIcon.init(L) // 使用canvas绘制Marker
  WmtsSupport.init(L) // 扩展，使支持WMTS
  // CustomPopup.init(L) // 自定义弹出框
  DashFlow.DashFlow(L) // 流动线图

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -11,7 +11,8 @@
                                                                                                      :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                                                                                      :checked="itm.checked"
                                                                                                      :value="itm.code"
                                                                                                      @change="swWmsLayer(itm)"/>{{ itm.name }}
                                                                                                      @change="swWmsLayer(item.url,itm)"/>{{
                        itm.name }}
                    </div>
                </div>
            </div>
@@ -56,9 +57,14 @@
        window.L.geoJSON(res).addTo(window.map)
      })
    },
    swWmsLayer (itm) {
    swWmsLayer (url, itm) {
      itm.checked = !itm.checked
      this.updateWms()
      if (itm.checked) {
        window.serviceLayerHelper.loadGeojsonLayer(url, itm)
      } else {
        window.serviceLayerHelper.removeLayer(itm)
      }
      // this.updateWms()
    },
    swFilter (item) {
      this.layerFilterVisible = !this.layerFilterVisible

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -7,7 +7,7 @@
                </div>
                <div class="content">
                    <div v-for="filter in item.filters" :key="filter.code">
                        <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(filter)"><label
                        <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(item.url,filter)"><label
                            :title="filter.name">{{filter.name}}</label>
                    </div>
                </div>
@@ -58,9 +58,13 @@
      console.log(item)
      // window.serviceLayerHelper.loadLayers()
    },
    swSubFilter (item) {
    swSubFilter (url, item) {
      item.checked = !item.checked
      console.log(item)
      if (item.checked) {
        window.serviceLayerHelper.loadGeojsonLayer(url, item)
      } else {
        window.serviceLayerHelper.removeLayer(item)
      }
      // window.serviceLayerHelper.loadLayers()
    }
  }

 src/components/helpers/ServiceLayerHelper.js

@@ -3,7 +3,7 @@
 * 创建图层相关的类
 */
import AjaxUtils from '@/utils/AjaxUtils'
import { GEOM_TYPE } from '../../conf/Constants'
import store from '@/store'

class ServiceLayerHelper {
  constructor (options) {
@@ -14,7 +14,7 @@
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.geojsonArray = [] // 初始的geojson集
    this.geojsonArray = {} // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
  }
@@ -51,73 +51,49 @@
          this.loadTileLayer(opt, isAddToMap)
          this.tileLayersTileArray.push(opt)
        } else if (opt.type === 'geojson') {
          this.loadGeojson(opt)
          this.loadGeojsonLayers(opt)
        }
      }
    }
  }

  loadGeojson (options) {
  loadGeojsonLayers (options) {
    var url = options.url
    var layers = options.layers
    var matches = this.regex.exec(url)
    for (var i = 0; i < layers.length; i++) {
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      var geomtype = layer.geomtype
      if (!checked) {
        continue
      if (checked) {
        this.loadGeojsonLayer(url, layer)
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
    }
  }

  loadGeojsonLayer (url, layer) {
    var matches = this.regex.exec(url)
    var matchValue = layer[matches[1]]
    var code = layer.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.geojsonArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        switch (geomtype) {
          case GEOM_TYPE.POINT :
            that.loadPointGeojson(res)
            break
          case GEOM_TYPE.LINE :
            that.loadLineGeojson(res)
            break
          case GEOM_TYPE.POLYGON :
            break
          default:
            that.loadLineGeojson(res)
            break
        }
        store.commit('setSewersDatas', res)
        var layer = that.loadGeojson(res)
        that.geojsonArray[code] = layer
      })
    }
  }

  /**
   * 加载点数据
   * @param res
   */
  loadPointGeojson (res) {
    this.L.geoJSON(res.features, {
      pointToLayer: function (geoJsonPoint, latlng) {
        return this.L.canvasMarker(latlng,
          {
            radius: 20,
            prevLatlng: this.L.latLng(51.503, -0.09), // previous point
            img: {
              url: './images/beng.png',
              size: [20, 20],
              rotate: 90
            }
          })
      }
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
  }

  /**
   * 加载线数据
   * @param res
   */
  loadLineGeojson (res) {
    this.L.geoJSON(res.features, {
     * 加载点数据
     * @param res
     */
  loadGeojson (res) {
    var that = this
    const featureGroup = that.L.featureGroup([], {
      attribution: { id: '123' }
    }).addTo(that.map)
    that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: true,
@@ -131,10 +107,30 @@
          // dashSpeed: -10
        }
      },
      minZoom: 10
      pointToLayer: function (geoJsonPoint, latlng) {
        return that.L.canvasMarker(latlng,
          {
            radius: 20,
            img: {
              url: 'assets/images/map/marker-icon.png',
              size: [20, 20]
            }
          })
      }
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
    }).addTo(featureGroup)
    featureGroup.bringToBack()
    return featureGroup
  }

  removeLayer (item) {
    var code = item.code
    var layer = this.geojsonArray[code]
    if (layer) {
      this.map.removeLayer(layer)
      delete this.geojsonArray[code]
    }
  }

  /**

 src/conf/LayerSewers.js

@@ -100,6 +100,7 @@
    code: 'fsss',
    name: '附属设施',
    checked: false, // 默认选中状态
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    filters: [
      {
        code: 'fourlink',
@@ -163,6 +164,7 @@
    code: 'hbss',
    name: '环保设施',
    checked: false, // 默认选中状态
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    filters: [
      {
        code: 'manhole',
@@ -219,6 +221,7 @@
    code: 'pk',
    name: '排口',
    checked: false, // 默认选中状态
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    filters: [
      {
        code: 'dischargeport',
@@ -233,6 +236,7 @@
    code: 'qyxx',
    name: '区域信息',
    checked: false, // 默认选中状态
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    filters: [
      {
        code: 'thirdpartypipe',

 src/conf/MapConfig.js

@@ -27,7 +27,8 @@
  inertia: true,
  zoomControl: false,
  attributionControl: false,
  editable: true
  editable: true,
  preferCanvas: true
}

const mapConfig = {

 src/main.js

@@ -11,6 +11,7 @@
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
Vue.config.productionTip = false

Vue.use(ElementUI, { size: 'small' })

 src/store/modules/map.js

@@ -14,12 +14,20 @@
  selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
  serviceLayerFilters: {}, // 服务图层控制过滤配置
  checkedLayers: {}, // 选中图层对象
  // 图层数据
  datas: {
    sewers: []
  },
  config: config,
  serviceLayers: config.mapConfig.Layers
}
const mutations = {
  setMapObj (state, map) {
    state.map = map
  },
  // 设置污雨水图层数据
  setSewersDatas (state, sewersDatas) {
    state.datas.sewers = sewersDatas
  },
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper
@@ -43,9 +51,7 @@
    state.showServiceLayerFilter = !state.showServiceLayerFilter
  }
}
const actions = {

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