From cf5ab6da9ff676fab8a10d4299bd5a04a07bf50f Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期一, 17 五月 2021 10:05:53 +0800
Subject: [PATCH] 修复默认选中图层时出现的BUG
---
src/components/LayerController/service/LayerFactory.js | 142 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 124 insertions(+), 18 deletions(-)
diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js
index 909038e..d88b9a6 100644
--- a/src/components/LayerController/service/LayerFactory.js
+++ b/src/components/LayerController/service/LayerFactory.js
@@ -1,7 +1,14 @@
import WfsLayerService from './WfsLayerService'
+import { clone, pulseEffect } from '../../../utils/utils'
+import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants'
import WmsLayerService from './WmsLayerService'
-import { clone } from '../../../utils/utils'
-import { logicMapper } from '../../../conf/Constants'
+
+/**
+ * init 鍙垵濮嬪寲涓�娆�
+ * start 姣忔璋冪敤鍥惧眰鏄剧ずshow()鏃讹紝閮戒細璋冪敤
+ * destory 姣忔璋冪敤鍥惧眰闅愯棌hide()鏃讹紝閮戒細璋冪敤
+ *
+ */
class LayerFactory {
constructor (options) {
this.L = options.L
@@ -9,9 +16,21 @@
this.layers = {}
this.layersLogic = {}
this.minZoomLayers = {}
+ this.wmsLayers = []
+ this.wmsLayerService = null
+ // todo 寰呬紭鍖栵紝wmslayerservice璋冪敤锛屾斁杩欓噷涓嶅悎閫�
+ this.clickSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏�
+ this.hightlightLayer = options.L.featureGroup({}).addTo(window.map)
}
init (layerConfig) {
+ // wms鏈嶅姟鍙渶瑕佸垵濮嬪寲涓�娆�
+ this.wmsLayerService = new WmsLayerService()
+ this.wmsLayerService.init()
+ this.initConfig(layerConfig)
+ }
+
+ initConfig (layerConfig) {
// 1. 閬嶅巻layer config
if (layerConfig) {
for (var i = 0; i < layerConfig.length; i++) {
@@ -19,8 +38,13 @@
var layers = config.layers
var childLayer = config.childLayer
var checked = config.checked
- layers && this.init(config.layers)
- childLayer && this.init(config.childLayer)
+ /* if (config.groupName) {
+ const wmsGroupLayerService = new WmsLayerGroupService(config)
+ wmsGroupLayerService.init()
+ continue
+ } */
+ layers && this.initConfig(config.layers)
+ childLayer && this.initConfig(config.childLayer)
this.initMinZoom(config)
this.loadLogic(config)
@@ -44,8 +68,7 @@
loadLogic (config) {
var code = config.code
- var wfs = config.wfs
- var wms = config.wms
+ var type = config.type
const file = logicMapper[code]
var logic = this.layersLogic[code]
@@ -53,16 +76,22 @@
if (file) {
var BusiLayer = require('../logic/' + file)
logic = new BusiLayer()
- } else if (wfs) {
+ } else if (type === SERVICE_TYPE.WFS) {
logic = new WfsLayerService(config)
- } else if (wms) {
- logic = new WmsLayerService(config)
}
}
this.layersLogic[code] = logic
return logic
}
+ /**
+ * 1. 鍏堣皟鐢ㄥ鐞嗛�昏緫鐨� initLayer 锛屽鏋滄病鏈� 灏卞垱寤轰竴涓� featureGroup
+ * 2. 濡傛灉瀛樺湪浜嬩欢閫昏緫鐨勮瘽锛岀粦瀹歵ooltip,click浜嬩欢
+ * 3. 灏唋ayer娣诲姞鍒癿ap
+ * 4. 杩斿洖layer
+ * @param config
+ * @returns layer
+ */
addLayer (config) {
var code = config.code
var logic = this.loadLogic(config)
@@ -81,17 +110,26 @@
return layer
}
+ /**
+ * 濡傛灉 瀛樺湪宸茬粡鍔犺浇浜嗙殑瀵硅薄锛屽氨鐩存帴鍔犲埌map
+ * 濡傛灉 涓嶅瓨鍦ㄥ垯 璋冪敤 addLayer 鍙� 閫昏緫绫荤殑init 杩涜鍒濆鍖栨搷浣�
+ * 濡傛灉 瀛樺湪start鍑芥暟锛屽垯璋冪敤
+ * @param config
+ */
show (config) {
+ var index = config.index
var layer = this.layers[config.code]
var logic = this.loadLogic(config)
if (layer) {
if (!this.map.hasLayer(layer)) {
+ index && layer.setZIndex(index)
layer.addTo(this.map)
}
} else {
logic && logic.init(this.addLayer(config), this.L)
}
- logic && logic.create && logic.create()
+ logic && logic.start && logic.start()
+ this.wmsLayerService && this.wmsLayerService.add(config)
}
hide (config) {
@@ -100,6 +138,7 @@
layer && this.map.removeLayer(layer)
const logic = this.loadLogic(config)
logic && logic.destory && logic.destory()
+ this.wmsLayerService && this.wmsLayerService.remove(config)
}
/**
@@ -107,7 +146,7 @@
* @param layerConfig
*/
initEvent (layerConfig) {
- this.map.on('zoomend ', () => this.toggleByZoom())
+ // this.map.on('zoomend ', () => this.toggleByZoom())
}
toggleByZoom () {
@@ -117,8 +156,8 @@
for (var j in configs) {
const config = configs[j]
const checked = config.checked
- console.log(zoom)
- console.log(k)
+ // console.log(zoom)
+ // console.log(k)
if (checked && zoom > k) {
this.show(config)
} else if (checked && zoom < k) {
@@ -135,25 +174,92 @@
* @param feature
*/
flyByFeature (feature, code) {
+ this.clearHighlight()
const type = feature.geometry.type
var point = []
switch (type) {
case 'Point':
- point = clone(feature.geometry.coordinates)
+ point = feature.geometry.coordinates
break
case 'MultiLineString':
var coordinates = feature.geometry.coordinates
- point = coordinates[parseInt(coordinates.length / 2)][0]
+ var coordinate = coordinates[parseInt(coordinates.length / 2)][0]
+ if (coordinate.length > 2) {
+ point = [coordinate[0], coordinate[1]]
+ }
+ break
+ case 'LineString':
+ var lineString = feature.geometry.coordinates
+ point = lineString[parseInt(lineString.length / 2)][0]
break
}
- window.map.flyTo(point.reverse(), 15)
+ if (point.length > 2) {
+ point.splice(2, 1)
+ }
+ this.highlight(feature)
+ window.map.setView(clone(point).reverse(), 17)
code && this.openPopup(code, feature.id)
+ }
+
+ clearHighlight () {
+ this.hightlightLayer.clearLayers()
+ }
+
+ highlight (feature) {
+ const type = feature.geometry.type
+ if (type === 'MultiLineString') {
+ this.L.geoJSON(feature, {
+ style: function () {
+ return {
+ fillColor: 'red',
+ color: 'red'
+ }
+ }
+ }).addTo(this.hightlightLayer)
+ } else if (type === 'Point') {
+ let point = clone(feature.geometry.coordinates)
+ if (point.length > 2) {
+ point = [point[0], point[1]]
+ }
+ pulseEffect(point.reverse())
+ /* var myIcon = this.L.divIcon({ className: 'my-div-icon' })
+ this.L.marker(feature.geometry.coordinates.reverse(), {
+ icon: myIcon
+ }).addTo(this.hightlightLayer) */
+ } else if (type === 'LineString') {
+ this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.hightlightLayer)
+ }
+ }
+
+ reverseMultiLine (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
+ }
+
+ reversePolyLine (feature) {
+ const coordinates = feature.geometry.coordinates
+ var latlng = []
+ for (var j = 0; j < coordinates.length; j++) {
+ const coordinate = coordinates[j]
+ latlng.push(coordinate.reverse())
+ }
+ return latlng
}
openPopup (layerId, id) {
const layer = this.layers[layerId]
- if (layer.eachLayer) {
+ if (layer) {
layer.eachLayer(function (layer) {
const layers = layer.getLayers()
for (var i = 0; i < layers.length; i++) {
@@ -196,7 +302,7 @@
this.findLayerById(layer.getLayers(), id)
} else {
layer.eachLayer(function (layer) {
- console.log(layer)
+ // console.log(layer)
})
}
}
--
Gitblit v1.8.0