From c42fafcfba7aa2d32176533be368ee77bc0150d6 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期三, 03 三月 2021 17:42:37 +0800 Subject: [PATCH] 修改图层控制 --- src/components/helpers/ServiceLayerHelper.js | 113 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 72 insertions(+), 41 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index fa100b0..00e2c6f 100644 --- a/src/components/helpers/ServiceLayerHelper.js +++ b/src/components/helpers/ServiceLayerHelper.js @@ -4,8 +4,8 @@ */ import AjaxUtils from '@/utils/AjaxUtils' import store from '@/store' +import styles from '@/conf/Styles' -var myRenderer = window.L.canvas() class ServiceLayerHelper { constructor (options) { this.map = options.map @@ -18,6 +18,7 @@ this.geojsonArray = {} // 鍒濆鐨刧eojson闆� this.layerConfig = {} this.regex = /\{(.+?)\}/g // 鍖归厤{} + this.popupComp = null } getTileLayer (code) { @@ -27,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) } /** @@ -41,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) } } } @@ -70,6 +71,11 @@ } } + /** + * 璇锋眰wfs鏁版嵁 + * @param url + * @param item + */ loadGeojsonLayer (url, item) { var matches = this.regex.exec(url) var matchValue = item[matches[1]] @@ -86,23 +92,24 @@ } /** - * 鍔犺浇鐐规暟鎹� - * @param res - */ - loadGeojson (res, layer) { + * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず + * @param res + */ + loadGeojson (res, opt) { var that = this - var icon = layer.icon - return 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,14 +119,33 @@ img: { // url: 'assets/images/map/marker-icon.png', url: '/assets/images/map/' + icon, - size: [20, 20] + size: styles.defaultLineStyle.size } }) - }, - renderer: myRenderer + } }).bindPopup(function (layer) { - return layer.feature.properties.linenumber - }).addTo(that.map) + that.popupComp.setDatas(layer) + that.popupComp.setShow() + return that.popupComp.$el + }, { + className: 's-map-popup', + minWidth: 300, + closeButton: false, + autoClose: false + }).on('mouseover', function (e) { + console.log(e) + var layer = e.layer + layer.setStyle({ weight: 5 }) + }).on('mouseout', function (e) { + var layer = e.layer + layer.setStyle({ weight: styles.defaultLineStyle.weight }) + }).addTo(featureGroup) + 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 } removeLayer (item) { @@ -139,11 +165,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) } /** @@ -155,10 +183,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