From 3b79ee564d4c77189484711ece4dc80786f79080 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期一, 17 五月 2021 14:34:20 +0800
Subject: [PATCH] 定位、高亮重封装
---
src/components/LayerController/service/WmsLayerService.js | 161 +++++++++++++++++++++++++++--------------------------
1 files changed, 81 insertions(+), 80 deletions(-)
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index e102f0c..1434664 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/src/components/LayerController/service/WmsLayerService.js
@@ -1,5 +1,8 @@
import AjaxUtils from '../../../utils/AjaxUtils'
-import { PIPELINE_WMS } from '../../../conf/Constants'
+import { WMS_URL } from '../../../conf/Constants'
+import Popup from '@views/popup/Popup'
+import WmsLayerList from '../dataset/WmsLayerList'
+import { highlight } from '../../helpers/LocateHelper'
/**
* todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐�
@@ -26,89 +29,98 @@
// 瀛樻斁getfeatureinfo鐨勫浘灞傜粍
this.featureGroup = this.L.featureGroup({}).addTo(this.map)
- this.layers = []
- for (var i = 0; i < layersConfig.length; i++) {
- const config = layersConfig[i]
- for (var k in config) {
- if (k === 'wmsLayers') {
- this.layers.push(config[k])
- }
+ this.wmsLayerList = new WmsLayerList()
+ if (layersConfig) {
+ for (var i = 0; i < layersConfig.length; i++) {
+ const config = layersConfig[i]
+ this.wmsLayerList.addConfig(config)
}
}
+ this.load()
}
init () {
- if (this.layers) {
- this.load(this.layers)
- this.clickListener()
- }
+ this.clickListener()
}
add (config) {
- const wmsLayers = config.wmsLayers
- if (wmsLayers) {
- if (this.layers.indexOf(wmsLayers) < 0) {
- this.layers.push(config.wmsLayers)
- this.wmsLayer.setParams({ layers: this.layers.join(',') })
- }
- }
+ this.wmsLayerList.addConfig(config)
+ const layers = this.wmsLayerList.getLayers() || ''
+ const filter = this.wmsLayerList.getFilters() || ''
+ const params = {}
+ params.cql_filter = filter
+ params.layers = layers
+ this.wmsLayer.setParams(params)
}
remove (config) {
- const wmsLayers = config.wmsLayers
- for (var i = 0; i < this.layers.length; i++) {
- const layerName = this.layers[i]
- if (wmsLayers === layerName) {
- this.layers.splice(i, 1)
- }
- }
- this.wmsLayer.setParams({ layers: this.layers.join(',') })
+ this.wmsLayerList.remove(config.typeName, config.filter)
+ const layers = this.wmsLayerList.getLayers() || ''
+ const filter = this.wmsLayerList.getFilters() || ''
+ const params = { layers: layers }
+ params.cql_filter = filter
+ this.wmsLayer.setParams(params)
}
- load (layers) {
- this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
+ load () {
+ const layers = this.wmsLayerList.getLayers()
+ const filter = this.wmsLayerList.getFilters()
+ const params = {
format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
transparent: true,
- layers: layers.join(',')
- }).addTo(this.map)
+ BBOX: this.map.getBounds().toBBoxString()
+ }
+ if (layers) {
+ params.layers = layers
+ }
+ if (filter.length > 0) {
+ params.cql_filter = filter
+ }
+ this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map)
}
clickListener () {
- if (this.layers && this.layers.length > 0) {
- window.map.on('click', (e) => {
- this.featureGroup.clearLayers()
- var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
- var size = this.map.getSize()
- // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
-
+ window.map.on('click', (e) => {
+ // console.log(e)
+ window.mapManager.clearHighlight()
+ this.featureGroup.clearLayers()
+ var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
+ var size = this.map.getSize()
+ // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
+ const layers = this.wmsLayerList.getLayers()
+ const filter = this.wmsLayerList.getFilters()
+ if (layers.length > 0) {
const params = Object.assign({
- LAYERS: this.layers.join(','),
- QUERY_LAYERS: this.layers.join(','),
+ LAYERS: layers,
+ QUERY_LAYERS: layers,
WIDTH: size.x,
HEIGHT: size.y,
X: Math.round(point.x),
Y: Math.round(point.y),
BBOX: this.map.getBounds().toBBoxString()
}, this.params)
- AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
+ if (filter.length > 0) {
+ params.cql_filter = filter
+ }
+ AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
const features = res.data.features
/**
- * {
- * title: 'New Tab',
- * name: newTabName,
- * content: 'New Tab content'
- * }
- * @type {*[]}
- */
+ * {
+ * title: 'New Tab',
+ * name: newTabName,
+ * content: 'New Tab content'
+ * }
+ * @type {*[]}
+ */
const popupDatas = []
if (features) {
for (var i = 0; i < features.length; i++) {
const feature = features[i]
const properties = feature.properties
- this.highlight(feature)
+ highlight(feature)
// const coordinates = feature.geometry.coordinates
popupDatas.push({
- title: properties.wellname || properties.devicename || properties.name,
+ title: properties.wellname || properties.devicename || properties.name || properties.pipename,
name: feature.id,
content: properties
})
@@ -118,7 +130,7 @@
var myIcon = this.L.divIcon({ className: 'my-div-icon' })
this.L.marker(e.latlng, {
icon: myIcon
- }).addTo(this.featureGroup)
+ }).addTo(this.featureGroup)/*
.bindPopup((layer) => {
this.popupComp.setDatas(popupDatas)
this.popupComp.setShow()
@@ -129,38 +141,27 @@
closeButton: false,
autoClose: false
})
- .openPopup()
+ .openPopup() */
+
+ if (window.layerFactory.clickSwitch) {
+ window.$layer.open({
+ content: {
+ content: Popup, // 缁勪欢
+ data: { // 浼犻�掔殑鍙傛暟
+ datas: popupDatas
+ }
+ },
+ title: '', // 鏍囬
+ left: e.originalEvent.clientX,
+ top: e.originalEvent.clientY
+ })
+ }
+ // this.popupComp.setDatas(popupDatas)
+ // this.popupComp.setShow()
}
})
- })
- }
- }
-
- reverse (feature) {
- const coordinates = feature.geometry.coordinates
- var latlng = []
- for (var j = 0; j < coordinates.length; j++) {
- const coordinate = coordinates[j]
- var xy = []
- for (var k = 0; k < coordinate.length; k++) {
- const coor = coordinate[k]
- xy.push(coor.reverse())
}
- latlng.push(xy)
- }
- return latlng
- }
-
- highlight (feature) {
- const type = feature.geometry.type
- if (type === 'MultiLineString') {
- this.L.polyline(this.reverse(feature)).addTo(this.featureGroup)
- } else if (type === 'Point') {
- var myIcon = this.L.divIcon({ className: 'my-div-icon' })
- this.L.marker(feature.geometry.coordinates.reverse(), {
- icon: myIcon
- }).addTo(this.featureGroup)
- }
+ })
}
}
--
Gitblit v1.8.0