From b6c363cdc1ea55dbfc1dfdb6a7c27c8fc51fa0e2 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期五, 02 四月 2021 16:13:38 +0800
Subject: [PATCH] 右侧搜索栏统一修改标题。
---
src/components/helpers/ServiceLayerHelper.js | 287 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 204 insertions(+), 83 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index cbfdedd..c53ff99 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -3,7 +3,8 @@
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
import AjaxUtils from '@/utils/AjaxUtils'
-import { GEOM_TYPE } from '../../conf/Constants'
+import store from '@/store'
+import styles from '@/conf/Styles'
class ServiceLayerHelper {
constructor (options) {
@@ -14,21 +15,68 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.geojsonArray = [] // 鍒濆鐨刧eojson闆�
- this.layerConfig = {}
+ 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 layerGroup = this.layerArray[k]
+ var layers = layerGroup.getLayers()
+ for (var m = 0; m < layers.length; m++) {
+ var layer = layers[m]
+ var feature = layer.feature
+ if (feature.id === layerId) {
+ return layer
+ }
+ }
+ }
+ return null
+ }
+
+ /**
+ * 鎺у埗鏄剧ず鐨勭骇鍒�
+ * @param layerConfig
+ */
+ 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 (layerConfig) {
+ 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)
}
/**
@@ -40,100 +88,168 @@
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)
- }
+ 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)
}
}
}
- loadGeojson (options) {
+ loadGeojsonLayers (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
+ if (checked) {
+ this.loadGeojsonLayer(url, layer)
}
- 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
- }
- })
+ * 璇锋眰wfs鏁版嵁
+ * @param url
+ * @param item
+ */
+ async 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]) {
+ const res = await AjaxUtils.GetDataAsynByUrl(newUrl, {})
+ if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
+ store.commit('addSewersDatas', res.data)
+ var layer = that.loadGeojson(res.data, item)
+ that.layerArray[code] = layer
}
- }).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(this.map)
+ } else {
+ var _layer = that.layerArray[code].addTo(that.map)
+ that.setZIndex(_layer)
+ }
}
/**
- * 鍔犺浇绾挎暟鎹�
- * @param res
- */
- loadLineGeojson (res) {
- this.L.geoJSON(res.features, {
+ * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
+ * @param res
+ */
+ loadGeojson (res, opt) {
+ var icon = opt.icon
+ const featureGroup = this.L.featureGroup()
+ const featureList = []
+ const geojson = 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
+ 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
}
},
- minZoom: 10
- }).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(this.map)
+ pointToLayer: (geoJsonPoint, latlng) => {
+ return this.L.canvasMarker(latlng,
+ {
+ img: {
+ // url: 'assets/images/map/marker-icon.png',
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
+ }
+ })
+ },
+ onEachFeature: (feature, layer) => {
+ featureList.push(layer)
+ layer.bindPopup((layer) => {
+ this.popupComp.setDatas(layer)
+ this.popupComp.setShow()
+ return this.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .bindTooltip((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', (e) => {
+ const type = e.target.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', (e) => {
+ const type = e.target.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(featureGroup)
+ }
+ })
+ store.commit('addSewersDatas', geojson)
+ featureGroup.addTo(this.map)
+ this.setZIndex(featureGroup)
+ return featureGroup
+ }
+
+ /**
+ * 璁剧疆index,绾垮湪鏈�涓嬮潰锛岀偣鍦ㄤ笂闈�
+ * @param layerGroup 鍥惧眰缁�
+ */
+ setZIndex (layerGroup) {
+ var layers = layerGroup.getLayers()
+ if (layers.length > 0) {
+ var layer = layers[0]
+ if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
+ layerGroup.bringToBack()
+ } else {
+ layerGroup.bringToFront()
+ }
+ }
+ }
+
+ removeLayer (item) {
+ var layer = this.layerArray[item.code]
+ layer && this.map.removeLayer(layer)
}
/**
@@ -144,11 +260,13 @@
loadWmtsLayer (options, isAddToMap = true) {
const layer = this.L.tileLayer(options.url, options.option)
layer.config = options
-
- if (isAddToMap) {
- layer.addTo(this.map)
+ var checked = options.checked
+ if (checked) {
+ if (isAddToMap) {
+ layer.addTo(this.map)
+ }
+ this.loadedLayersMap.set(options.code, layer)
}
- this.loadedLayersMap.set(options.code, layer)
}
/**
@@ -160,10 +278,13 @@
const layer = this.L.tileLayer.wms(options.url, options.option)
layer.config = options
- if (isAddToMap) {
- layer.addTo(this.tileLayerWmslayerGroup)
+ var checked = options.checked
+ if (checked) {
+ if (isAddToMap) {
+ layer.addTo(this.tileLayerWmslayerGroup)
+ }
+ this.loadedLayersMap.set(options.code, layer)
}
- this.loadedLayersMap.set(options.code, layer)
}
/**
--
Gitblit v1.8.0