From 150a37f948214be4bd183b30f3f2865a6f1c519f Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 29 四月 2021 14:16:18 +0800
Subject: [PATCH] 替换wms服务初步
---
src/components/LayerController/event/EventHandler.js | 25 +++
src/components/LayerController/service/WmsLayerService.js | 161 +++++++++++++++++++
src/conf/layers/LayerPipeLines.js | 6
src/components/LayerController/logic/PipeLineAnimal.js | 2
src/conf/layers/LayerFsss.js | 15 +
src/components/LayerController/service/WfsLayerService.js | 2
src/conf/layers/LayerHbss.js | 5
src/conf/Constants.js | 1
src/views/MapTemplate.vue | 18 +
src/components/LayerController/service/LayerFactory.js | 52 +++++
src/views/popup/Popup.vue | 57 +-----
src/components/LayerController/service/WmsGroupLayerService.js | 117 ++++++++++++++
12 files changed, 390 insertions(+), 71 deletions(-)
diff --git a/src/components/LayerController/event/EventHandler.js b/src/components/LayerController/event/EventHandler.js
new file mode 100644
index 0000000..7ff6a58
--- /dev/null
+++ b/src/components/LayerController/event/EventHandler.js
@@ -0,0 +1,25 @@
+
+class EventHandler {
+ constructor () {
+ this.map = window.map
+ this.mapClickForLayers = {}
+
+ window.map.on('click', (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/logic/PipeLineAnimal.js b/src/components/LayerController/logic/PipeLineAnimal.js
index 8726b4a..11c54ef 100644
--- a/src/components/LayerController/logic/PipeLineAnimal.js
+++ b/src/components/LayerController/logic/PipeLineAnimal.js
@@ -9,7 +9,7 @@
this.init = () => {
}
- this.create = () => {
+ this.start = () => {
const layers = LayerPipeLines.layers
for (var i = 0; i < layers.length; i++) {
const config = layers[i]
diff --git a/src/components/LayerController/service/LayerFactory.js b/src/components/LayerController/service/LayerFactory.js
index 2ab18e6..57bb1cf 100644
--- a/src/components/LayerController/service/LayerFactory.js
+++ b/src/components/LayerController/service/LayerFactory.js
@@ -1,7 +1,14 @@
import WfsLayerService from './WfsLayerService'
-import WmsLayerService from './WmsLayerService'
import { clone } from '../../../utils/utils'
import { logicMapper } from '../../../conf/Constants'
+import WmsLayerService from './WmsLayerService'
+
+/**
+ * init 鍙垵濮嬪寲涓�娆�
+ * start 姣忔璋冪敤鍥惧眰鏄剧ずshow()鏃讹紝閮戒細璋冪敤
+ * destory 姣忔璋冪敤鍥惧眰闅愯棌hide()鏃讹紝閮戒細璋冪敤
+ *
+ */
class LayerFactory {
constructor (options) {
this.L = options.L
@@ -9,9 +16,17 @@
this.layers = {}
this.layersLogic = {}
this.minZoomLayers = {}
+ this.wmsLayers = []
}
init (layerConfig) {
+ this.initConfig(layerConfig)
+ // wms鏈嶅姟鍙渶瑕佸垵濮嬪寲涓�娆�
+ this.wmsLayerService = new WmsLayerService(this.wmsLayers)
+ this.wmsLayerService.init()
+ }
+
+ initConfig (layerConfig) {
// 1. 閬嶅巻layer config
if (layerConfig) {
for (var i = 0; i < layerConfig.length; i++) {
@@ -19,6 +34,11 @@
var layers = config.layers
var childLayer = config.childLayer
var checked = config.checked
+ /* if (config.groupName) {
+ const wmsGroupLayerService = new WmsGroupLayerService(config)
+ wmsGroupLayerService.init()
+ continue
+ } */
layers && this.init(config.layers)
childLayer && this.init(config.childLayer)
@@ -45,7 +65,7 @@
loadLogic (config) {
var code = config.code
var wfs = config.wfs
- var wms = config.wms
+ var wmsLayers = config.wmsLayers
const file = logicMapper[code]
var logic = this.layersLogic[code]
@@ -55,14 +75,24 @@
logic = new BusiLayer()
} else if (wfs) {
logic = new WfsLayerService(config)
- } else if (wms) {
- logic = new WmsLayerService(config)
+ } else if (wmsLayers) {
+ var layer = {}
+ layer[config.code] = config
+ this.wmsLayers.push(layer)
}
}
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 +111,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 +139,7 @@
layer && this.map.removeLayer(layer)
const logic = this.loadLogic(config)
logic && logic.destory && logic.destory()
+ this.wmsLayerService && this.wmsLayerService.remove(config)
}
/**
@@ -107,7 +147,7 @@
* @param layerConfig
*/
initEvent (layerConfig) {
- this.map.on('zoomend ', () => this.toggleByZoom())
+ // this.map.on('zoomend ', () => this.toggleByZoom())
}
toggleByZoom () {
diff --git a/src/components/LayerController/service/WfsLayerService.js b/src/components/LayerController/service/WfsLayerService.js
index 0c601a2..a01d35d 100644
--- a/src/components/LayerController/service/WfsLayerService.js
+++ b/src/components/LayerController/service/WfsLayerService.js
@@ -1,5 +1,5 @@
/**
- * 鍔犺浇涓氬姟鏁版嵁鍥惧眰
+ * 鍔犺浇wfs鏈嶅姟鍥惧眰
*/
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'
diff --git a/src/components/LayerController/service/WmsGroupLayerService.js b/src/components/LayerController/service/WmsGroupLayerService.js
new file mode 100644
index 0000000..81e0e18
--- /dev/null
+++ b/src/components/LayerController/service/WmsGroupLayerService.js
@@ -0,0 +1,117 @@
+import AjaxUtils from '../../../utils/AjaxUtils'
+import { PIPELINE_WMS } from '../../../conf/Constants'
+
+/**
+ * wms 鍥惧眰缁勭殑绠＄悊
+ */
+class WmsGroupLayerService {
+ constructor (config) {
+ this.config = config
+ this.L = window.L
+ // 瀛樻斁getfeatureinfo鐨勫浘灞傜粍
+ this.featureGroup = this.L.featureGroup({})
+ this.map = window.map
+ this.popupComp = window.popupComp
+ // {groupName:{url:'.../wms',layers:[]}}
+ this.groups = []
+ this.map.on('click', (e) => this.click(e))
+ }
+
+ init () {
+ this.layer = this.L.featureGroup({}).addTo(this.map)
+ this.initGroup(this.config)
+ this.load()
+ }
+
+ hide (config) {
+ const layerName = config.layerName
+ for (var i = 0; i < this.groups.length; i++) {
+ const group = this.groups[i]
+ for (var k in group) {
+ const v = group[k]
+ const index = v.layers.indexOf(layerName)
+ if (index >= 0) {
+ delete v.layers[index]
+ }
+ }
+ }
+ }
+
+ initGroup (config) {
+ const groupName = this.config.groupName
+ const layers = config.layers
+ layers && this.initGroup(layers)
+ for (var i = 0; i < config.length; i++) {
+ const layerConfig = config[i]
+ const layerName = layerConfig.layerName
+ const group = this.groups[groupName]
+ if (group) {
+ group.layers.push(layerName)
+ } else {
+ this.groups[groupName] = {
+ url: '',
+ layers: [layerName]
+ }
+ }
+ }
+ }
+
+ load () {
+ for (var k in this.groups) {
+ console.log(k)
+ this.L.tileLayer.wms(PIPELINE_WMS, {
+ format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
+ transparent: true,
+ layers: k // todo
+ }).addTo(this.layer).bringToFront()
+ }
+ }
+
+ click (e) {
+ 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 params = {
+ VERSION: '1.1.1',
+ SERVICE: 'WMS',
+ REQUEST: 'GetFeatureInfo',
+ // bbox: bbox,
+ FORMAT: 'image/png',
+ INFO_FORMAT: 'application/json',
+ TRANSPARENT: true,
+ LAYERS: 'sewer:pipeline_group',
+ QUERY_LAYERS: 'sewer:pipeline_group', // todo
+ FEATURE_COUNT: 50,
+ SRS: 'EPSG:4326',
+ WIDTH: size.x,
+ HEIGHT: size.y,
+ EXCEPTIONS: 'application/vnd.ogc.se_inimage',
+ X: Math.round(point.x),
+ Y: Math.round(point.y),
+ BBOX: this.map.getBounds().toBBoxString()
+ }
+
+ AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
+ let features = res.data.features
+ features = features[0]
+ var myIcon = this.L.divIcon({ className: 'my-div-icon' })
+ this.L.marker(features.geometry.coordinates.reverse(), {
+ icon: myIcon
+ }).addTo(this.featureGroup)
+ .bindPopup((layer) => {
+ this.popupComp.setDatas({ feature: features })
+ this.popupComp.setShow()
+ return this.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
+ })
+ .openPopup()
+ })
+ }
+}
+
+export default WmsGroupLayerService
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index 859334d..b286194 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/src/components/LayerController/service/WmsLayerService.js
@@ -1,10 +1,165 @@
+import AjaxUtils from '../../../utils/AjaxUtils'
+import { PIPELINE_WMS } from '../../../conf/Constants'
+
+/**
+ * todo 寰楄�冭檻涓�涓浘灞傞厤缃簡澶氫釜 wmsLayers鐨勬儏鍐�
+ */
class WmsLayerService {
- constructor (config) {
- this.config = config
+ constructor (layersConfig) {
+ this.L = window.L
+ this.map = window.map
+ this.popupComp = window.popupComp
+ // wms getfeatureinfo 榛樿鍙傛暟
+ this.params = {
+ 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'
+ }
+ this.layersConfig = layersConfig
+ // 瀛樻斁getfeatureinfo鐨勫浘灞傜粍
+ this.featureGroup = this.L.featureGroup({}).addTo(this.map)
+
+ this.layers = []
+ for (var i = 0; i < layersConfig.length; i++) {
+ const config = layersConfig[i]
+ for (var k in config) {
+ if (k === 'wmsLayers') {
+ this.layers.push(config[k])
+ }
+ }
+ }
}
- init (layer) {
+ init () {
+ if (this.layers) {
+ this.load(this.layers)
+ this.clickListener()
+ }
+ }
+ add (config) {
+ const code = config.code
+ for (var k in this.layersConfig) {
+ if (code === k) {
+ return false
+ }
+ }
+ this.layers.push(config.wmsLayers)
+ this.wmsLayer.setParams({ layers: this.layers.join(',') })
+ }
+
+ remove (config) {
+ const wmsLayers = config.wmsLayers
+ for (var i = 0; i < this.layers.length; i++) {
+ const layerName = this.layers[i]
+ if (wmsLayers === layerName) {
+ this.layers.splice(i, 1)
+ }
+ }
+ this.wmsLayer.setParams({ layers: this.layers.join(',') })
+ }
+
+ load (layers) {
+ this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
+ format: 'image/png', // 杩斿洖鐨勬暟鎹牸寮�
+ transparent: true,
+ layers: layers.join(',')
+ }).addTo(this.map)
+ }
+
+ clickListener () {
+ window.map.on('click', (e) => {
+ 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 params = Object.assign({
+ LAYERS: this.layers.join(','),
+ QUERY_LAYERS: this.layers.join(','),
+ WIDTH: size.x,
+ HEIGHT: size.y,
+ X: Math.round(point.x),
+ Y: Math.round(point.y),
+ BBOX: this.map.getBounds().toBBoxString()
+ }, this.params)
+ AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, 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
+ this.highlight(feature)
+ // const coordinates = feature.geometry.coordinates
+ popupDatas.push({
+ title: properties.wellname || properties.devicename || properties.name,
+ 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()
+ }
+ })
+ })
+ }
+
+ reverse (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
+ }
+
+ highlight (feature) {
+ const type = feature.geometry.type
+ if (type === 'MultiLineString') {
+ this.L.polyline(this.reverse(feature)).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)
+ }
}
}
diff --git a/src/conf/Constants.js b/src/conf/Constants.js
index 8384fca..e7fcd49 100644
--- a/src/conf/Constants.js
+++ b/src/conf/Constants.js
@@ -5,6 +5,7 @@
}
export const PIPELINE_WFS = 'http://xearth.cn:8088/server/ogcserver/PipeLine2/wfs'
+export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms'
export const logicMapper = {
wasteGasPfk: 'WasteGas.js',
diff --git a/src/conf/layers/LayerFsss.js b/src/conf/layers/LayerFsss.js
index 0e5db5b..86cc169 100644
--- a/src/conf/layers/LayerFsss.js
+++ b/src/conf/layers/LayerFsss.js
@@ -13,7 +13,8 @@
name: '绠℃',
sname: '绠℃',
checked: false,
- wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'宸撮櫟鐭冲寲\''
+ wmsLayers: 'sewer:pipesegment'
+ // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'宸撮櫟鐭冲寲\''
},
{
code: 'fourlink',
@@ -21,7 +22,8 @@
sname: '鍥涢��',
checked: true,
minZoom: 16,
- wfs: WFS_URL + '?TYPENAME=鍥涢��',
+ wmsLayers: 'sewer:fourlink',
+ // wfs: WFS_URL + '?TYPENAME=鍥涢��',
icon: 'sewers/鍥涢��.png'
},
{
@@ -30,7 +32,8 @@
sname: '涓夐��',
checked: false,
minZoom: 16,
- wfs: WFS_URL + '?TYPENAME=涓夐��',
+ wmsLayers: 'sewer:tee',
+ // wfs: WFS_URL + '?TYPENAME=涓夐��',
icon: 'sewers/涓夐��.png'
},
{
@@ -61,7 +64,8 @@
minZoom: 10,
sname: '闃�闂�',
checked: false,
- wfs: WFS_URL + '?TYPENAME=闃�闂�',
+ wmsLayers: 'sewer:valve',
+ // wfs: WFS_URL + '?TYPENAME=闃�闂�',
icon: 'sewers/闃�闂�.png'
},
{
@@ -70,7 +74,8 @@
sname: '寮ご',
minZoom: 16,
checked: false,
- wfs: WFS_URL + '?TYPENAME=寮ご',
+ wmsLayers: 'sewer:elbow',
+ // wfs: WFS_URL + '?TYPENAME=寮ご',
icon: 'sewers/寮ご.png'
}
]
diff --git a/src/conf/layers/LayerHbss.js b/src/conf/layers/LayerHbss.js
index e0bceeb..97054d7 100644
--- a/src/conf/layers/LayerHbss.js
+++ b/src/conf/layers/LayerHbss.js
@@ -14,7 +14,7 @@
sname: '绐ㄤ簳',
checked: false,
minZoom: 16,
- wfs: WFS_URL + '?TYPENAME=绐ㄤ簳',
+ wmsLayers: 'sewer:manhole',
icon: 'sewers/绐ㄤ簳.png'
},
{
@@ -23,7 +23,8 @@
sname: '闆ㄧ瀛�',
checked: false,
minZoom: 16,
- wfs: WFS_URL + '?TYPENAME=闆ㄧ瀛�',
+ wmsLayers: 'sewer:raingate',
+ // wfs: WFS_URL + '?TYPENAME=闆ㄧ瀛�',
icon: 'sewers/闆ㄧ瀛�.png'
},
{
diff --git a/src/conf/layers/LayerPipeLines.js b/src/conf/layers/LayerPipeLines.js
index dc24179..4b4b345 100644
--- a/src/conf/layers/LayerPipeLines.js
+++ b/src/conf/layers/LayerPipeLines.js
@@ -20,8 +20,8 @@
sname: '绠＄綉',
checked: false,
type: 0,
+ wmsLayers: 'sewer:pipeline_rain',
// wfs: WFS_URL + '?TYPENAME=绠＄綉&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>闆ㄦ按绠＄嚎</Literal></PropertyIsEqualTo></Filter>',
- wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=linenumtype=\'闆ㄦ按绠＄嚎\'',
icon: 'sewers/闆ㄦ按绾�.png',
color: '#0070ff',
minZoom: 13,
@@ -35,6 +35,7 @@
name: '浜嬫晠姘寸嚎',
sname: '浜嬫晠姘�',
checked: false,
+ wmsLayers: 'sewer:pipeline_accident',
type: 0,
minZoom: 13,
wfs: WFS_URL + '?TYPENAME=浜嬫晠姘�'
@@ -47,7 +48,8 @@
type: 0,
minZoom: 13,
color: '#ffaa00',
- wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'鍚补姹℃按\'',
+ wmsLayers: 'sewer:pipeline_sewer',
+ // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'鍚补姹℃按\'',
styles: {
COLOR: '#ffaa00',
FILL_COLOR: '#ffaa00'
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 1d3e4d9..638d6cc 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -35,6 +35,7 @@
// // 鍏叡灞曠ず鏁版嵁
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
+import EventHandler from '../components/LayerController/event/EventHandler'
export default {
name: 'MapTemplate',
@@ -86,13 +87,6 @@
this.$refs.toolBox.map = this.map
window.popupComp = this.$refs.popup
- var layerFactory = new LayerFactory({
- L: window.L,
- map: this.map
- })
- layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
- layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
- window.layerFactory = layerFactory
this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜
this.basemapHelper.initBasemap(this.config, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘
@@ -102,6 +96,16 @@
// this.AddGasHelper()
// this.ChangeWaterState()
+ var eventHandler = new EventHandler()
+ window.eventHandler = eventHandler
+
+ var layerFactory = new LayerFactory({
+ L: window.L,
+ map: this.map
+ })
+ layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
+ layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
+ window.layerFactory = layerFactory
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 02703b5..8373db6 100644
--- a/src/views/popup/Popup.vue
+++ b/src/views/popup/Popup.vue
@@ -7,9 +7,9 @@
:label="item.title"
:name="item.name"
>
- <el-row v-for="(v,k) in filter" :key="k">
- <el-col :span="10"><B>{{k}}锛�</B></el-col>
- <el-col :span="14">{{v}}</el-col>
+ <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>
</el-tab-pane>
</el-tabs>
@@ -24,7 +24,7 @@
name: 'Popup',
data () {
return {
- tabsValue: '1',
+ tabsValue: '',
tabs: [],
tabIndex: 2,
isShow: false,
@@ -33,52 +33,21 @@
}
},
computed: {
- filter () {
- var obj = {}
- for (const key in this.properties) {
- if (this.props[key]) {
- obj[this.props[key]] = this.properties[key]
- }
- }
- return obj
- }
},
methods: {
- handleTabsEdit (targetName, action) {
- if (action === 'add') {
- const newTabName = ++this.tabIndex + ''
- this.editableTabs.push({
- title: 'New Tab',
- name: newTabName,
- content: 'New Tab content'
- })
- this.editableTabsValue = newTabName
- }
- if (action === 'remove') {
- const tabs = this.editableTabs
- let activeName = this.editableTabsValue
- if (activeName === targetName) {
- tabs.forEach((tab, index) => {
- if (tab.name === targetName) {
- const nextTab = tabs[index + 1] || tabs[index - 1]
- if (nextTab) {
- activeName = nextTab.name
- }
- }
- })
+ filter (content) {
+ var obj = {}
+ for (const key in content) {
+ if (this.props[key]) {
+ obj[this.props[key]] = content[key]
}
-
- this.editableTabsValue = activeName
- this.editableTabs = tabs.filter(tab => tab.name !== targetName)
}
+ console.log(obj)
+ return obj
},
setDatas (layer) {
- console.log(layer)
- this.tabs = [{
- title: layer.feature.properties.name || layer.feature.id,
- name: '1'
- }]
- this.properties = layer.feature.properties
+ this.tabs = layer
+ this.tabsValue = layer[0].name
},
setShow () {
// this.style.display='auto'
--
Gitblit v1.8.0