From 1d85f0febade61aa76d15ab7a65e03cf89c92fab Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期五, 05 三月 2021 16:16:25 +0800 Subject: [PATCH] 修改污水管网png图片大小 --- src/components/helpers/ServiceLayerHelper.js | 156 ++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 110 insertions(+), 46 deletions(-) diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js index bf9883e..b344031 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,58 +71,115 @@ } } - 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 }) } } /** - * 鍔犺浇鐐规暟鎹� + * 鍔犺浇gis server杩斿洖鐨刧eoson鏁版嵁鍒板湴鍥句腑灞曠ず * @param res */ - loadGeojson (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) { return that.L.canvasMarker(latlng, { - 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) { + 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(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 } @@ -141,11 +200,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 +218,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