From c065531c87e7dc199c7fc4d35e4f6fbedf26167d Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期三, 19 五月 2021 15:40:37 +0800
Subject: [PATCH] 定位、弹窗信息、排口查询BUG修复
---
src/conf/layers/LayerHbss.js | 6
src/conf/Constants.js | 2
src/components/panel/topicSearch/SewersSearch.vue | 5
src/components/helpers/MapManager.js | 7
src/components/helpers/WfsHelper.js | 31 ++++++
src/views/popup/Popup.vue | 29 ++++-
src/components/helpers/LocateHelper.js | 141 ++++++++++++++-------------
src/components/layer/src/layer.js | 3
src/utils/utils.js | 23 +++-
9 files changed, 158 insertions(+), 89 deletions(-)
diff --git a/src/components/helpers/LocateHelper.js b/src/components/helpers/LocateHelper.js
index 6354244..edfc65c 100644
--- a/src/components/helpers/LocateHelper.js
+++ b/src/components/helpers/LocateHelper.js
@@ -1,4 +1,4 @@
-import { pulseEffect, reversePolyLine } from '../../utils/utils'
+import { pulseEffect } from '../../utils/utils'
import Popup from '@views/popup/Popup'
import { LAYERPROPS, LAYERS } from '../../conf/Constants'
@@ -9,7 +9,7 @@
*/
export const locate = function (feature, config, filter) {
fitBounds(feature)
- highlight(feature, config)
+ highlight(feature, config.icon)
setTimeout(() => {
const centerPoint = getCenterPoint(feature)
const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName }
@@ -35,58 +35,48 @@
*/
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, icon) {
- if (Array.isArray(feature)) {
+ /* if (Array.isArray(feature)) {
for (let i = 0; i < feature.length; i++) {
highlight(feature[i], icon)
}
- } else {
- const L = window.L
- const type = feature.geometry.type
- window.mapManager.clearHighlight()
- const highlightLayer = window.mapManager.hightlightLayer
- if (type === 'MultiLineString') {
- L.geoJSON(feature, {
- style: function () {
- return {
- fillColor: 'red',
- color: 'red'
- }
- }
- }).addTo(highlightLayer)
- } else if (type === 'Point') {
+ } else { */
+ window.mapManager.clearHighlight()
+ const L = window.L
+ const type = feature.geometry.type
+ const highlightLayer = window.mapManager.hightlightLayer
+ if (type === 'Point') {
// 鍙犲姞涓�涓ぇ灏哄鐨勫浘鏍�
- let point = feature.geometry.coordinates
- point = [point[1], point[0]]
+ let point = feature.geometry.coordinates
+ point = [point[1], point[0]]
- if (icon) {
- L.marker(point, {
- icon: L.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)
+ if (icon) {
+ L.marker(point, {
+ icon: L.icon({
+ iconUrl: '/assets/images/map/' + icon,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
+ })
+ }).addTo(highlightLayer)
}
+ pulseEffect(point)
+ } else {
+ L.geoJSON(feature, {
+ style: function () {
+ return {
+ color: 'red'
+ }
+ }
+ }).addTo(highlightLayer)
}
}
@@ -98,7 +88,6 @@
export const openPropsPopup = function (xy, features) {
const lt = window.map.latLngToContainerPoint(xy)
const datas = popupDatas(features)
- console.log(datas)
if (datas.length > 0) {
window.$layer.open({
content: {
@@ -115,32 +104,21 @@
}
export const getCenterPoint = function (feature) {
+ const L = window.L
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
+ 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]
}
- if (point.length > 2) {
- point.splice(2, 1)
- }
- return point.reverse()
}
const popupDatas = function (features) {
const datas = []
+ console.log(features)
if (features) {
for (var i = 0; i < features.length; i++) {
const feature = features[i]
@@ -153,22 +131,49 @@
if (!propValues) {
continue
}
+ if (id.indexOf('pipesegment') >= 0) {
+ continue
+ }
for (const k in properties) {
if (propValues[k]) {
contents[propValues[k]] = properties[k]
}
}
- datas.push({
+ const data = {
title: LAYERS[ids[0]],
name: feature.id,
- content: contents
- })
+ 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) {
const layer = this.layers[layerId]
diff --git a/src/components/helpers/MapManager.js b/src/components/helpers/MapManager.js
index 8399486..791ebe8 100644
--- a/src/components/helpers/MapManager.js
+++ b/src/components/helpers/MapManager.js
@@ -28,9 +28,10 @@
// console.log(e)
this.clearHighlight()
this.loadWfsDatas(e.latlng).then((res) => {
- console.log(res)
- highlight(res.features)
- openPropsPopup(e.latlng, res.features)
+ if (res.features.length > 0) {
+ highlight(res.features[0])
+ openPropsPopup(e.latlng, res.features)
+ }
})
})
}
diff --git a/src/components/helpers/WfsHelper.js b/src/components/helpers/WfsHelper.js
index 8505070..d590b0a 100644
--- a/src/components/helpers/WfsHelper.js
+++ b/src/components/helpers/WfsHelper.js
@@ -2,6 +2,7 @@
* 鍔犺浇WMS,鎷兼帴FILTER,LAYERS鍙傛暟绛�
*/
import { WFS_URL } from '../../conf/Constants'
+import { lrtrim } from '../../utils/utils'
function WfsHelper () {
this.filters = []
this.typeNames = []
@@ -16,7 +17,35 @@
}
this.setTypeName = (typeName) => {
- this.typeNames = typeName
+ if (typeof typeName === 'string' || typeName instanceof String) {
+ const comma = typeName.indexOf(',')
+ if (comma >= 0) {
+ const typeNameArr = typeName.split(',')
+ for (let i = 0; i < typeNameArr.length; i++) {
+ this.addTypeName(lrtrim(typeNameArr[i]))
+ }
+ }
+ } else if (Array.isArray(typeName)) {
+ this.typeNames = typeName
+ }
+ }
+
+ this.setFilter = (filter) => {
+ console.log(filter)
+ if (typeof filter === 'string' || filter instanceof String) {
+ const eq = filter.indexOf('=')
+ const lk = filter.indexOf('like')
+ if (eq >= 0) {
+ const filterArr = filter.split('=')
+ this.addEquals(lrtrim(filterArr[0]), lrtrim(filterArr[1]))
+ }
+ if (lk >= 0) {
+ const filterArr = filter.split('like')
+ this.addLike(lrtrim(filterArr[0]), lrtrim(filterArr[1]))
+ }
+ } else if (Array.isArray(filter)) {
+ this.filters = filter
+ }
}
this.clearFilter = () => {
diff --git a/src/components/layer/src/layer.js b/src/components/layer/src/layer.js
index 2bf291b..6620ed9 100644
--- a/src/components/layer/src/layer.js
+++ b/src/components/layer/src/layer.js
@@ -20,15 +20,12 @@
* @return {[type]} [description]
*/
self.open = function (opt) {
- console.log(opt)
self.closeAll()
var options = mergeJson(opt, defOptions)
- console.log('11111' + options)
const id = `notification_${new Date().getTime()}_${seed++}`
options.id = id
options.layer = self
options.content.comp = Vue.extend(options.content.comp)
- console.log(options)
const instance = new LayerVueExtend({
data: options
})
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index 698c1d5..4f91daa 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -171,9 +171,12 @@
if (this.form.keyword) {
this.wfsHelper.addLike('name', this.form.keyword)
}
+ const filter = this.form.dataType.filter
+ if (filter) {
+ this.wfsHelper.setFilter(filter)
+ }
// const _this = this
const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
- console.log(res)
if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
this.total = res.totalFeatures
this.list = res.features
diff --git a/src/conf/Constants.js b/src/conf/Constants.js
index 2b89144..d538129 100644
--- a/src/conf/Constants.js
+++ b/src/conf/Constants.js
@@ -2,6 +2,8 @@
// export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms'
export const WMS_URL = 'http://10.238.235.179:6240/geoserver/sewer/wms'
export const WFS_URL = 'http://10.238.235.179:6240/geoserver/sewer/ows?service=WFS'
+// export const WMS_URL = 'http://xearth.cn:6240/geoserver/sewer/wms'
+// export const WFS_URL = 'http://xearth.cn:6240/geoserver/sewer/ows?service=WFS'
export const GEOM_TYPE = {
POINT: 'point',
diff --git a/src/conf/layers/LayerHbss.js b/src/conf/layers/LayerHbss.js
index c60eced..99be80b 100644
--- a/src/conf/layers/LayerHbss.js
+++ b/src/conf/layers/LayerHbss.js
@@ -53,7 +53,7 @@
name: '鎴祦闂�',
sname: '鎴祦闂�',
type: SERVICE_TYPE.WMS,
- typeName: 'sewer:collectingbasin',
+ typeName: 'sewer:chokevalve',
icon: 'sewers/.png',
checked: false
},
@@ -63,7 +63,7 @@
sname: '婧㈡祦鍫�',
minZoom: 16,
type: SERVICE_TYPE.WMS,
- typeName: 'ewer:overflowweir',
+ typeName: 'sewer:overflowweir',
icon: 'sewers/.png',
checked: false
},
@@ -74,7 +74,7 @@
minZoom: 16,
checked: false,
type: SERVICE_TYPE.WMS,
- typeName: 'ewer:oilseparator',
+ typeName: 'sewer:oilseparator',
icon: 'sewers/闅旀补姹�.png'
}
]
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 31e0afa..c187b1c 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -48,23 +48,27 @@
}
export function reversePolyLine (feature) {
- const coordinates = feature.geometry.coordinates
+ const coordinates = clone(feature.geometry.coordinates)
var latlng = []
for (var j = 0; j < coordinates.length; j++) {
- const coordinate = coordinates[j]
- latlng.push(coordinate.reverse())
+ let coordinate = coordinates[j]
+ coordinate = [coordinate[1], coordinate[0]]
+ latlng.push(coordinate)
}
return latlng
}
export function reverseMultiLine (feature) {
- const coordinates = feature.geometry.coordinates
+ const coordinates = clone(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]
+ let coor = coordinate[k]
+ if (coor.length > 2) {
+ coor = coor.splice(2, 1)
+ }
xy.push(coor.reverse())
}
latlng.push(xy)
@@ -141,4 +145,13 @@
}
}
+/**
+ * 鍘绘帀涓ゅご绌烘牸
+ * @param str
+ * @returns {*}
+ */
+export function lrtrim (str) {
+ return str.replace(/^\s+|\s+$/g, '')
+}
+
export default clone
diff --git a/src/views/popup/Popup.vue b/src/views/popup/Popup.vue
index 98ba35b..242aea0 100644
--- a/src/views/popup/Popup.vue
+++ b/src/views/popup/Popup.vue
@@ -1,6 +1,6 @@
<template>
<div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
- <el-tabs type="card" :value="0">
+ <el-tabs type="card" v-model="tabIndex" @tab-click="handleClick">
<el-tab-pane
:key="index"
v-for="(item,index) in datas"
@@ -11,6 +11,22 @@
<el-col :span="12"><B>{{key}}锛�</B></el-col>
<el-col :span="12">{{item}}</el-col>
</el-row>
+ <el-table v-if="item.tableList"
+ :data="item.tableList"
+ style="width: 100%">
+ <el-table-column
+ prop="pipesegcode"
+ label="绠℃缂栫爜">
+ </el-table-column>
+ <el-table-column
+ prop="startpointdepth"
+ label="璧风偣鍩嬫繁(m)">
+ </el-table-column>
+ <el-table-column
+ prop="startpointz"
+ label="璧风偣楂樼▼(m)">
+ </el-table-column>
+ </el-table>
</el-tab-pane>
</el-tabs>
</div>
@@ -19,13 +35,15 @@
<script>
// import '@/assets/css/map/map-popup.scss'
+import { highlight } from '../../components/helpers/LocateHelper'
+
export default {
name: 'Popup',
props: ['datas'],
data () {
return {
tabsValue: '',
- tabIndex: 2,
+ tabIndex: 0,
isShow: false,
properties: {}
}
@@ -47,9 +65,10 @@
// this.style.display='auto'
this.isShow = true
},
- onClick () {
- const param = 1111
- this.$emit('callPopup', param)
+ handleClick (tab, event) {
+ const data = this.datas[this.tabIndex]
+ const feature = data.feature
+ highlight(feature)
}
},
watch: {
--
Gitblit v1.8.0