图层控制

徐旺旺

2020-12-28 fcfa31314ffe78f75e9dcfbef4c376d3cebf1359

图层控制

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,16 +1,25 @@
<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 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 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><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 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>
@@ -19,6 +28,9 @@

<script>
import { mapState, mapMutations } from "vuex";
    import WmsHelper from "../../helpers/WmsHelper";

    var wmsHelper = new WmsHelper()
export default {
  name: "LcServiceLayer",
  components: {},
@@ -96,7 +108,18 @@
        }
    },
    updateWms(){

                var mapConfig = this.mapConfig
                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}, true)
                    }
                }
    }
  },
  watch: {
@@ -118,9 +141,11 @@
    .btn-filter{
        cursor: pointer;
    }

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

        .layerbox{
            width: 100%;
            display:flex;
@@ -131,6 +156,7 @@
                flex-flow: row wrap;
                margin-left: 15px;
                margin-top: 5px;

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

 src/components/helpers/ServiceLayerHelper.js

@@ -3,6 +3,7 @@
 * 创建图层相关的类
 */
import L from 'leaflet'

class ServiceLayerHelper {
    constructor(options){
        this.map = options.map
@@ -12,6 +13,10 @@
        this.tileLayersWMTSArray = []
        this.tileLayersTileArray = []
        this.mapConfig = {}
    }

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

    /**
@@ -56,6 +61,7 @@
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMTSArray.push(layer)
    }

    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
@@ -95,6 +101,7 @@
        this.tileLayersMap.set(options.code , layer)
        this.tileLayersTileArray.push(layer)
    }

    /**
     * 隐藏服务图层
     * @param {*} name 
@@ -105,6 +112,7 @@
            this.map.removeLayer(tileLayer)
        }
    }

    /**
     * 展示服务图层
     * @param {*} name 
@@ -122,12 +130,14 @@
    getTileLayers(){
        return this.tileLayersTileArray
    }

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

    /**
     * 获取所有的WMS服务图层
     */
@@ -149,4 +159,5 @@
        return null
    }
}

export default ServiceLayerHelper

 src/components/helpers/WmsHelper.js

New file
@@ -0,0 +1,74 @@
/**
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
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.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 code = layer.code
                this.addLayer(wms, code)
            }
        }
    }
    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.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)
    }
}

export default WmsHelper

 src/conf/MapConfig.js

@@ -309,56 +309,56 @@
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'四通',
                            code:'fourlink',
                            name:'四通',
                            sname:'四通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'三通',
                            code:'tee',
                            name:'三通',
                            sname:'三通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管架(墩)',
                            code:'piperack',
                            name:'管架(墩)',
                            sname:'管架',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管廊(带)',
                            code:'pipegallery',
                            name:'管廊(带)',
                            sname:'管廊',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'流向',
                            code:'pipesegment',
                            name:'流向',
                            sname:'流向',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管网',
                            code:'pipeline',
                            name:'管网',
                            sname:'管网',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'阀门',
                            code:'valve',
                            name:'阀门',
                            sname:'阀门',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'弯头',
                            code:'elbow',
                            name:'弯头',
                            sname:'弯头',
                            checked: true, // 默认选中状态
@@ -372,49 +372,49 @@
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'窨井',
                            code:'manhole',
                            name:'窨井',
                            sname:'窨井',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'防火堤',
                            code:'firedike',
                            name:'防火堤',
                            sname:'防火堤',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'雨篦子',
                            code:'raingate',
                            name:'雨篦子',
                            sname:'雨篦子',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'溢流堰',
                            code:'overflowweir',
                            name:'溢流堰',
                            sname:'溢流堰',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'截流闸',
                            code:'chokevalve',
                            name:'截流闸',
                            sname:'截流闸',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'集水池(罐)',
                            code:'collectingbasin',
                            name:'集水池(罐)',
                            sname:'集水池',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'隔油池',
                            code:'oilseparator',
                            name:'隔油池',
                            sname:'隔油池',
                            checked: true, // 默认选中状态
@@ -428,7 +428,7 @@
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'排放口',
                            code:'dischargeport',
                            name:'排放口',
                            sname:'排放口',
                            checked: true, // 默认选中状态
@@ -442,147 +442,147 @@
                    checked: true, // 默认选中状态
                    filters:[
                        {
                            code:'第三方管道',
                            code:'thirdpartypipe',
                            name:'第三方管道',
                            sname:'第三方管道',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'消防单位',
                            code:'firefightingunit',
                            name:'消防单位',
                            sname:'消防单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'应急物资',
                            code:'emergencyesources',
                            name:'应急物资',
                            sname:'应急物资',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'社会专业应急救援队伍',
                            code:'emergencyres',
                            name:'社会专业应急救援队伍',
                            sname:'专业应急救援',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'维抢修队伍',
                            code:'maintenanceteam',
                            name:'维抢修队伍',
                            sname:'维抢修队伍',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'医院',
                            code:'hospital',
                            name:'医院',
                            sname:'医院',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'自然保护区',
                            code:'pointpreservationzone',
                            name:'自然保护区',
                            sname:'自然保护区',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'水体',
                            code:'pointhydrology',
                            name:'水体',
                            sname:'水体',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'敏感目标',
                            code:'sensitivetarget',
                            name:'敏感目标',
                            sname:'敏感目标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'环境监测单位',
                            code:'envmonunit',
                            name:'环境监测单位',
                            sname:'环境监测单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'监测点污染物指标信息',
                            code:'pointcontaminants',
                            name:'监测点污染物指标信息',
                            sname:'污染物指标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'排放口周边环境敏感信息',
                            code:'dischargeportaround',
                            name:'排放口周边环境敏感信息',
                            sname:'排放口周边环境',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'泵',
                            code:'pump',
                            name:'泵',
                            sname:'泵',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'液位计',
                            code:'liquidlevelmeter',
                            name:'液位计',
                            sname:'液位计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'流量计',
                            code:'flowmeter',
                            name:'流量计',
                            sname:'流量计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'视频监控配置',
                            code:'video',
                            name:'视频监控配置',
                            sname:'视频监控',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'在线监测设备配置',
                            code:'onlinemonitoring',
                            name:'在线监测设备配置',
                            sname:'在线监测',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'可燃气体报警设备配置',
                            code:'combustiblegas',
                            name:'可燃气体报警设备配置',
                            sname:'可燃气体报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'H2S浓度报警设备配置',
                            code:'hydrogensulfide',
                            name:'H2S浓度报警设备配置',
                            sname:'H2S浓度报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管线点',
                            code:'controlpoint',
                            name:'管线点',
                            sname:'管线点',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管段',
                            code:'pipesegment',
                            name:'管段',
                            sname:'管段',
                            checked: true, // 默认选中状态