From 150a37f948214be4bd183b30f3f2865a6f1c519f Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 29 四月 2021 14:16:18 +0800
Subject: [PATCH] 替换wms服务初步
---
src/components/LayerController/service/WmsLayerService.js | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 158 insertions(+), 3 deletions(-)
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index 859334d..b286194 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/src/components/LayerController/service/WmsLayerService.js
@@ -1,10 +1,165 @@
+import AjaxUtils from '../../../utils/AjaxUtils'
+import { PIPELINE_WMS } from '../../../conf/Constants'
+
+/**
+ * todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐�
+ */
class WmsLayerService {
- constructor (config) {
- this.config = config
+ constructor (layersConfig) {
+ this.L = window.L
+ this.map = window.map
+ this.popupComp = window.popupComp
+ // wms getfeatureinfo 榛樿鍙傛暟
+ this.params = {
+ VERSION: '1.1.1',
+ SERVICE: 'WMS',
+ REQUEST: 'GetFeatureInfo',
+ // bbox: bbox,
+ FORMAT: 'image/png',
+ INFO_FORMAT: 'application/json',
+ TRANSPARENT: true,
+ FEATURE_COUNT: 50,
+ SRS: 'EPSG:4326',
+ EXCEPTIONS: 'application/vnd.ogc.se_inimage'
+ }
+ this.layersConfig = layersConfig
+ // 瀛樻斁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])
+ }
+ }
+ }
}
- init (layer) {
+ init () {
+ if (this.layers) {
+ this.load(this.layers)
+ this.clickListener()
+ }
+ }
+ add (config) {
+ const code = config.code
+ for (var k in this.layersConfig) {
+ if (code === k) {
+ return false
+ }
+ }
+ this.layers.push(config.wmsLayers)
+ this.wmsLayer.setParams({ layers: this.layers.join(',') })
+ }
+
+ 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(',') })
+ }
+
+ load (layers) {
+ this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
+ format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
+ transparent: true,
+ layers: layers.join(',')
+ }).addTo(this.map)
+ }
+
+ clickListener () {
+ 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()
+
+ const params = Object.assign({
+ LAYERS: this.layers.join(','),
+ QUERY_LAYERS: this.layers.join(','),
+ 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) => {
+ const features = res.data.features
+ /**
+ * {
+ * 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)
+ // const coordinates = feature.geometry.coordinates
+ popupDatas.push({
+ title: properties.wellname || properties.devicename || properties.name,
+ name: feature.id,
+ content: properties
+ })
+ }
+ }
+ if (popupDatas.length > 0) {
+ var myIcon = this.L.divIcon({ className: 'my-div-icon' })
+ this.L.marker(e.latlng, {
+ icon: myIcon
+ }).addTo(this.featureGroup)
+ .bindPopup((layer) => {
+ this.popupComp.setDatas(popupDatas)
+ this.popupComp.setShow()
+ return this.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .openPopup()
+ }
+ })
+ })
+ }
+
+ 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