From 4bf99ece0279cedde3b1f6c888b64265534640c0 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期日, 07 三月 2021 12:47:02 +0800
Subject: [PATCH] 修改图层控制
---
src/components/helpers/ServiceLayerHelper.js | 445 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 353 insertions(+), 92 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 128a827..a38ef6c 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -2,115 +2,376 @@
/**
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
-import L from 'leaflet'
-class ServiceLayerHelper {
- constructor(options){
- this.map = options.map
- this.L = options.L
- this.tileLayersMap = new Map()
- this.tileLayersArray = []
- this.mapConfig = {}
- }
+import AjaxUtils from '@/utils/AjaxUtils'
+import store from '@/store'
+import styles from '@/conf/Styles'
- /**
+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 = [] // 鍒濆鐨刉MTS闆�
+ this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
+ this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
+ this.layerArray = {} // key涓洪厤缃殑code锛屽姞杞界殑鍥惧眰瀵硅薄锛�
+ this.regex = /\{(.+?)\}/g // 鍖归厤{}
+ this.popupComp = null
+ }
+
+ getTileLayer (code) {
+ return this.loadedLayersMap.get(code)
+ }
+
+ getByLayerId (layerId) {
+ for (var k in this.layerArray) {
+ var layer = this.layerArray[k]
+ var geojson = layer.toGeoJSON()
+ var features = geojson.features
+ for (var j = 0; j < features.length; j++) {
+ var feature = features[j]
+ if (feature.id === layerId) {
+ return layer
+ }
+ }
+ }
+ return null
+ }
+
+ initDisplayZoom (layerConfig) {
+ var that = this
+ that.map.on('zoomend ', function (e) {
+ const zoom = that.map.getZoom()
+ for (var i = 0, l = layerConfig.length; i < l; i++) {
+ var config = layerConfig[i]
+ var layers = config.layers
+ for (var j = 0; j < layers.length; j++) {
+ var layer = layers[j]
+ if (layer.minZoom) {
+ if (zoom > layer.minZoom) {
+ var layerObj = that.layerArray[layer.code]
+ layerObj && layerObj.addTo(that.map)
+ } else {
+ that.removeLayer(layer)
+ }
+ }
+ }
+ }
+ })
+ }
+
+ /**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
- initServiceLayers(mapConfig){
- console.log(mapConfig)
- this.mapConfig = mapConfig
+ initServiceLayers (layerConfig, popupComp) {
+ this.layerConfig = layerConfig
+ this.popupComp = popupComp
+ store.commit('clearSewersDatas')
+ store.commit('clearSewersLayers')
+ this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.layerSewersPoint)
+ }
- this._loadLayers(mapConfig)
- }
-
- _loadLayers(mapConfig, isAddToMap = true){
- console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�',mapConfig)
- this.loadTileLayer(mapConfig, isAddToMap)
- this.loadWmtsLayer(mapConfig, isAddToMap)
- this.loadWmtsLayer(mapConfig, isAddToMap)
- }
-
- /**
- * 寰�鍦板浘涓姞鍏ヤ竴涓猼ile鏈嶅姟
- * @param {}} options
- * @param {*} isAddToMap
+ /**
+ * 鎸夐厤缃枃浠跺姞杞戒笁绉嶄笉鍚岀被鍨嬬殑
+ * @param {*} mapConfig
+ * @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)
- }
+ loadLayers (layerConfig, isAddToMap = true) {
+ console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', layerConfig)
+ for (let i = 0, len = layerConfig.length; i < len; ++i) {
+ const opt = layerConfig[i]
+ 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)
+ }
+ }
+ }
+
+ /**
+ * 璇锋眰wfs鏁版嵁
+ * @param url
+ * @param item
+ */
+ loadGeojsonLayer (url, item) {
+ var matches = this.regex.exec(url)
+ var matchValue = item[matches[1]]
+ var code = item.code
+ var newUrl = url.replace(this.regex, matchValue)
+ var that = this
+ if (!that.layerArray[code]) {
+ AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
+ store.commit('addSewersDatas', res)
+ var layer = that.loadGeojson(res, item)
+ that.layerArray[code] = layer
+ })
+ } else {
+ that.layerArray[code].addTo(that.map)
+ }
+ }
+
+ /**
+ * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
+ * @param res
+ */
+ loadGeojson (res, opt) {
+ var that = this
+ var icon = opt.icon
+ const geojson = that.L.geoJSON(res.features, {
+ style: function (feature) {
+ return {
+ fill: styles.defaultLineStyle.fill,
+ weight: styles.defaultLineStyle.weight,
+ fillColor: styles.defaultLineStyle.fillColor,
+ color: styles.defaultLineStyle.color,
+ fillOpacity: styles.defaultLineStyle.fillOpacity,
+ opacity: styles.defaultLineStyle.opacity
+ // dashArray: styles.defaultLineStyle.dashArray,
+ // dashSpeed: styles.defaultLineStyle.dashSpeed
+ }
+ },
+ pointToLayer: function (geoJsonPoint, latlng) {
+ return that.L.canvasMarker(latlng,
+ {
+ img: {
+ // url: 'assets/images/map/marker-icon.png',
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
+ }
+ })
+ }
+ }).bindPopup(function (layer) {
+ that.popupComp.setDatas(layer)
+ that.popupComp.setShow()
+ return that.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .bindTooltip(function (layer) {
+ const nameId = layer.feature.id
+ let name = ''
+ if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1 || nameId.indexOf('绐ㄤ簳') !== -1) {
+ name = layer.feature.properties.pointnumber
+ } else {
+ name = layer.feature.properties.name
+ }
+ if (name === undefined) {
+ name = ''
+ }
+ return name
+ }, { direction: 'bottom', offset: [0, 15], sticky: true })
+ .on('mouseover', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: 8, color: '#00ffff' })
+ } else if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: [25, 25]
+ }
+ })
+
+ layer.bringToFront()
+ }
+ }).on('mouseout', function (e) {
+ const layer = e.layer
+ const type = e.layer.feature.geometry.type
+ if (type === 'LineString' || type === 'MultiLineString') {
+ layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
+ }
+ if (type === 'Point' || type === 'MultiPoint') {
+ layer.setStyle({
+ img: {
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
+ }
+ })
+ }
+ }).addTo(that.map)
+ store.commit('addSewersDatas', geojson)
+ if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
+ geojson.bringToBack()
+ } else {
+ geojson.bringToFront()
+ }
+ return geojson
+ }
+
+ removeLayer (item) {
+ var layer = this.layerArray[item.code]
+ layer && this.map.removeLayer(layer)
+ }
+
+ /**
+ * 寰�鍦板浘涓姞鍏ヤ竴涓猈MTS鏈嶅姟
+ * @param {}} options
+ * @param {*} isAddToMap
+ */
+ loadWmtsLayer (options, isAddToMap = true) {
+ const layer = this.L.tileLayer(options.url, options.option)
+ layer.config = options
+ var checked = options.checked
+ if (checked) {
+ if (isAddToMap) {
+ layer.addTo(this.map)
+ }
+ this.loadedLayersMap.set(options.code, layer)
+ }
+ }
+
+ /**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MS鏈嶅姟
- * @param {}} options
- * @param {*} isAddToMap
+ * @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
- }
+ loadWmsLayer (options, isAddToMap = true) {
+ const layer = this.L.tileLayer.wms(options.url, options.option)
+ layer.config = options
- 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)
- }
-
+ var checked = options.checked
+ if (checked) {
+ if (isAddToMap) {
+ layer.addTo(this.tileLayerWmslayerGroup)
+ }
+ this.loadedLayersMap.set(options.code, layer)
}
+ }
- /**
- * 寰�鍦板浘涓姞鍏ヤ竴涓猈MS鏈嶅姟
- * @param {}} options
- * @param {*} isAddToMap
+ /**
+ * 寰�鍦板浘涓姞鍏ヤ竴涓猅ILE鏈嶅姟
+ * @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
- }
+ 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
- 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.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
+ }
- hideTileLayer(name){
- if(this.tileLayersMap){
- let tileLayer = this.tileLayersMap.get(name)
- this.map.removeLayer(tileLayer)
- }
- }
+ /**
+ * 鑾峰彇鎵�鏈夌殑TILE鏈嶅姟鍥惧眰
+ */
+ getTileLayers () {
+ return this.tileLayersTileArray
+ }
- getTileLayers(){
- return this.tilelayersArray
+ /**
+ * 鑾峰彇鎵�鏈夌殑WMTS鏈嶅姟鍥惧眰
+ */
+ getWmtsLayers () {
+ return this.tileLayersWMTSArray
+ }
+
+ /**
+ * 鑾峰彇鎵�鏈夌殑WMS鏈嶅姟鍥惧眰
+ */
+ getWmsLayers () {
+ return this.tileLayersWMSArray
+ }
+
+ /**
+ * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁
+ */
+ getFiltersGroup () {
+
+ }
+
+ /**
+ * 閫氳繃code鏌ユ壘WMS鐨勬湇鍔￠厤缃�
+ * @param {} code wms鏈嶅姟閰嶇疆鐨刢ode
+ */
+ 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
--
Gitblit v1.8.0