From fd94c3b57e6e1f32e1f8503e479cdac8de70104d Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期一, 17 五月 2021 15:43:28 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/LayerController/service/WmsLayerService.js | 61 +-------
src/views/MapTemplate.vue | 2
src/components/LayerController/service/LayerFactory.js | 144 --------------------
src/components/panel/topicSearch/SewersSearch.vue | 9
src/components/helpers/MapManager.js | 23 +++
src/components/helpers/LocateHelper.js | 94 +++++++++++++
src/utils/utils.js | 31 ++++
7 files changed, 163 insertions(+), 201 deletions(-)
diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js
index d88b9a6..68d8d64 100644
--- a/src/components/LayerController/service/LayerFactory.js
+++ b/src/components/LayerController/service/LayerFactory.js
@@ -1,5 +1,4 @@
import WfsLayerService from './WfsLayerService'
-import { clone, pulseEffect } from '../../../utils/utils'
import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants'
import WmsLayerService from './WmsLayerService'
@@ -18,9 +17,6 @@
this.minZoomLayers = {}
this.wmsLayers = []
this.wmsLayerService = null
- // todo 寰呬紭鍖栵紝wmslayerservice璋冪敤锛屾斁杩欓噷涓嶅悎閫�
- this.clickSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏�
- this.hightlightLayer = options.L.featureGroup({}).addTo(window.map)
}
init (layerConfig) {
@@ -164,146 +160,6 @@
this.hide(config)
}
}
- }
- }
-
- /**
- *
- * 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛�
- * @param code
- * @param feature
- */
- flyByFeature (feature, code) {
- this.clearHighlight()
- const type = feature.geometry.type
- var point = []
- switch (type) {
- case 'Point':
- point = feature.geometry.coordinates
- break
- case 'MultiLineString':
- var coordinates = feature.geometry.coordinates
- 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
- }
- 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) {
- layer.eachLayer(function (layer) {
- const layers = layer.getLayers()
- for (var i = 0; i < layers.length; i++) {
- const lay = layers[i]
- const feature = lay.feature
- lay.closePopup()
- if (feature.id === id) {
- lay.openPopup()
- break
- }
- }
- })
- }
- /* for (var k in this.layers) {
- var layerGroup = this.layers[k]
- layerGroup.eachLayer(function (layer) {
- console.log(layer)
- console.log(layer.getAttribution())
- })
- var layers = layerGroup.getLayers()
- if (layers) {
- for (var m = 0; m < layers.length; m++) {
- var layer = layers[m]
- console.log(layer)
- console.log(layer.getLayerId(val.id))
- /!* var feature = layer.feature
- if (feature.id === layerId) {
- this.map.flyToBounds(bound)
- return layer
- } *!/
- }
- }
- } */
- return null
- }
-
- findLayerById (layer, id) {
- const layers = layer.getLayers
- if (layers) {
- this.findLayerById(layer.getLayers(), id)
- } else {
- layer.eachLayer(function (layer) {
- // console.log(layer)
- })
}
}
}
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index 3b25bc6..1434664 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/src/components/LayerController/service/WmsLayerService.js
@@ -2,6 +2,7 @@
import { WMS_URL } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'
+import { highlight } from '../../helpers/LocateHelper'
/**
* todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐�
@@ -43,19 +44,16 @@
}
add (config) {
- console.log(config)
this.wmsLayerList.addConfig(config)
const layers = this.wmsLayerList.getLayers() || ''
const filter = this.wmsLayerList.getFilters() || ''
const params = {}
params.cql_filter = filter
params.layers = layers
- console.log(this.wmsLayerList)
this.wmsLayer.setParams(params)
}
remove (config) {
- console.log(config)
this.wmsLayerList.remove(config.typeName, config.filter)
const layers = this.wmsLayerList.getLayers() || ''
const filter = this.wmsLayerList.getFilters() || ''
@@ -84,7 +82,7 @@
clickListener () {
window.map.on('click', (e) => {
// console.log(e)
- window.layerFactory.clearHighlight()
+ window.mapManager.clearHighlight()
this.featureGroup.clearLayers()
var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
var size = this.map.getSize()
@@ -107,19 +105,19 @@
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 || properties.pipename,
@@ -164,45 +162,6 @@
})
}
})
- }
-
- 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
- }
-
- highlight (feature) {
- const type = feature.geometry.type
- if (type === 'MultiLineString') {
- this.L.polyline(this.reverseMultiLine(feature), { color: 'red' }).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)
- } else if (type === 'LineString') {
- this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.featureGroup)
- }
}
}
diff --git a/src/components/helpers/LocateHelper.js b/src/components/helpers/LocateHelper.js
new file mode 100644
index 0000000..876e74e
--- /dev/null
+++ b/src/components/helpers/LocateHelper.js
@@ -0,0 +1,94 @@
+import { pulseEffect, reversePolyLine } from '../../utils/utils'
+
+/**
+ * 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛�
+ * @param code
+ * @param feature
+ */
+export const fitBounds = function (feature) {
+ const type = feature.geometry.type
+ switch (type) {
+ case 'Point':
+ var point = feature.geometry.coordinates
+ point = [point[1], point[0]]
+ window.map.setView(point, 17)
+ break
+ case 'MultiLineString':
+ window.map.fitBounds(window.L.geoJSON(feature).getBounds())
+ break
+ case 'LineString':
+ window.map.fitBounds(window.L.polyline(reversePolyLine(feature)).getBounds())
+ break
+ }
+}
+
+export const highlight = function (feature, config) {
+ const L = window.L
+ const type = feature.geometry.type
+ const highlightLayer = window.mapManager.hightlightLayer
+ if (type === 'MultiLineString') {
+ L.geoJSON(feature, {
+ style: function () {
+ return {
+ fillColor: 'red',
+ color: 'red'
+ }
+ }
+ }).addTo(highlightLayer)
+ } else if (type === 'Point') {
+ // 鍙犲姞涓�涓ぇ灏哄鐨勫浘鏍�
+ let point = feature.geometry.coordinates
+ point = [point[1], point[0]]
+
+ if (config) {
+ L.marker(point, {
+ icon: L.icon({
+ iconUrl: '/assets/images/map/' + config.icon,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
+ })
+ }).addTo(highlightLayer)
+ }
+ pulseEffect(point)
+ } else if (type === 'LineString') {
+ L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
+ }
+}
+
+export const openPopup = function (layerId, id) {
+ const layer = this.layers[layerId]
+
+ if (layer) {
+ layer.eachLayer(function (layer) {
+ const layers = layer.getLayers()
+ for (var i = 0; i < layers.length; i++) {
+ const lay = layers[i]
+ const feature = lay.feature
+ lay.closePopup()
+ if (feature.id === id) {
+ lay.openPopup()
+ break
+ }
+ }
+ })
+ }
+ return null
+}
+
+export const getLayer = function (layerId, id) {
+ const layer = this.layers[layerId]
+
+ if (layer) {
+ layer.eachLayer(function (layer) {
+ const layers = layer.getLayers()
+ for (var i = 0; i < layers.length; i++) {
+ const lay = layers[i]
+ const feature = lay.feature
+ if (feature.id === id) {
+ return lay
+ }
+ }
+ })
+ }
+ return null
+}
diff --git a/src/components/helpers/MapManager.js b/src/components/helpers/MapManager.js
new file mode 100644
index 0000000..625a78e
--- /dev/null
+++ b/src/components/helpers/MapManager.js
@@ -0,0 +1,23 @@
+class MapManager {
+ constructor () {
+ this.hightlightLayer = window.L.featureGroup({}).addTo(window.map)
+ this.clickDialogSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏�
+ this.L = window.L
+ this.map = window.map
+ }
+
+ mapClickListener () {
+ window.map.on('click', (e) => {
+
+ })
+ }
+
+ clearHighlight () {
+ this.hightlightLayer.clearLayers()
+ }
+
+ iconPoint (latlng) {
+ }
+}
+
+export default MapManager
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index ad48f87..03c28d5 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -83,6 +83,7 @@
// 寮曞叆缁勪欢鍐呭
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'
+import { fitBounds, highlight } from '../../helpers/LocateHelper'
export default {
name: 'SewersSearch',
@@ -161,11 +162,12 @@
}
},
handleLocation (val, index) {
- console.log(val)
+ console.log(this.form.dataType)
// console.log(val)
this.activeNum = index
// layer && layer.openPopup()
- window.layerFactory.flyByFeature(val, this.form.dataType.code)
+ fitBounds(val, this.form.dataType.code)
+ highlight(val, this.form.dataType)
},
btnAffiliatedFacilities (val, index) {
this.activeNum = index
@@ -176,7 +178,8 @@
} else {
this.fuShuSheShiShow = false
}
- window.layerFactory.flyByFeature(val, this.form.dataType.code)
+ fitBounds(val, this.form.dataType.code)
+ highlight(val)
}
},
mounted () {
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 2328fd0..53116c0 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -27,11 +27,11 @@
* 鑴夊啿鏁堟灉
*/
export function pulseEffect (xy) {
- let times = 5
- const colors = ['#98FB98', '#ff0000']
+ let times = 50
+ const colors = ['#00f100', '#ff0000']
// 鎻掍欢 鏁堟灉瀹炵幇
var pulsingIcon = window.L.icon.pulse({
- iconSize: [20, 20],
+ iconSize: [30, 30],
color: colors[0],
fillColor: ''
})
@@ -47,6 +47,31 @@
}, 1000)
}
+export function 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
+}
+
+export function 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
+}
+
/**
* 璁剧疆寮圭獥骞崇Щ浣嶇疆
* @param pos
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index ad0d425..67a6523 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -41,6 +41,7 @@
import EventHandler from '../components/LayerController/event/EventHandler'
// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup'
import Emergency from '@components/emergency/index'
+import MapManager from '../components/helpers/MapManager'
export default {
name: 'MapTemplate',
@@ -113,6 +114,7 @@
layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
window.layerFactory = layerFactory
+ window.mapManager = new MapManager()
this.saveMapStatus()
// this.setMapObj(this.mapObj)
// this.setBasemapHelper(this.basemapHelper)
--
Gitblit v1.8.0