From 9f5456f88b8397ffbab1ad80331aaa834c15d882 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期一, 17 五月 2021 17:19:52 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- /dev/null | 26 --- src/components/LayerController/service/WmsLayerService.js | 89 ------------ src/components/layer/src/layer.vue | 6 src/conf/Constants.js | 153 +++++++++++++-------- src/views/MapTemplate.vue | 6 src/components/helpers/MapManager.js | 44 +++++ src/views/popup/Popup.vue | 22 +-- src/components/helpers/LocateHelper.js | 61 ++++++-- src/components/layer/src/layer.js | 4 src/utils/utils.js | 2 10 files changed, 194 insertions(+), 219 deletions(-) diff --git a/src/components/LayerController/event/EventHandler.js b/src/components/LayerController/event/EventHandler.js deleted file mode 100644 index 2ab3cba..0000000 --- a/src/components/LayerController/event/EventHandler.js +++ /dev/null @@ -1,26 +0,0 @@ - -class EventHandler { - constructor () { - this.map = window.map - this.mapClickForLayers = {} - - window.map.on('click', (e) => { - console.log(e) - for (var k in this.mapClickForLayers) { - const func = this.mapClickForLayers[k] - console.log(func) - func(e) - } - }) - } - - addLayerEvent (config, callback) { - this.mapClickForLayers[config.code] = callback - } - - removeEvent (config) { - delete this.mapClickForLayers[config.code] - } -} - -export default EventHandler diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js index 1434664..4706862 100644 --- a/src/components/LayerController/service/WmsLayerService.js +++ b/src/components/LayerController/service/WmsLayerService.js @@ -1,8 +1,5 @@ -import AjaxUtils from '../../../utils/AjaxUtils' import { WMS_URL } from '../../../conf/Constants' -import Popup from '@views/popup/Popup' import WmsLayerList from '../dataset/WmsLayerList' -import { highlight } from '../../helpers/LocateHelper' /** * todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐� @@ -40,7 +37,6 @@ } init () { - this.clickListener() } add (config) { @@ -77,91 +73,6 @@ params.cql_filter = filter } this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map) - } - - clickListener () { - window.map.on('click', (e) => { - // console.log(e) - window.mapManager.clearHighlight() - 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 layers = this.wmsLayerList.getLayers() - const filter = this.wmsLayerList.getFilters() - if (layers.length > 0) { - const params = Object.assign({ - LAYERS: layers, - QUERY_LAYERS: layers, - WIDTH: size.x, - HEIGHT: size.y, - X: Math.round(point.x), - Y: Math.round(point.y), - BBOX: this.map.getBounds().toBBoxString() - }, this.params) - if (filter.length > 0) { - params.cql_filter = filter - } - AjaxUtils.get4JsonDataByUrl(WMS_URL, 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 - highlight(feature) - // const coordinates = feature.geometry.coordinates - popupDatas.push({ - title: properties.wellname || properties.devicename || properties.name || properties.pipename, - 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() */ - - if (window.layerFactory.clickSwitch) { - window.$layer.open({ - content: { - content: Popup, // 缁勪欢 - data: { // 浼犻�掔殑鍙傛暟 - datas: popupDatas - } - }, - title: '', // 鏍囬 - left: e.originalEvent.clientX, - top: e.originalEvent.clientY - }) - } - // this.popupComp.setDatas(popupDatas) - // this.popupComp.setShow() - } - }) - } - }) } } diff --git a/src/components/helpers/LocateHelper.js b/src/components/helpers/LocateHelper.js index 876e74e..4160b89 100644 --- a/src/components/helpers/LocateHelper.js +++ b/src/components/helpers/LocateHelper.js @@ -1,5 +1,6 @@ import { pulseEffect, reversePolyLine } from '../../utils/utils' - +import Popup from '@views/popup/Popup' +import { LAYERPROPS, LAYERS } from '../../conf/Constants' /** * 鏍规嵁浼犵殑 feature瀵硅薄瀹氫綅锛� * @param code @@ -25,6 +26,7 @@ export const highlight = function (feature, config) { const L = window.L const type = feature.geometry.type + window.mapManager.clearHighlight() const highlightLayer = window.mapManager.hightlightLayer if (type === 'MultiLineString') { L.geoJSON(feature, { @@ -50,29 +52,56 @@ }).addTo(highlightLayer) } pulseEffect(point) + const features = window.mapManager.loadWfsDatas(point) + openPopup(point, features) } 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 +export const openPopup = 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 +} + +const popupDatas = function (features) { + const datas = [] + 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 = {} + for (const k in properties) { + if (propValues[k]) { + contents[propValues[k]] = properties[k] + } + } + datas.push({ + title: LAYERS[ids[0]], + name: feature.id, + content: contents + }) + console.log(properties) + } + } + return datas } export const getLayer = function (layerId, id) { diff --git a/src/components/helpers/MapManager.js b/src/components/helpers/MapManager.js index 625a78e..9795d33 100644 --- a/src/components/helpers/MapManager.js +++ b/src/components/helpers/MapManager.js @@ -1,22 +1,58 @@ +import AjaxUtils from '../../utils/AjaxUtils' +import { WMS_URL } from '../../conf/Constants' +import { openPopup } from './LocateHelper' + class MapManager { constructor () { this.hightlightLayer = window.L.featureGroup({}).addTo(window.map) this.clickDialogSwitch = true // 鍥惧眰鐐瑰嚮寮圭獥寮�鍏� this.L = window.L this.map = window.map + // wms getfeatureinfo 榛樿鍙傛暟 + this.defaultWmsParams = { + 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' + } } mapClickListener () { - window.map.on('click', (e) => { + this.map.on('click', (e) => { + // console.log(e) + this.clearHighlight() + this.loadWfsDatas(e.latlng) + }) + } + loadWfsDatas (latlng) { + const size = this.map.getSize() + var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom()) + const wmsLayerService = window.layerFactory.wmsLayerService + const layers = wmsLayerService.wmsLayerList.getLayers() + // const filters = wmsLayerService.wmsLayerList.getFilters() + const params = Object.assign({ + LAYERS: layers, + QUERY_LAYERS: layers, + WIDTH: size.x, + HEIGHT: size.y, + X: Math.round(point.x), + Y: Math.round(point.y), + BBOX: this.map.getBounds().toBBoxString() + }, this.defaultWmsParams) + AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => { + openPopup(latlng, res.data.features) }) } clearHighlight () { this.hightlightLayer.clearLayers() - } - - iconPoint (latlng) { } } diff --git a/src/components/layer/src/layer.js b/src/components/layer/src/layer.js index b0581c1..2bf291b 100644 --- a/src/components/layer/src/layer.js +++ b/src/components/layer/src/layer.js @@ -23,10 +23,12 @@ 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.content = Vue.extend(options.content.content) + options.content.comp = Vue.extend(options.content.comp) + console.log(options) const instance = new LayerVueExtend({ data: options }) diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue index 3221a11..7877f0f 100644 --- a/src/components/layer/src/layer.vue +++ b/src/components/layer/src/layer.vue @@ -47,10 +47,8 @@ }, init () { const propsData = helper.deepClone(this.content.data) || {} - propsData.layerid = this.id - propsData.lydata = this.content.data - propsData.lyoption = this.options - const instance = new this.content.content({ + console.log(propsData) + const instance = new this.content.comp({ // parent: this.content.parent, propsData: propsData }) diff --git a/src/conf/Constants.js b/src/conf/Constants.js index e615e29..0935f69 100644 --- a/src/conf/Constants.js +++ b/src/conf/Constants.js @@ -35,9 +35,33 @@ ICON_SIZE: [10, 10] } -export const props = { +export const LAYERS = { + pipenetwork: '绠$綉', + pipeline: '绠$嚎', + manhole: '绐ㄤ簳', + valve: '闃�闂�', + pipegallery: '绠″粖锛堝甫锛�', + piperack: '绠℃灦锛堝ⅸ锛�', + tee: '涓夐��', + fourlink: '鍥涢��', + elbow: '寮ご', + raingate: '闆ㄧ瀛�', + firedike: '闃茬伀鍫�', + collectingbasin: '闆嗘按姹狅紙缃愶級', + dischargeport: '鎺掓斁鍙�', + overflowweir: '婧㈡祦鍫�', + oilseparator: '闅旀补姹�', + pointhydrology: '姘翠綋', + pointpreservationzone: '鑷劧淇濇姢鍖�', + hospital: '鍖婚櫌', + emergencyres: '绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�', + emergencyesources: '搴旀�ョ墿璧�', + firefightingunit: '娑堥槻鍗曚綅' +} + +export const LAYERPROPS = { // 绠$綉 - pipenet: { + pipenetwork: { // 绠$綉 name: '鍚嶇О', LINENUMTYPE: '绠$嚎绫诲瀷', @@ -55,122 +79,135 @@ }, // 绠$嚎 pipeline: { - + // 绠$綉 + name: '鍚嶇О', + linenumtype: '绠$嚎绫诲瀷', + pipename: '绠$嚎鍚嶇О', + mediumtype: '杈撻�佷粙璐�', + length: '闀垮害(m)', + startposname: '璧风偣浣嶇疆鍚嶇О', + endposname: '缁堢偣浣嶇疆鍚嶇О', + buriedtime: '鍩嬭鏃堕棿', + coatingmaterial: '闃茶厫鐘跺喌', + inservicetime: '鎶曚骇鏃堕棿', + unitname: '鎵�灞炲崟浣嶅悕绉�', + orgname: '鎵�灞炰紒涓氬悕绉�', + operationalstatus: '杩愯鐘舵��' }, // 绐ㄤ簳 manhole: { type: '绫诲瀷', wellmaterial: '浜曠洊鏉愯川', - HAVESAFETYNET: '鏄惁鏈夊畨鍏ㄧ綉', - DATASOURCE: '鏁版嵁鏉ユ簮', - OPERATIONALSTATUS: '杩愯鐘舵��' + havesafetynet: '鏄惁鏈夊畨鍏ㄧ綉', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' }, // 闃�闂� valve: { - VALVETYPE: '闃�闂ㄧ被鍨�', - EXECUTAGENCYF: '鎵ц鏈烘瀯褰㈠紡', - DATASOURCE: '鏁版嵁鏉ユ簮', - OPERATIONALSTATUS: '杩愯鐘舵��' + valvetype: '闃�闂ㄧ被鍨�', + executagencyf: '鎵ц鏈烘瀯褰㈠紡', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' }, // 绠″粖锛堝甫锛� pipegallery: { - DATASOURCE: '鏁版嵁鏉ユ簮', - OPERATIONALSTATUS: '杩愯鐘舵��' + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' }, // 绠℃灦锛堝ⅸ锛� piperack: { - PIPERACKTYPE: '绫诲瀷', - PIPERACKST: '绠℃灦(澧╋級缁撴瀯绫诲瀷', - LONGITUDINALPIPERACK: '鏄惁鏈夌旱鍚戞灦', - DATASOURCE: '鏁版嵁鏉ユ簮', - OPERATIONALSTATUS: '杩愯鐘舵��' + piperacktype: '绫诲瀷', + piperackst: '绠℃灦(澧╋級缁撴瀯绫诲瀷', + longitudinalpiperack: '鏄惁鏈夌旱鍚戞灦', + datasource: '鏁版嵁鏉ユ簮', + operationalstatus: '杩愯鐘舵��' }, // 涓夐�� tee: { - TEETYPE: '涓夐�氱被鍨�', - EXPORTCONNECTM: '鍑哄彛杩炴帴鏂瑰紡', - ENTRYCONTYPE: '鍏ュ彛杩炴帴鏂瑰紡', - TEEM: '涓夐�氭潗鏂�', - BRANCHCONNTYPE: '鏀杩炴帴绫诲瀷', - OPERATIONALSTATUS: '杩愯鐘舵��' + teetype: '涓夐�氱被鍨�', + exportconnectm: '鍑哄彛杩炴帴鏂瑰紡', + entrycontype: '鍏ュ彛杩炴帴鏂瑰紡', + teem: '涓夐�氭潗鏂�', + branchconntype: '鏀杩炴帴绫诲瀷', + operationalstatus: '杩愯鐘舵��' }, // 鍥涢�� fourlink: { - FOURTYPE: '鍥涢�氱被鍨�', - EXPORTCONTYPE: '鍑哄彛杩炴帴鏂瑰紡', - ENTRYCONTYPE: '鍏ュ彛杩炴帴鏂瑰紡', - FOURM: '鍥涢�氭潗鏂�', - BRANCHCONNTYPE1: '鏀嚎1杩炴帴鏂瑰紡', - BRANCHCONNTYPE2: '鏀嚎2杩炴帴鏂瑰紡', - OPERATIONALSTATUS: '杩愯鐘舵��' + fourtype: '鍥涢�氱被鍨�', + exportcontype: '鍑哄彛杩炴帴鏂瑰紡', + entrycontype: '鍏ュ彛杩炴帴鏂瑰紡', + fourm: '鍥涢�氭潗鏂�', + branchconntype1: '鏀嚎1杩炴帴鏂瑰紡', + branchconntype2: '鏀嚎2杩炴帴鏂瑰紡', + operationalstatus: '杩愯鐘舵��' }, // 寮ご elbow: { - ELBOWTYPE: '寮ご绫诲瀷', - ELBOWMATERIAL: '寮ご鏉愭枡', - ANTICORROS: '闃茶厫鏉愭枡', - ENTRYCONNTYPE: '鍏ュ彛杩炴帴鏂瑰紡', - OUTLETCONNTYPE: '鍑哄彛杩炴帴鏂瑰紡', - OPERATIONALSTATUS: '杩愯鐘舵��' + elbowtype: '寮ご绫诲瀷', + elbowmaterial: '寮ご鏉愭枡', + anticorros: '闃茶厫鏉愭枡', + entryconntype: '鍏ュ彛杩炴帴鏂瑰紡', + outletconntype: '鍑哄彛杩炴帴鏂瑰紡', + operationalstatus: '杩愯鐘舵��' }, // 闆ㄧ瀛� raingate: { - OPERATIONALSTATUS: '杩愯鐘舵��' + operationalstatus: '杩愯鐘舵��' }, // 闃茬伀鍫� firedike: { - OPERATIONALSTATUS: '杩愯鐘舵��' + operationalstatus: '杩愯鐘舵��' }, // 闆嗘按姹狅紙缃愶級 collectingbasin: { - OPERATIONALSTATUS: '杩愯鐘舵��' + operationalstatus: '杩愯鐘舵��' }, // 鎺掓斁鍙� dischargeport: { - MEDIUMTYPE: '浠嬭川', - PFKTYPE: '鎺掓斁鍙g被鍨�', - LEVEL: '绾у埆', - OPERATIONALSTATUS: '杩愯鐘舵��' + mediumtype: '浠嬭川', + pfktype: '鎺掓斁鍙g被鍨�', + level: '绾у埆', + operationalstatus: '杩愯鐘舵��' }, // 鎴祦闂� // 婧㈡祦鍫� overflowweir: { - MEDIUMTYPE: '闃叉孩浠嬭川', - OPERATIONALSTATUS: '杩愯鐘舵��' + mediumtype: '闃叉孩浠嬭川', + operationalstatus: '杩愯鐘舵��' }, // 闅旀补姹� oilseparator: { - OPERATIONALSTATUS: '杩愯鐘舵��' + operationalstatus: '杩愯鐘舵��' }, // 姘翠綋 pointhydrology: { - HYDROTYPE: '姘寸郴绫诲瀷', - DRINKINGRESOURCEIND: '鏄惁鏄ギ鐢ㄦ按婧�', - SEASONALRIVERIND: '鏄惁鏄鑺傛�ф渤娴�', - RESERVOIRLOCATION: '姘村簱浣嶇疆', - OPERATIONALSTATUS: '杩愯鐘舵��' + hydrotype: '姘寸郴绫诲瀷', + drinkingresourceind: '鏄惁鏄ギ鐢ㄦ按婧�', + seasonalriverind: '鏄惁鏄鑺傛�ф渤娴�', + reservoirlocation: '姘村簱浣嶇疆', + operationalstatus: '杩愯鐘舵��' }, // 鑷劧淇濇姢鍖� pointpreservationzone: { - DATASOURCE: '鏁版嵁鏉ユ簮' + datasource: '鏁版嵁鏉ユ簮' }, // 鍖婚櫌 hospital: { - HOSPITALLEAVAL: '鍖婚櫌璧勮川绛夌骇', - SUBTYPECD: '鍖婚櫌绫诲瀷', - DATASOURCE: '鏁版嵁鏉ユ簮' + hospitalleaval: '鍖婚櫌璧勮川绛夌骇', + subtypecd: '鍖婚櫌绫诲瀷', + datasource: '鏁版嵁鏉ユ簮' }, // 绀句細涓撲笟搴旀�ユ晳鎻撮槦浼� emergencyres: { - DATASOURCE: '鏁版嵁鏉ユ簮' + datasource: '鏁版嵁鏉ユ簮' }, // 搴旀�ョ墿璧� emergencyesources: { - DATASOURCE: '鏁版嵁鏉ユ簮' + datasource: '鏁版嵁鏉ユ簮' }, // 娑堥槻鍗曚綅 firefightingunit: { - DATASOURCE: '鏁版嵁鏉ユ簮' + datasource: '鏁版嵁鏉ユ簮' } } diff --git a/src/utils/utils.js b/src/utils/utils.js index 53116c0..304c202 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -35,7 +35,7 @@ color: colors[0], fillColor: '' }) - var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.map) + var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.mapManager.hightlightLayer) // 瀹氭椂 var timeInterval = setInterval(() => { if (times > 0) { diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index 67a6523..e568cfc 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -38,7 +38,6 @@ // // 鍏叡灞曠ず鏁版嵁 // import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' -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' @@ -103,10 +102,6 @@ // this.AddGasHelper() // this.ChangeWaterState() - - var eventHandler = new EventHandler() - window.eventHandler = eventHandler - var layerFactory = new LayerFactory({ L: window.L, map: this.map @@ -115,6 +110,7 @@ layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine) window.layerFactory = layerFactory window.mapManager = new MapManager() + window.mapManager.mapClickListener() this.saveMapStatus() // this.setMapObj(this.mapObj) // this.setBasemapHelper(this.basemapHelper) diff --git a/src/views/popup/Popup.vue b/src/views/popup/Popup.vue index a3c7836..98ba35b 100644 --- a/src/views/popup/Popup.vue +++ b/src/views/popup/Popup.vue @@ -1,15 +1,15 @@ <template> <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px"> - <el-tabs value="0" type="card"> + <el-tabs type="card" :value="0"> <el-tab-pane - :key="item.name" + :key="index" v-for="(item,index) in datas" :label="item.title" - :name="index" + :name="index.toString()" > - <el-row v-for="(v,k) in filter(item.content)" :key="k"> - <el-col :span="12"><B>{{k}}锛�</B></el-col> - <el-col :span="12">{{v}}</el-col> + <el-row v-for="(item,key) in item.content" :key="key"> + <el-col :span="12"><B>{{key}}锛�</B></el-col> + <el-col :span="12">{{item}}</el-col> </el-row> </el-tab-pane> </el-tabs> @@ -18,7 +18,6 @@ <script> // import '@/assets/css/map/map-popup.scss' -import { props } from '../../conf/Constants' export default { name: 'Popup', @@ -28,8 +27,7 @@ tabsValue: '', tabIndex: 2, isShow: false, - properties: {}, - props: props + properties: {} } }, computed: { @@ -45,11 +43,6 @@ // console.log(obj) return obj }, - setDatas (layer) { - console.log(layer) - this.datas = layer - this.tabsValue = layer[0].name - }, setShow () { // this.style.display='auto' this.isShow = true @@ -61,7 +54,6 @@ }, watch: { datas (newVal) { - console.log(newVal) if (newVal != null) { this.tabsValue = newVal[0].name } -- Gitblit v1.8.0