服务图层，动态生成

wangrui

2020-12-24 243c4782ce378d9238a60ae8cd41723657675d69

服务图层，动态生成

 src/components/LayerController/modules/LcServiceLayer.vue

New file
@@ -0,0 +1,119 @@
<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" :value="item.code" @change="swAllLayers"/>{{item.name}}</div>
            <div class="layerbox-item">
                <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" name="wmsSublayers" :value="item.code" @change="swAllLayers"/>{{itm.sname}}</div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcServiceLayer",
  components: {},
  data() {
    return {
      selectedLineLayer: [], // 选中的管线图层
      selectedSubsidiaryLayer: [], // 选中的附属要素
      serviceTileLayerList: [], // Tile图层列表
      serviceWmtsLayerList: [], // Wmts图层列表
      serviceWmsLayerList: [] // 图层列表
    };
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper;
      },
    }),
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods: {
    ...mapMutations([]),
    swAllLayers(){

    },
    swTileLayer(){
        console.log('该TILE方法未实现！')
    },
    swWmtsLayer(){
        console.log('该WMTS方法未实现！')
    },
    swWmsLayer(){
        
    },
    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)
            }
        }
    }
  },
  watch: {
    serviceLayerHelper(newVal) {
      if (newVal != null) {
        this.updateServiceLayerList();
      }
    },
  },
};
</script>

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

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

            .layerbox-item{
                display:flex;
                flex-flow: row;
                .basemap-layer-item{
                    width: 50%;
                }
            }
        }
    }
}

</style>

 src/components/helpers/ServiceLayerHelper.js

@@ -8,7 +8,9 @@
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
        this.tileLayersWMSArray = []
        this.tileLayersWMTSArray = []
        this.tileLayersTileArray = []
        this.mapConfig = {}
    }

@@ -30,11 +32,11 @@
        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)
                this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }else if(opt.type === 'wms') {
                this.loadWmsLayer(opt, isAddToMap)
                this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }else if(opt.type === 'tile') {
                this.loadTileLayer(opt, isAddToMap)
                this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }
        }
    }
@@ -44,28 +46,30 @@
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmtsLayer(options, isAddToMap = true) {
    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.tileLayersArray.push(layer)
        this.tileLayersWMTSArray.push(layer)
    }
    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmsLayer(options, isAddToMap = true) {
    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.tileLayersArray.push(layer)
        this.tileLayersWMSArray.push(layer)
    }

    /**
@@ -73,7 +77,7 @@
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadTileLayer(options, isAddToMap = true) {
    loadTileLayer(options, isAddToMap = true, config) {
        const layer =this.L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
@@ -83,12 +87,13 @@
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
        layer.config = config
    
        if(isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code , layer)
        this.tileLayersArray.push(layer)
        this.tileLayersTileArray.push(layer)
    }
    /**
     * 隐藏服务图层
@@ -112,10 +117,36 @@
    }

    /**
     * 获取所有的服务图层
     * 获取所有的TILE服务图层
     */
    getTileLayers(){
        return this.tilelayersArray
        return this.tileLayersTileArray
    }
    /**
     * 获取所有的WMTS服务图层
     */
    getWmtsLayers(){
        return this.tileLayersWMTSArray
    }
    /**
     * 获取所有的WMS服务图层
     */
    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
    }
}
export default ServiceLayerHelper

 src/conf/MapConfig.js

@@ -17,6 +17,12 @@
// 自定义主机配置
const BLUEMAP_HOST = APP_GIS_HOST // 公司发布的地图服务，用于测试的地址

