修改图层控制

徐旺旺

2021-02-23 239a629af8c75b80d5c0e50fcd27b932655b7b04

修改图层控制

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -7,8 +7,8 @@
                </div>
                <div class="content">
                    <div v-for="filter in item.filters" :key="filter.code">
                        <input type="checkbox" :value="filter.code" :checked="filter.checked"><label
                            :title="filter.name">{{filter.sname}}</label>
                        <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(filter)"><label
                            :title="filter.name">{{filter.name}}</label>
                    </div>
                </div>
            </div>
@@ -18,7 +18,6 @@

<script>
import { mapMutations } from 'vuex'
import WmsHelper from '../../helpers/WmsHelper'

export default {
  name: 'LcServiceLayerFilter',
@@ -56,21 +55,13 @@
    ...mapMutations([]),
    swAllSubFilter (item) {
      item.checked = !item.checked
      for (let i = 0, len = item.filters.length; i < len; ++i) {
        item.filters[i].checked = item.checked
      }
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, true)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
      console.log(item)
      // window.serviceLayerHelper.loadLayers()
    },
    swSubFilter (item) {
      item.checked = !item.checked
      console.log(item)
      // window.serviceLayerHelper.loadLayers()
    }
  }
}

 src/components/helpers/ServiceLayerHelper.js

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

