From 144f33b870653829a8ae29486c652250a51a63e3 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 21 四月 2021 10:51:22 +0800 Subject: [PATCH] 废汽实时数据/小时数居 --- src/components/LayerController/service/WfsLayerService.js | 49 +++++++++++++++++++++++++++++-------------------- 1 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/LayerController/service/WfsLayerService.js b/src/components/LayerController/service/WfsLayerService.js index e5a175d..cb0a4bf 100644 --- a/src/components/LayerController/service/WfsLayerService.js +++ b/src/components/LayerController/service/WfsLayerService.js @@ -1,9 +1,9 @@ /** * 鍔犺浇涓氬姟鏁版嵁鍥惧眰 */ - -import styles from '../../../conf/Styles' +import { STYLES } from '../../../conf/Constants' import AjaxUtils from '../../../utils/AjaxUtils' +import { setZIndex } from '../../../utils/utils' class WfsLayerService { constructor (config) { @@ -11,8 +11,8 @@ this.params = { version: '1.0.0', REQUEST: 'getfeature', - OUTPUTFORMAT: 'json', - maxFeatures: 20000 + OUTPUTFORMAT: 'json' + // maxFeatures: 20000 } this.popupComp = window.popupComp this.L = window.L @@ -21,25 +21,34 @@ } init (layer) { + this.layer = layer const wfsUrl = this.config.wfs if (wfsUrl) { - AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => this.draw(layer, res.data.features)) + this.loadData(wfsUrl) } } - draw (layer, features) { + loadData (wfsUrl) { + AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => { + this.draw(res.data.features) + }) + } + + draw (features) { const icon = this.config.icon - const geojson = this.L.geoJSON(features, { + const styles = this.config.styles + Object.assign(STYLES, styles) + const geojsonLayer = this.L.geoJSON(features, { style: function (feature) { return { - 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 + fill: STYLES.FILL, + weight: STYLES.WEIGHT, + fillColor: STYLES.FILL_COLOR, + color: STYLES.COLOR, + fillOpacity: STYLES.FILL_OPACITY, + opacity: STYLES.OPACITY + // dashArray: STYLES.DASH_ARRAY, + // dashSpeed: STYLES.DASH_SPPED } }, pointToLayer: (geoJsonPoint, latlng) => { @@ -48,7 +57,7 @@ img: { // url: 'assets/images/map/marker-icon.png', url: '/assets/images/map/' + icon, - size: styles.defaultLineStyle.size + size: STYLES.ICON_SIZE } }) }, @@ -66,8 +75,8 @@ .bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true }) .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer)) } - }).addTo(layer) - return geojson + }).addTo(this.layer) + setZIndex(geojsonLayer) } mouseOverListener (e, layer) { @@ -90,13 +99,13 @@ const icon = this.config.icon const type = e.target.feature.geometry.type if (type === 'LineString' || type === 'MultiLineString') { - layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color }) + layer.setStyle({ weight: STYLES.WEIGHT, color: STYLES.COLOR }) } if (type === 'Point' || type === 'MultiPoint') { layer.setStyle({ img: { url: '/assets/images/map/' + icon, - size: styles.defaultLineStyle.size + size: STYLES.ICON_SIZE } }) } -- Gitblit v1.8.0