/* eslint-disable no-debugger */ /** * 创建图层相关的类 */ import AjaxUtils from '@/utils/AjaxUtils' import store from '@/store' class ServiceLayerHelper { constructor (options) { this.map = options.map this.L = window.L this.loadedLayersMap = new Map() this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map) this.tileLayersWMTSArray = [] // 初始的WMTS集 this.tileLayersTileArray = [] // 初始的Tile集 this.tileLayersWMSArray = [] // 初始的WMS集 this.geojsonArray = {} // 初始的geojson集 this.layerConfig = {} this.regex = /\{(.+?)\}/g // 匹配{} } getTileLayer (code) { return this.loadedLayersMap.get(code) } /** * 根据配置文件初始化业务底图 */ initServiceLayers (layerConfig) { this.layerConfig = layerConfig this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine) } /** * 按配置文件加载三种不同类型的 * @param {*} mapConfig * @param {*} isAddToMap */ loadLayers (layerConfig, isAddToMap = true) { console.debug('ServiceLayerHelper加载参数:', layerConfig) for (let i = 0, len = layerConfig.length; i < len; ++i) { const opt = layerConfig[i] if (opt.checked) { if (opt.type === 'wmts') { this.loadWmtsLayer(opt, isAddToMap) this.tileLayersWMTSArray.push(opt) } else if (opt.type === 'wms') { this.loadWmsLayer(opt, isAddToMap) this.tileLayersWMSArray.push(opt) } else if (opt.type === 'tile') { this.loadTileLayer(opt, isAddToMap) this.tileLayersTileArray.push(opt) } else if (opt.type === 'geojson') { this.loadGeojsonLayers(opt) } } } } loadGeojsonLayers (options) { var url = options.url var layers = options.layers for (var i = 0; i < layers.length; i++) { var layer = layers[i] var checked = layer.checked if (checked) { this.loadGeojsonLayer(url, layer) } } } loadGeojsonLayer (url, layer) { var matches = this.regex.exec(url) var matchValue = layer[matches[1]] var code = layer.code var newUrl = url.replace(this.regex, matchValue) var that = this if (!that.geojsonArray[code]) { AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) { store.commit('setMapObj', res) var layer = that.loadGeojson(res) that.geojsonArray[code] = layer }) } } /** * 加载点数据 * @param res */ loadGeojson (res) { var that = this const featureGroup = that.L.featureGroup([], { attribution: { id: '123' } }).addTo(that.map) 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 } }, pointToLayer: function (geoJsonPoint, latlng) { return that.L.canvasMarker(latlng, { radius: 20, img: { url: 'assets/images/map/marker-icon.png', size: [20, 20] } }) } }).bindPopup(function (layer) { // return layer.feature.properties.linenumber }).addTo(featureGroup) featureGroup.bringToBack() return featureGroup } removeLayer (item) { var code = item.code var layer = this.geojsonArray[code] if (layer) { this.map.removeLayer(layer) delete this.geojsonArray[code] } } /** * 往地图中加入一个WMTS服务 * @param {}} options * @param {*} isAddToMap */ loadWmtsLayer (options, isAddToMap = true) { const layer = this.L.tileLayer(options.url, options.option) layer.config = options if (isAddToMap) { layer.addTo(this.map) } this.loadedLayersMap.set(options.code, layer) } /** * 往地图中加入一个WMS服务 * @param {}} options * @param {*} isAddToMap */ loadWmsLayer (options, isAddToMap = true) { const layer = this.L.tileLayer.wms(options.url, options.option) layer.config = options if (isAddToMap) { layer.addTo(this.tileLayerWmslayerGroup) } this.loadedLayersMap.set(options.code, layer) } /** * 往地图中加入一个TILE服务 * @param {}} options * @param {*} isAddToMap */ loadTileLayer (options, isAddToMap = true) { const layer = this.L.tileLayer(options.url, { layers: options.layers || 'all', // country format: options.format || 'image/png', transparent: options.true || true, crs: options.crs || this.L.CRS.EPSG4326, maxZoom: options.maxZoom || 21, minZoom: options.minZoom || 1, zoomOffset: options.zoomOffset || 0 }) layer.config = options if (isAddToMap) { layer.addTo(this.map) } this.loadedLayersMap.set(options.code, layer) } /** * 隐藏服务图层 * @param {*} name */ hideTileLayer (code) { if (this.loadedLayersMap) { const tileLayer = this.loadedLayersMap.get(code) this.map.removeLayer(tileLayer) } } /** * 展示服务图层 * @param {*} name */ showTileLayer (code) { if (this.loadedLayersMap) { const tileLayer = this.loadedLayersMap.get(code) this.map.addLayer(tileLayer) } } /** * 得到选中的图层列表 * @param mapConfig * @returns {[]} */ getCheckedLayers (serviceLayers) { var checkedLayers = [] for (var i = 0; i < serviceLayers.length; i++) { var serviceLayer = serviceLayers[i] var layers = serviceLayer.layers for (var j = 0; j < layers.length; j++) { var layer = layers[j] var checked = layer.checked if (checked) { checkedLayers.push(layer) } } } return checkedLayers } /** * 获取所有的TILE服务图层 */ getTileLayers () { return this.tileLayersTileArray } /** * 获取所有的WMTS服务图层 */ getWmtsLayers () { return this.tileLayersWMTSArray } /** * 获取所有的WMS服务图层 */ getWmsLayers () { return this.tileLayersWMSArray } /** * 根据线的选择,得到点的可选择图层数据 */ getFiltersGroup () { } /** * 通过code查找WMS的服务配置 * @param {} code wms服务配置的code */ getWMSConfig (code) { const 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