// 几何类型常量
const GEOM_POINT = 'POINT'
const GEOM_POLYLINE = 'POLYLINE'
const GEOM_POLYGON = 'POLYGON'
console.log(GEOM_POINT, GEOM_POLYLINE, GEOM_POLYGON)

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
@@ -200,17 +206,19 @@
            icon_deactived: '',
            type:'wmts',
            url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
            inLegend: false,
            option:{
                zoomOffset: 1
            }
        },
        {
            code:'pipeline',
            name:'管网',
            name:'管网数据',
            icon_actived: '',
            icon_deactived: '',
            type:'wms',
            url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
            inLegend: true,
            option:{
                layers:'all',
                styles:'', // Comma-separated list of WMS styles.
@@ -219,7 +227,317 @@
                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:'雨水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'含油污水线',
                    sname:'含油污水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'含盐污水线',
                    sname:'含盐污水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'含碱污水线',
                    sname:'含碱污水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'排口',
                    sname:'排口',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'事故水线',
                    sname:'事故水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'循环水线',
                    sname:'循环水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'净化水线',
                    sname:'净化水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'生活污水',
                    sname:'生活污水',
                    filter:{}
                },
                {
                    code:'rainline',
                    name:'区域信息',
                    sname:'区域信息',
                    filter:{}
                },
            ],
            filtersGroup:[
                {
                    code:'fsss',
                    name:'附属设施',
                    filters:[
                        {
                            code:'四通',
                            name:'四通',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'三通',
                            name:'三通',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'管架(墩)',
                            name:'管架(墩)',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'管廊(带)',
                            name:'管廊(带)',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'流向',
                            name:'流向',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'管网',
                            name:'管网',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'阀门',
                            name:'阀门',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'弯头',
                            name:'弯头',
                            sname:'',
                            geom: GEOM_POINT
                        },
                    ]
                },
                {
                    code:'hbss',
                    name:'环保设施',
                    filters:[
                        {
                            code:'窨井',
                            name:'窨井',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'防火堤',
                            name:'防火堤',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'雨篦子',
                            name:'雨篦子',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'溢流堰',
                            name:'溢流堰',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'截流闸',
                            name:'截流闸',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'集水池(罐)',
                            name:'集水池(罐)',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'隔油池',
                            name:'隔油池',
                            sname:'',
                            geom: GEOM_POINT
                        },
                    ]
                },
                {
                    code:'pk',
                    name:'排口',
                    filters:[
                        {
                            code:'排放口',
                            name:'排放口',
                            sname:'',
                            geom: GEOM_POINT
            }
                    ]
                },
                {
                    code:'qyxx',
                    name:'区域信息',
                    filters:[
                        {
                            code:'第三方管道',
                            name:'第三方管道',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'消防单位',
                            name:'消防单位',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'应急物资',
                            name:'应急物资',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'社会专业应急救援队伍',
                            name:'社会专业应急救援队伍',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'维抢修队伍',
                            name:'维抢修队伍',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'医院',
                            name:'医院',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'自然保护区',
                            name:'自然保护区',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'水体',
                            name:'水体',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'敏感目标',
                            name:'敏感目标',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'环境监测单位',
                            name:'环境监测单位',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'监测点污染物指标信息',
                            name:'监测点污染物指标信息',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'排放口周边环境敏感信息',
                            name:'排放口周边环境敏感信息',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'泵',
                            name:'泵',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'液位计',
                            name:'液位计',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'流量计',
                            name:'流量计',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'视频监控配置',
                            name:'视频监控配置',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'在线监测设备配置',
                            name:'在线监测设备配置',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'可燃气体报警设备配置',
                            name:'可燃气体报警设备配置',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'H2S浓度报警设备配置',
                            name:'H2S浓度报警设备配置',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'管线点',
                            name:'管线点',
                            sname:'',
                            geom: GEOM_POINT
                        },
                        {
                            code:'管段',
                            name:'管段',
                            sname:'',
                            geom: GEOM_POINT
                        }
                    ]
                }
            ]
        }
    ]
}

 src/views/MapTemplate.vue

@@ -3,6 +3,8 @@
        <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>
        <monitor-panel></monitor-panel>
  </div>
@@ -14,12 +16,13 @@
import mapConfig from '@/conf/MapConfig'
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations } from 'vuex'

export default {
  name: 'MapTemplate',
  components: {SgisLayerController, MonitorPanel, LcBasemap},
  components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer},
  data(){
    return {
      basemapHelper: {},
@@ -73,5 +76,10 @@
    height: 100%;
    width: 100%;
  }
  .barline{
    width: 100%;
    height: 1px;
    background-color: #0661AE;
  }
}
</style>>