修改图层控制

徐旺旺

2021-02-26 1883c95da4b79da03365e8e0eea6b917e6cb4f10

修改图层控制

 package.json

@@ -25,6 +25,7 @@
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.2",
    "vue": "^2.6.11",
    "vue-count-to": "^1.0.13",

 public/assets/images/map/sewers/¹ÜÏßµã.png

 src/components/helpers/ServiceLayerHelper.js

@@ -5,6 +5,7 @@
import AjaxUtils from '@/utils/AjaxUtils'
import store from '@/store'

var myRenderer = window.L.canvas()
class ServiceLayerHelper {
  constructor (options) {
    this.map = options.map
@@ -69,16 +70,16 @@
    }
  }

  loadGeojsonLayer (url, layer) {
  loadGeojsonLayer (url, item) {
    var matches = this.regex.exec(url)
    var matchValue = layer[matches[1]]
    var code = layer.code
    var matchValue = item[matches[1]]
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.geojsonArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        store.commit('setSewersDatas', res)
        var layer = that.loadGeojson(res)
        var layer = that.loadGeojson(res, item)
        that.geojsonArray[code] = layer
      })
    }
@@ -88,12 +89,10 @@
     * åŠ è½½ç‚¹æ•°æ®
     * @param res
     */
  loadGeojson (res) {
  loadGeojson (res, layer) {
    var that = this
    const featureGroup = that.L.featureGroup([], {
      attribution: { id: '123' }
    }).addTo(that.map)
    that.L.geoJSON(res.features, {
    var icon = layer.icon
    return that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: true,
@@ -111,16 +110,16 @@
          {
            radius: 20,
            img: {
              url: 'assets/images/map/marker-icon.png',
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
              size: [20, 20]
            }
          })
      }
      },
      renderer: myRenderer
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(featureGroup)
    featureGroup.bringToBack()
    return featureGroup
      return layer.feature.properties.linenumber
    }).addTo(that.map)
  }

  removeLayer (item) {

 src/conf/LayerSewers.js

@@ -1,4 +1,3 @@
import { GEOM_TYPE } from './Constants'
// const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
// const APP_GIS_HOST_2 = 'http://localhost:3000'
const APP_GIS_HOST_2 = 'http://192.168.31.226:8088'
@@ -100,63 +99,59 @@
    code: 'fsss',
    name: '附属设施',
    checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs?version=1.0.0&TYPENAME={sname}&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000',
    filters: [
      {
        code: 'fourlink',
        name: '四通',
        sname: 'FourLink',
        sname: '四通',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/四通.png'
      },
      {
        code: 'tee',
        name: '三通',
        sname: 'Tee',
        sname: '三通',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/三通.png'
      },
      {
        code: 'piperack',
        name: '管架(墩)',
        sname: 'PipeRack',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'pipegallery',
        name: '管廊(带)',
        sname: 'PipeGallery',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'pipesegment',
        name: '流向',
        sname: 'ywslx',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'pipeline',
        name: '管网',
        sname: 'pipeline',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'valve',
        name: '阀门',
        sname: 'valve',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/阀门.png'
      },
      {
        code: 'elbow',
        name: '弯头',
        sname: 'Elbow',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/弯头.png'
      }
    ]
  },
@@ -164,56 +159,53 @@
    code: 'hbss',
    name: '环保设施',
    checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs?version=1.0.0&TYPENAME={sname}&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000',
    filters: [
      {
        code: 'manhole',
        name: '窨井',
        sname: '窨井',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/窨井.png'
      },
      {
        code: 'firedike',
        name: '防火堤',
        sname: '防火堤',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'raingate',
        name: '雨篦子',
        sname: '雨篦子',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/雨篦子.png'
      },
      {
        code: 'overflowweir',
        name: '溢流堰',
        sname: '溢流堰',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'chokevalve',
        name: '截流闸',
        sname: '截流闸',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'collectingbasin',
        name: '集水池(罐)',
        sname: '集水池',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/集水池.png'
      },
      {
        code: 'oilseparator',
        name: '隔油池',
        sname: '隔油池',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/隔油池.png'
      }
    ]
  },
@@ -221,14 +213,13 @@
    code: 'pk',
    name: '排口',
    checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs?version=1.0.0&TYPENAME={sname}&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000',
    filters: [
      {
        code: 'dischargeport',
        name: '排放口',
        sname: '排放口',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      }
    ]
  },
@@ -236,154 +227,146 @@
    code: 'qyxx',
    name: '区域信息',
    checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
    url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
    url: APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs?version=1.0.0&TYPENAME={sname}&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000',
    filters: [
      {
        code: 'thirdpartypipe',
        name: '第三方管道',
        sname: '第三方管道',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'firefightingunit',
        name: '消防单位',
        sname: '消防单位',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/消防单位.png'
      },
      {
        code: 'emergencyesources',
        name: '应急物资',
        sname: '应急物资',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'emergencyres',
        name: '社会专业应急救援队伍',
        sname: '专业应急救援',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/社会专业应急救援.png'
      },
      {
        code: 'maintenanceteam',
        name: '维抢修队伍',
        sname: '维抢修队伍',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/社会专业应急救援.png'
      },
      {
        code: 'hospital',
        name: '医院',
        sname: '医院',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/医院.png'
      },
      {
        code: 'pointpreservationzone',
        name: '自然保护区',
        sname: '自然保护区',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/自然保护区.png'
      },
      {
        code: 'pointhydrology',
        name: '水体',
        sname: '水体',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/水体.png'
      },
      {
        code: 'sensitivetarget',
        name: '敏感目标',
        sname: '敏感目标',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/敏感目标.png'
      },
      {
        code: 'envmonunit',
        name: '环境监测单位',
        sname: '环境监测单位',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/环境监测单位.png'
      },
      {
        code: 'pointcontaminants',
        name: '监测点污染物指标信息',
        sname: '污染物指标',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'dischargeportaround',
        name: '排放口周边环境敏感信息',
        sname: '排放口周边环境',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        iconN: 'sewers/排放口周边敏感信息.png'
      },
      {
        code: 'pump',
        name: 'æ³µ',
        sname: 'æ³µ',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/æ³µ.png'
      },
      {
        code: 'liquidlevelmeter',
        name: '液位计',
        sname: '液位计',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/液位计.png'
      },
      {
        code: 'flowmeter',
        name: '流量计',
        sname: '流量计',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/流量计.png'
      },
      {
        code: 'video',
        name: '视频监控配置',
        sname: '视频监控',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'onlinemonitoring',
        name: '在线监测设备配置',
        sname: '在线监测',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'combustiblegas',
        name: '可燃气体报警设备配置',
        sname: '可燃气体报警',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'hydrogensulfide',
        name: 'H2S浓度报警设备配置',
        sname: 'H2S浓度报警',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      },
      {
        code: 'controlpoint',
        name: '管线点',
        sname: '管线点',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        icon: 'sewers/管线点.png'
      },
      {
        code: 'pipesegment',
        name: '管段',
        sname: '管段',
        checked: false,
        geomtype: GEOM_TYPE.POINT
        checked: false
      }
    ]
  }