From 239a629af8c75b80d5c0e50fcd27b932655b7b04 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期二, 23 二月 2021 18:09:46 +0800
Subject: [PATCH] 修改图层控制
---
src/components/helpers/ServiceLayerHelper.js | 151 ++++++++++++++++++++++++++++++++++++++------------
1 files changed, 114 insertions(+), 37 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 2ff5042..cbfdedd 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -2,6 +2,8 @@
/**
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
+import AjaxUtils from '@/utils/AjaxUtils'
+import { GEOM_TYPE } from '../../conf/Constants'
class ServiceLayerHelper {
constructor (options) {
@@ -12,7 +14,9 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.mapConfig = {}
+ this.geojsonArray = [] // 鍒濆鐨刧eojson闆�
+ this.layerConfig = {}
+ this.regex = /\{(.+?)\}/g // 鍖归厤{}
}
getTileLayer (code) {
@@ -22,9 +26,9 @@
/**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
- initServiceLayers (mapConfig) {
- this.mapConfig = mapConfig
- this._loadLayers(mapConfig)
+ initServiceLayers (layerConfig) {
+ this.layerConfig = layerConfig
+ this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
}
/**
@@ -32,30 +36,104 @@
* @param {*} mapConfig
* @param {*} isAddToMap
*/
- _loadLayers (mapConfig, isAddToMap = true) {
- console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', mapConfig)
- for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
- const opt = mapConfig.mapConfig.ServiceLayers[i]
- this.setArray(opt)
- if (opt.type === 'wmts') {
- opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
- } else if (opt.type === 'wms') {
- opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
- } else if (opt.type === 'tile') {
- opt.checked && this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
+ 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.loadGeojson(opt)
+ }
}
}
}
- setArray (opt) {
- var type = opt.type
- if (type === 'wmts') {
- this.tileLayersWMTSArray.push(opt)
- } else if (type === 'wms') {
- this.tileLayersWMSArray.push(opt)
- } else if (type === 'tile') {
- this.tileLayersTileArray.push(opt)
+ loadGeojson (options) {
+ var url = options.url
+ var layers = options.layers
+ var matches = this.regex.exec(url)
+ for (var i = 0; i < layers.length; i++) {
+ var layer = layers[i]
+ var matchValue = layer[matches[1]]
+ var checked = layer.checked
+ var geomtype = layer.geomtype
+ if (!checked) {
+ continue
+ }
+ var newUrl = url.replace(this.regex, matchValue)
+ var that = this
+ AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
+ switch (geomtype) {
+ case GEOM_TYPE.POINT :
+ that.loadPointGeojson(res)
+ break
+ case GEOM_TYPE.LINE :
+ that.loadLineGeojson(res)
+ break
+ case GEOM_TYPE.POLYGON :
+ break
+ default:
+ that.loadLineGeojson(res)
+ break
+ }
+ })
}
+ }
+
+ /**
+ * 鍔犺浇鐐规暟鎹�
+ * @param res
+ */
+ loadPointGeojson (res) {
+ this.L.geoJSON(res.features, {
+ pointToLayer: function (geoJsonPoint, latlng) {
+ return this.L.canvasMarker(latlng,
+ {
+ radius: 20,
+ prevLatlng: this.L.latLng(51.503, -0.09), // previous point
+ img: {
+ url: './images/beng.png',
+ size: [20, 20],
+ rotate: 90
+ }
+ })
+ }
+ }).bindPopup(function (layer) {
+ // return layer.feature.properties.linenumber
+ }).addTo(this.map)
+ }
+
+ /**
+ * 鍔犺浇绾挎暟鎹�
+ * @param res
+ */
+ loadLineGeojson (res) {
+ this.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
+ }
+ },
+ minZoom: 10
+ }).bindPopup(function (layer) {
+ // return layer.feature.properties.linenumber
+ }).addTo(this.map)
}
/**
@@ -63,9 +141,9 @@
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmtsLayer (options, isAddToMap = true, config) {
+ loadWmtsLayer (options, isAddToMap = true) {
const layer = this.L.tileLayer(options.url, options.option)
- layer.config = config
+ layer.config = options
if (isAddToMap) {
layer.addTo(this.map)
@@ -78,9 +156,9 @@
* @param {}} options
* @param {*} isAddToMap
*/
- loadWmsLayer (options, isAddToMap = true, config) {
+ loadWmsLayer (options, isAddToMap = true) {
const layer = this.L.tileLayer.wms(options.url, options.option)
- layer.config = config
+ layer.config = options
if (isAddToMap) {
layer.addTo(this.tileLayerWmslayerGroup)
@@ -93,7 +171,7 @@
* @param {}} options
* @param {*} isAddToMap
*/
- loadTileLayer (options, isAddToMap = true, config) {
+ loadTileLayer (options, isAddToMap = true) {
const layer = this.L.tileLayer(options.url, {
layers: options.layers || 'all', // country
format: options.format || 'image/png',
@@ -103,7 +181,7 @@
minZoom: options.minZoom || 1,
zoomOffset: options.zoomOffset || 0
})
- layer.config = config
+ layer.config = options
if (isAddToMap) {
layer.addTo(this.map)
@@ -134,13 +212,12 @@
}
/**
- * 寰楀埌閫変腑鐨勫浘灞傚垪琛�
- * @param mapConfig
- * @returns {[]}
- */
- getCheckedLayers (mapConfig) {
+ * 寰楀埌閫変腑鐨勫浘灞傚垪琛�
+ * @param mapConfig
+ * @returns {[]}
+ */
+ getCheckedLayers (serviceLayers) {
var checkedLayers = []
- var serviceLayers = mapConfig.ServiceLayers
for (var i = 0; i < serviceLayers.length; i++) {
var serviceLayer = serviceLayers[i]
var layers = serviceLayer.layers
@@ -177,8 +254,8 @@
}
/**
- * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁
- */
+ * 鏍规嵁绾跨殑閫夋嫨锛屽緱鍒扮偣鐨勫彲閫夋嫨鍥惧眰鏁版嵁
+ */
getFiltersGroup () {
}
--
Gitblit v1.8.0