From c065531c87e7dc199c7fc4d35e4f6fbedf26167d Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期三, 19 五月 2021 15:40:37 +0800
Subject: [PATCH] 定位、弹窗信息、排口查询BUG修复
---
src/components/helpers/LocateHelper.js | 185 +++++++++++++++++++++++++++++++++++----------
1 files changed, 142 insertions(+), 43 deletions(-)
diff --git a/src/components/helpers/LocateHelper.js b/src/components/helpers/LocateHelper.js
index 876e74e..edfc65c 100644
--- a/src/components/helpers/LocateHelper.js
+++ b/src/components/helpers/LocateHelper.js
@@ -1,5 +1,33 @@
-import { pulseEffect, reversePolyLine } from '../../utils/utils'
+import { pulseEffect } from '../../utils/utils'
+import Popup from '@views/popup/Popup'
+import { LAYERPROPS, LAYERS } from '../../conf/Constants'
+/**
+ * 鏁村悎瀹氫綅銆侀珮浜�佸脊绐�
+ * @param feature geojson
+ * @param config 鍥惧眰鐨刢onfig
+ */
+export const locate = function (feature, config, filter) {
+ fitBounds(feature)
+ highlight(feature, config.icon)
+ setTimeout(() => {
+ const centerPoint = getCenterPoint(feature)
+ const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName }
+ const filters = []
+ if (config.filter) {
+ filters[filters.length] = config.filter
+ }
+ if (filter) {
+ filters[filters.length] = filter
+ }
+ if (filters.length > 0) {
+ params.CQL_FILTER = filters.join(' AND ')
+ }
+ window.mapManager.loadWfsDatas(centerPoint, params).then((res) => {
+ openPropsPopup(centerPoint, res.features)
+ })
+ }, 1000)
+}
/**
* 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛�
* @param code
@@ -7,72 +35,143 @@
*/
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
+ if (type === 'Point') {
+ var point = feature.geometry.coordinates
+ point = [point[1], point[0]]
+ window.map.setView(point, 17)
+ } else {
+ window.map.fitBounds(window.L.geoJSON(feature).getBounds())
}
}
-export const highlight = function (feature, config) {
+export const highlight = function (feature, icon) {
+ /* if (Array.isArray(feature)) {
+ for (let i = 0; i < feature.length; i++) {
+ highlight(feature[i], icon)
+ }
+ } else { */
+ window.mapManager.clearHighlight()
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') {
+ if (type === 'Point') {
// 鍙犲姞涓�涓ぇ灏哄鐨勫浘鏍�
let point = feature.geometry.coordinates
point = [point[1], point[0]]
- if (config) {
+ if (icon) {
L.marker(point, {
icon: L.icon({
- iconUrl: '/assets/images/map/' + config.icon,
+ iconUrl: '/assets/images/map/' + icon,
iconSize: [30, 30],
iconAnchor: [15, 15]
})
}).addTo(highlightLayer)
}
pulseEffect(point)
- } else if (type === 'LineString') {
- L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
+ } else {
+ L.geoJSON(feature, {
+ style: function () {
+ return {
+ 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
+/**
+ * 寮瑰嚭灞炴�у垪琛ㄥ睍绀虹獥鍙�
+ * @param xy 寮瑰嚭绐楀彛璺熼殢瑕佺礌鐨勭粡绾害
+ * @param layer 鏌ヨ鎸囧畾鐨勫浘灞傘�備笉鎸囧畾鏃讹紝榛樿涓哄嬀閫夌殑鍥惧眰
+ */
+export const openPropsPopup = function (xy, features) {
+ const lt = window.map.latLngToContainerPoint(xy)
+ const datas = popupDatas(features)
+ if (datas.length > 0) {
+ window.$layer.open({
+ content: {
+ comp: Popup, // 缁勪欢
+ data: { // 浼犻�掔殑鍙傛暟
+ datas: datas
}
- }
+ },
+ title: '', // 鏍囬
+ left: lt.x,
+ top: lt.y
})
}
- return null
+}
+
+export const getCenterPoint = function (feature) {
+ const L = window.L
+ const type = feature.geometry.type
+ var coordinates = feature.geometry.coordinates
+
+ if (type === 'Point') {
+ return [coordinates[1], coordinates[0]]
+ } else {
+ const center = L.geoJSON(feature, {}).getBounds().getCenter()
+ return [center.lat, center.lng]
+ }
+}
+
+const popupDatas = function (features) {
+ const datas = []
+ console.log(features)
+ if (features) {
+ for (var i = 0; i < features.length; i++) {
+ const feature = features[i]
+ const id = feature.id
+ const properties = feature.properties
+ const ids = id.split('.')
+
+ const propValues = LAYERPROPS[ids[0]]
+ const contents = {}
+ if (!propValues) {
+ continue
+ }
+ if (id.indexOf('pipesegment') >= 0) {
+ continue
+ }
+ for (const k in properties) {
+ if (propValues[k]) {
+ contents[propValues[k]] = properties[k]
+ }
+ }
+ const data = {
+ title: LAYERS[ids[0]],
+ name: feature.id,
+ content: contents,
+ feature: feature
+ }
+ if (id.indexOf('pipeline') >= 0) {
+ data.tableList = listPipeSection(features, properties.subchacode || properties.pipecode)
+ }
+ datas.push(data)
+ console.log(properties)
+ }
+ }
+ return datas
+}
+
+// 绠＄嚎淇℃伅缁戝畾鎵�灞炵娈�
+export const listPipeSection = function (features, code) {
+ const list = []
+ if (features) {
+ for (var i = 0; i < features.length; i++) {
+ const feature = features[i]
+ const id = feature.id
+ if (id.indexOf('pipesegment') < 0) {
+ continue
+ }
+ const properties = feature.properties
+ if (properties.pipecode === code) {
+ list[list.length] = properties
+ }
+ }
+ }
+ return list
}
export const getLayer = function (layerId, id) {
--
Gitblit v1.8.0