From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 22:41:47 +0800
Subject: [PATCH] 统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。
---
src/components/LayerController/service/WfsLayerService.js | 101 +++++++++++++++++++++++++++++---------------------
1 files changed, 58 insertions(+), 43 deletions(-)
diff --git a/src/components/LayerController/service/WfsLayerService.js b/src/components/LayerController/service/WfsLayerService.js
index 7f10aee..b139a63 100644
--- a/src/components/LayerController/service/WfsLayerService.js
+++ b/src/components/LayerController/service/WfsLayerService.js
@@ -1,9 +1,9 @@
/**
- * 鍔犺浇涓氬姟鏁版嵁鍥惧眰
+ * 鍔犺浇wfs鏈嶅姟鍥惧眰
*/
-
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
@@ -29,49 +29,63 @@
}
loadData (wfsUrl) {
- AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => this.draw(res.data.features))
+ AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => {
+ this.draw(res.data.features)
+ })
}
draw (features) {
- const icon = this.config.icon
- this.L.geoJSON(features, {
- style: function (feature) {
- return {
- 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) => {
- return this.L.canvasMarker(latlng,
- {
- img: {
- // url: 'assets/images/map/marker-icon.png',
- url: '/assets/images/map/' + icon,
- size: STYLES.ICON_SIZE
- }
+ if (features && features.length > 0) {
+ const icon = this.config.icon
+ const styles = this.config.styles
+ Object.assign(STYLES, styles)
+ const geojsonLayer = this.L.geoJSON(features, {
+ style: function (feature) {
+ return {
+ 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) => {
+ return this.L.canvasMarker(latlng,
+ {
+ img: {
+ // url: 'assets/images/map/marker-icon.png',
+ url: '/assets/images/map/' + icon,
+ size: STYLES.ICON_SIZE
+ }
+ })
+ },
+ onEachFeature: (feature, layer) => {
+ const popupDatas = []
+ const properties = feature.properties
+ popupDatas.push({
+ title: properties.wellname || properties.devicename || properties.name,
+ name: feature.id,
+ content: properties
})
- },
- onEachFeature: (feature, 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) => 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(this.layer)
+ layer.bindPopup((layer) => {
+ this.popupComp.setDatas(popupDatas)
+ this.popupComp.setShow()
+ return this.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .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(this.layer)
+ setZIndex(geojsonLayer)
+ }
}
mouseOverListener (e, layer) {
@@ -120,4 +134,5 @@
return name
}
}
+
export default WfsLayerService
--
Gitblit v1.8.0