图层控制

徐旺旺

2020-12-28 fcfa31314ffe78f75e9dcfbef4c376d3cebf1359

 src/components/helpers/ServiceLayerHelper.js

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

class ServiceLayerHelper {
    constructor(options){
    constructor(options) {
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
        this.tileLayersWMSArray = []
        this.tileLayersWMTSArray = []
        this.tileLayersTileArray = []
        this.mapConfig = {}
    }

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

    /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig){
        console.log(mapConfig)
    initServiceLayers(mapConfig) {
        this.mapConfig = mapConfig

        this._loadLayers(mapConfig)
    }

    _loadLayers(mapConfig, isAddToMap = true){
        console.debug('ServiceLayerHelper加载参数：',mapConfig)
        this.loadTileLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
    /**
     * 按配置文件加载三种不同类型的
     * @param {*} mapConfig
     * @param {*} isAddToMap
     */
    _loadLayers(mapConfig, isAddToMap = true) {
        console.debug('ServiceLayerHelper加载参数：', mapConfig)
        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, mapConfig.mapConfig.ServiceLayers[i])
            } else if (opt.type === 'wms') {
                this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            } else if (opt.type === 'tile') {
                this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
            }
        }
    }

    /**
     * 往地图中加入一个tile服务
     * @param {}} options 
     * @param {*} isAddToMap 
     * 往地图中加入一个WMTS服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadWmtsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wmts') {
                continue
            }
            const layer = this.L.tileLayer(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        }
    }
    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wms') {
                continue
            }
    loadWmtsLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer(options.url, options.option);
        layer.config = config

            const layer =this.L.tileLayer.wms(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        if (isAddToMap) {
            layer.addTo(this.map)
        }
        
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMTSArray.push(layer)
    }

    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadTileLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'tile') {
                continue
            }
    loadWmsLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer.wms(options.url, options.option);
        layer.config = config

            const layer =this.L.tileLayer(opt.url, {
                layers: opt.layers || 'all',//country
                format: opt.format || "image/png",
                transparent: opt.true || true,
                crs:opt.crs || L.CRS.EPSG4326,
                maxZoom: opt.maxZoom || 21,
                minZoom: opt.minZoom || 1,
                zoomOffset: opt.zoomOffset || 0
            });
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code , layer)
            this.tileLayersArray.push(layer)
        if (isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersWMSArray.push(layer)
    }

    hideTileLayer(name){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(name)
    /**
     * 往地图中加入一个TILE服务
     * @param {}} options
     * @param {*} isAddToMap
     */
    loadTileLayer(options, isAddToMap = true, config) {
        const layer = this.L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs: options.crs || L.CRS.EPSG4326,
            maxZoom: options.maxZoom || 21,
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
        layer.config = config

        if (isAddToMap) {
            layer.addTo(this.map)
        }
        this.tileLayersMap.set(options.code, layer)
        this.tileLayersTileArray.push(layer)
    }

    /**
     * 隐藏服务图层
     * @param {*} name
     */
    hideTileLayer(code) {
        if (this.tileLayersMap) {
            let tileLayer = this.tileLayersMap.get(code)
            this.map.removeLayer(tileLayer)
        }
    }

    getTileLayers(){
        return this.tilelayersArray
    /**
     * 展示服务图层
     * @param {*} name
     */
    showTileLayer(code) {
        if (this.tileLayersMap) {
            let tileLayer = this.tileLayersMap.get(code)
            this.map.addLayer(tileLayer)
        }
    }

    /**
     * 获取所有的TILE服务图层
     */
    getTileLayers() {
        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