修改底图错位的问题。

wangrui

2020-12-22 47db5ff33fbb9df546b24759d52699a68fd4e841

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/* eslint-disable no-debugger */
/**
 * 创建图层相关的类
 */
import L from 'leaflet'
class ServiceLayerHelper {
    constructor(options){
        this.map = options.map
        this.L = options.L
        this.tileLayersMap = new Map()
        this.tileLayersArray = []
        this.mapConfig = {}
    }
 
    /**
     * 根据配置文件初始化业务底图
     */
    initServiceLayers(mapConfig){
        console.log(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)
    }
 
    /**
     * 往地图中加入一个tile服务
     * @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
            }
 
            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)
        }
        
    }
 
    /**
     * 往地图中加入一个WMS服务
     * @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
            }
 
            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)
        }
    }
    /**
     * 隐藏服务图层
     * @param {*} name 
     */
    hideTileLayer(name){
        if(this.tileLayersMap){
            let tileLayer = this.tileLayersMap.get(name)
            this.map.removeLayer(tileLayer)
        }
    }
 
    /**
     * 获取所有的服务图层
     */
    getTileLayers(){
        return this.tilelayersArray
    }
}
export default ServiceLayerHelper