From f70e132f88dc93fc7b590aad56eb1f409dfd64d5 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期四, 04 三月 2021 09:50:25 +0800
Subject: [PATCH] 修改管网先over样式
---
src/components/helpers/ServiceLayerHelper.js | 126 ++++++++++++++++++++++++++---------------
1 files changed, 79 insertions(+), 47 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index bf9883e..83e8a86 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -4,6 +4,7 @@
*/
import AjaxUtils from '@/utils/AjaxUtils'
import store from '@/store'
+import styles from '@/conf/Styles'
class ServiceLayerHelper {
constructor (options) {
@@ -17,6 +18,7 @@
this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
+ this.popupComp = null
}
getTileLayer (code) {
@@ -26,9 +28,11 @@
/**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
- initServiceLayers (layerConfig) {
+ initServiceLayers (layerConfig, popupComp) {
this.layerConfig = layerConfig
+ this.popupComp = popupComp
this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
}
/**
@@ -40,19 +44,17 @@
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)
- }
+ 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)
}
}
}
@@ -69,42 +71,45 @@
}
}
- loadGeojsonLayer (url, layer) {
+ /**
+ * 璇锋眰wfs鏁版嵁
+ * @param url
+ * @param item
+ */
+ loadGeojsonLayer (url, item) {
var matches = this.regex.exec(url)
- var matchValue = layer[matches[1]]
- var code = layer.code
+ var matchValue = item[matches[1]]
+ var code = item.code
var newUrl = url.replace(this.regex, matchValue)
var that = this
if (!that.geojsonArray[code]) {
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
store.commit('setSewersDatas', res)
- var layer = that.loadGeojson(res)
+ var layer = that.loadGeojson(res, item)
that.geojsonArray[code] = layer
})
}
}
/**
- * 鍔犺浇鐐规暟鎹�
- * @param res
- */
- loadGeojson (res) {
+ * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず
+ * @param res
+ */
+ loadGeojson (res, opt) {
var that = this
- const featureGroup = that.L.featureGroup([], {
- attribution: { id: '123' }
- }).addTo(that.map)
- that.L.geoJSON(res.features, {
+ var icon = opt.icon
+ const featureGroup = that.L.featureGroup().addTo(that.map)
+ const geojson = 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
+ 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) {
@@ -112,15 +117,37 @@
{
radius: 20,
img: {
- url: 'assets/images/map/marker-icon.png',
- size: [20, 20]
+ // url: 'assets/images/map/marker-icon.png',
+ url: '/assets/images/map/' + icon,
+ size: styles.defaultLineStyle.size
}
})
}
}).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(featureGroup)
- featureGroup.bringToBack()
+ that.popupComp.setDatas(layer)
+ that.popupComp.setShow()
+ return that.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ }).bindTooltip(function (layer) {
+ console.log(layer)
+ return layer.feature.properties.name
+ }).on('mouseover', function (e) {
+ console.log(e)
+ var layer = e.layer
+ layer.setStyle({ weight: 8, color: '#00ffff' })
+ }).on('mouseout', function (e) {
+ var layer = e.layer
+ layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
+ }).addTo(featureGroup).tooltip()
+ 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 featureGroup
}
@@ -141,11 +168,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)
}
/**
@@ -157,10 +186,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