class ServiceLayerHelper {
  constructor (options) {
@@ -27,7 +28,7 @@
     */
  initServiceLayers (layerConfig) {
    this.layerConfig = layerConfig
    this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
  }

  /**
@@ -35,7 +36,7 @@
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
  _loadLayers (layerConfig, isAddToMap = true) {
  loadLayers (layerConfig, isAddToMap = true) {
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
@@ -64,35 +65,78 @@
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      var geomtype = layer.geomtype
      if (!checked) {
        continue
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        // let geojsondata =    L.geoJSON(test.features,{
        that.L.geoJSON(res.features, {
          style: function (feature) {
            return {
              fill: true,
              weight: 2,
              fillColor: '#06cccc',
              color: '#06cccc',
              fillOpacity: 0.2,
              opacity: 0.8,
              dashArray: '10,4',
              dashSpeed: -10
            }
          },
          minZoom: 10
        }).bindPopup(function (layer) {
          // return layer.feature.properties.linenumber
        }).addTo(that.map)
        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
        }
      })
    }
  }

  /**
   * 加载点数据
   * @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, {
      style: function (feature) {
        return {
          fill: true,
          weight: 2,
          fillColor: '#06cccc',
          color: '#06cccc',
          fillOpacity: 0.2,
          opacity: 0.8,
          dashArray: '10,4',
          dashSpeed: -10
        }
      },
      minZoom: 10
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
  }

  /**
     * 往地图中加入一个WMTS服务
     * @param {}} options
     * @param {*} isAddToMap

 src/conf/Constants.js

New file
@@ -0,0 +1,5 @@
export const GEOM_TYPE = {
  POINT: 'point',
  LINE: 'line',
  POLYGON: 'polygon'
}

 src/conf/LayerSewers.js

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

const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
const myRenderer = L.canvas()// 需要使用画布渲染的使用 renderer: myRenderer 作为参数
import { GEOM_TYPE } from './Constants'
// const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
const APP_GIS_HOST_2 = 'http://localhost:3000'
export const LayerSewersLine = {
  code: 'pipeline',
  name: '管网数据',
  icon_actived: '',
  icon_deactived: '',
  type: 'geojson',
  // url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
  url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
  inLegend: true,
  checked: true,
  option: {
    styles: {
      fill: true,
      weight: 2,
      fillColor: '#06cccc',
      color: '#06cccc',
      fillOpacity: 0.2,
      opacity: 0.8
      // dashArray:'10,4',
      // dashSpeed:-10,
    },
    renderer: myRenderer

  },
  layers: [
    {
      code: 'rainline',
@@ -33,6 +15,7 @@
      sname: 'pipeline', // 表名
      checked: true, // 默认选中状态
      filter: {},
      zoom: 10, // 在指定级别显示
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
    {
@@ -114,55 +97,63 @@
  {
    code: 'fsss',
    name: '附属设施',
    checked: true, // 默认选中状态
    checked: false, // 默认选中状态
    filters: [
      {
        code: 'fourlink',
        name: '四通',
        sname: 'FourLink',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'tee',
        name: '三通',
        sname: 'Tee',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'piperack',
        name: '管架(墩)',
        sname: 'PipeRack',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pipegallery',
        name: '管廊(带)',
        sname: 'PipeGallery',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pipesegment',
        name: '流向',
        sname: 'ywslx',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pipeline',
        name: '管网',
        sname: 'pipeline',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'valve',
        name: '阀门',
        sname: 'valve',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'elbow',
        name: '弯头',
        sname: 'Elbow',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      }
    ]
  },
@@ -175,43 +166,50 @@
        code: 'manhole',
        name: '窨井',
        sname: '窨井',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'firedike',
        name: '防火堤',
        sname: '防火堤',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'raingate',
        name: '雨篦子',
        sname: '雨篦子',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'overflowweir',
        name: '溢流堰',
        sname: '溢流堰',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'chokevalve',
        name: '截流闸',
        sname: '截流闸',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'collectingbasin',
        name: '集水池(罐)',
        sname: '集水池',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'oilseparator',
        name: '隔油池',
        sname: '隔油池',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      }
    ]
  },
@@ -224,7 +222,8 @@
        code: 'dischargeport',
        name: '排放口',
        sname: '排放口',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      }
    ]
  },
@@ -237,127 +236,148 @@
        code: 'thirdpartypipe',
        name: '第三方管道',
        sname: '第三方管道',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'firefightingunit',
        name: '消防单位',
        sname: '消防单位',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'emergencyesources',
        name: '应急物资',
        sname: '应急物资',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'emergencyres',
        name: '社会专业应急救援队伍',
        sname: '专业应急救援',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'maintenanceteam',
        name: '维抢修队伍',
        sname: '维抢修队伍',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'hospital',
        name: '医院',
        sname: '医院',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pointpreservationzone',
        name: '自然保护区',
        sname: '自然保护区',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pointhydrology',
        name: '水体',
        sname: '水体',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'sensitivetarget',
        name: '敏感目标',
        sname: '敏感目标',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'envmonunit',
        name: '环境监测单位',
        sname: '环境监测单位',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pointcontaminants',
        name: '监测点污染物指标信息',
        sname: '污染物指标',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'dischargeportaround',
        name: '排放口周边环境敏感信息',
        sname: '排放口周边环境',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pump',
        name: '泵',
        sname: '泵',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'liquidlevelmeter',
        name: '液位计',
        sname: '液位计',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'flowmeter',
        name: '流量计',
        sname: '流量计',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'video',
        name: '视频监控配置',
        sname: '视频监控',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'onlinemonitoring',
        name: '在线监测设备配置',
        sname: '在线监测',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'combustiblegas',
        name: '可燃气体报警设备配置',
        sname: '可燃气体报警',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'hydrogensulfide',
        name: 'H2S浓度报警设备配置',
        sname: 'H2S浓度报警',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'controlpoint',
        name: '管线点',
        sname: '管线点',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      },
      {
        code: 'pipesegment',
        name: '管段',
        sname: '管段',
        checked: false
        checked: false,
        geomtype: GEOM_TYPE.POINT
      }
    ]
  }

 src/conf/Styles.js

New file
@@ -0,0 +1,24 @@
export const LineStyles = {
  pipeline: {
    fill: true,
    weight: 2,
    fillColor: '#06cccc',
    color: '#06cccc',
    fillOpacity: 0.2,
    opacity: 0.8,
    dashArray: '10,4',
    dashSpeed: -10
  }
}
export const PointStyles = {
  pipeline: {
    fill: true,
    weight: 2,
    fillColor: '#06cccc',
    color: '#06cccc',
    fillOpacity: 0.2,
    opacity: 0.8,
    dashArray: '10,4',
    dashSpeed: -10
  }
}