From 3cc9f0efa740810f88738788b062f348d8d9b48a Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 08 三月 2021 09:34:13 +0800
Subject: [PATCH] 修改图例动画功能
---
public/assets/images/map/sewers/污水终点.png | 0
public/assets/images/map/sewers/雨篦子.png | 0
src/components/panel/LegendPanel.vue | 27 +++++----
public/assets/images/map/sewers/窨井.png | 0
src/components/helpers/ServiceLayerHelper.js | 71 ++++++++++++++++++-----
public/assets/images/map/sewers/泵.png | 0
src/store/modules/map.js | 19 +++++-
public/assets/images/map/sewers/雨水排口.png | 0
public/assets/images/map/sewers/管线点.png | 0
src/components/panel/topicSearch/SewersSearch.vue | 4 +
src/conf/LayerSewers.js | 47 +++++++++++++++
public/assets/images/map/sewers/污水排口.png | 0
public/assets/images/map/sewers/污水起点.png | 0
13 files changed, 137 insertions(+), 31 deletions(-)
diff --git "a/public/assets/images/map/sewers/\346\261\241\346\260\264\346\216\222\345\217\243.png" "b/public/assets/images/map/sewers/\346\261\241\346\260\264\346\216\222\345\217\243.png"
index ebc9668..aa01263 100644
--- "a/public/assets/images/map/sewers/\346\261\241\346\260\264\346\216\222\345\217\243.png"
+++ "b/public/assets/images/map/sewers/\346\261\241\346\260\264\346\216\222\345\217\243.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\346\261\241\346\260\264\347\273\210\347\202\271.png" "b/public/assets/images/map/sewers/\346\261\241\346\260\264\347\273\210\347\202\271.png"
index e8d7b78..3613c54 100644
--- "a/public/assets/images/map/sewers/\346\261\241\346\260\264\347\273\210\347\202\271.png"
+++ "b/public/assets/images/map/sewers/\346\261\241\346\260\264\347\273\210\347\202\271.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\346\261\241\346\260\264\350\265\267\347\202\271.png" "b/public/assets/images/map/sewers/\346\261\241\346\260\264\350\265\267\347\202\271.png"
index 6741774..a07aa91 100644
--- "a/public/assets/images/map/sewers/\346\261\241\346\260\264\350\265\267\347\202\271.png"
+++ "b/public/assets/images/map/sewers/\346\261\241\346\260\264\350\265\267\347\202\271.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\346\263\265.png" "b/public/assets/images/map/sewers/\346\263\265.png"
index aeea201..22d9862 100644
--- "a/public/assets/images/map/sewers/\346\263\265.png"
+++ "b/public/assets/images/map/sewers/\346\263\265.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\347\252\250\344\272\225.png" "b/public/assets/images/map/sewers/\347\252\250\344\272\225.png"
index eed475c..ab4c5f3 100644
--- "a/public/assets/images/map/sewers/\347\252\250\344\272\225.png"
+++ "b/public/assets/images/map/sewers/\347\252\250\344\272\225.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\347\256\241\347\272\277\347\202\271.png" "b/public/assets/images/map/sewers/\347\256\241\347\272\277\347\202\271.png"
index f20b5cf..68afbe3 100644
--- "a/public/assets/images/map/sewers/\347\256\241\347\272\277\347\202\271.png"
+++ "b/public/assets/images/map/sewers/\347\256\241\347\272\277\347\202\271.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\351\233\250\346\260\264\346\216\222\345\217\243.png" "b/public/assets/images/map/sewers/\351\233\250\346\260\264\346\216\222\345\217\243.png"
index 7964a75..04e5ae6 100644
--- "a/public/assets/images/map/sewers/\351\233\250\346\260\264\346\216\222\345\217\243.png"
+++ "b/public/assets/images/map/sewers/\351\233\250\346\260\264\346\216\222\345\217\243.png"
Binary files differ
diff --git "a/public/assets/images/map/sewers/\351\233\250\347\257\246\345\255\220.png" "b/public/assets/images/map/sewers/\351\233\250\347\257\246\345\255\220.png"
index d2dac0f..358a6de 100644
--- "a/public/assets/images/map/sewers/\351\233\250\347\257\246\345\255\220.png"
+++ "b/public/assets/images/map/sewers/\351\233\250\347\257\246\345\255\220.png"
Binary files differ
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index d0c1599..a38ef6c 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -15,8 +15,7 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
- this.layerConfig = {}
+ this.layerArray = {} // key涓洪厤缃殑code锛屽姞杞界殑鍥惧眰瀵硅薄锛�
this.regex = /\{(.+?)\}/g // 鍖归厤{}
this.popupComp = null
}
@@ -25,14 +24,55 @@
return this.loadedLayersMap.get(code)
}
+ getByLayerId (layerId) {
+ for (var k in this.layerArray) {
+ var layer = this.layerArray[k]
+ var geojson = layer.toGeoJSON()
+ var features = geojson.features
+ for (var j = 0; j < features.length; j++) {
+ var feature = features[j]
+ if (feature.id === layerId) {
+ return layer
+ }
+ }
+ }
+ return null
+ }
+
+ initDisplayZoom (layerConfig) {
+ var that = this
+ that.map.on('zoomend ', function (e) {
+ const zoom = that.map.getZoom()
+ for (var i = 0, l = layerConfig.length; i < l; i++) {
+ var config = layerConfig[i]
+ var layers = config.layers
+ for (var j = 0; j < layers.length; j++) {
+ var layer = layers[j]
+ if (layer.minZoom) {
+ if (zoom > layer.minZoom) {
+ var layerObj = that.layerArray[layer.code]
+ layerObj && layerObj.addTo(that.map)
+ } else {
+ that.removeLayer(layer)
+ }
+ }
+ }
+ }
+ })
+ }
+
/**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
initServiceLayers (layerConfig, popupComp) {
this.layerConfig = layerConfig
this.popupComp = popupComp
+ store.commit('clearSewersDatas')
+ store.commit('clearSewersLayers')
this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.initDisplayZoom(layerConfig.mapConfig.Layers.layerSewersPoint)
}
/**
@@ -82,12 +122,14 @@
var code = item.code
var newUrl = url.replace(this.regex, matchValue)
var that = this
- if (!that.geojsonArray[code]) {
+ if (!that.layerArray[code]) {
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
- store.commit('setSewersDatas', res)
+ store.commit('addSewersDatas', res)
var layer = that.loadGeojson(res, item)
- that.geojsonArray[code] = layer
+ that.layerArray[code] = layer
})
+ } else {
+ that.layerArray[code].addTo(that.map)
}
}
@@ -98,7 +140,6 @@
loadGeojson (res, opt) {
var that = this
var icon = opt.icon
- const featureGroup = that.L.featureGroup().addTo(that.map)
const geojson = that.L.geoJSON(res.features, {
style: function (feature) {
return {
@@ -135,10 +176,13 @@
.bindTooltip(function (layer) {
const nameId = layer.feature.id
let name = ''
- if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1) {
+ if (nameId.indexOf('涓夐��') !== -1 || nameId.indexOf('鍥涢��') !== -1 || nameId.indexOf('绐ㄤ簳') !== -1) {
name = layer.feature.properties.pointnumber
} else {
name = layer.feature.properties.name
+ }
+ if (name === undefined) {
+ name = ''
}
return name
}, { direction: 'bottom', offset: [0, 15], sticky: true })
@@ -171,22 +215,19 @@
}
})
}
- }).addTo(featureGroup)
+ }).addTo(that.map)
+ store.commit('addSewersDatas', geojson)
if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
geojson.bringToBack()
} else {
geojson.bringToFront()
}
- return featureGroup
+ return geojson
}
removeLayer (item) {
- var code = item.code
- var layer = this.geojsonArray[code]
- if (layer) {
- this.map.removeLayer(layer)
- delete this.geojsonArray[code]
- }
+ var layer = this.layerArray[item.code]
+ layer && this.map.removeLayer(layer)
}
/**
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 83d5eab..59cce89 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -6,7 +6,7 @@
</div>
<transition name="fade">
<div class="legend-content" v-show="legendControl">
- <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index">
+ <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
<p>{{ item.title }}</p>
<ul>
<li v-for="(ite,inde) in item.items" :key="inde">
@@ -206,11 +206,12 @@
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- if (this.legendControl === false) {
- this.legendControl = true
- } else {
- this.legendControl = false
- }
+ // if (this.legendControl === false) {
+ // this.legendControl = true
+ // } else {
+ // this.legendControl = false
+ // }
+ this.legendControl = !this.legendControl
}
}
}
@@ -242,9 +243,9 @@
transform: scale(0);
opacity: 0.3;
}
- 50% {
- transform: scale(1.2);
- }
+ //50% {
+ // transform: scale(1.1);
+ //}
100% {
transform: scale(1);
opacity: 1;
@@ -252,13 +253,15 @@
}
.fade-enter-active {
- transform-origin: right center;
- animation: bounce-in 1s;
+ transform-origin: right bottom;
+ animation: bounce-in .5s;
}
.fade-leave-active {
transform-origin: right;
animation: bounce-in 1s reverse;
+ transform-origin: right bottom;
+ animation: bounce-in .5s reverse;
}
.legend-content {
@@ -270,7 +273,7 @@
border-radius: 1rem;
background: #3c7699;
- .legend-content-centent {
+ .legend-content-box {
p {
text-align: center;
color: #ffffff;
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index ba83a11..a3987bf 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -173,6 +173,7 @@
wfsHelper.addLike(this.form.query.key, this.form.keyword)
// const _this = this
AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
+ console.log(res)
this.list = res.features
})
},
@@ -180,6 +181,9 @@
console.log(val)
const bound = this.L.geoJSON([val], {}).getBounds()
console.log(bound)
+ var layer = window.serviceLayerHelper.getByLayerId(val.id)
+ console.log(layer)
+ layer && layer.openPopup()
this.$store.state.map.map.flyToBounds(bound)
}
}
diff --git a/src/conf/LayerSewers.js b/src/conf/LayerSewers.js
index c0bfc8f..d925383 100644
--- a/src/conf/LayerSewers.js
+++ b/src/conf/LayerSewers.js
@@ -16,7 +16,7 @@
sname: '绠＄綉', // 琛ㄥ悕
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
- zoom: 10, // 鍦ㄦ寚瀹氱骇鍒樉绀�
+ minZoom: 10, // 鍦ㄦ寚瀹氱骇鍒樉绀�
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -25,6 +25,7 @@
sname: '鍚补姹℃按',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -33,6 +34,7 @@
sname: '鍚洂姹℃按',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -41,6 +43,7 @@
sname: '鍚⒈姹℃按',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -49,6 +52,7 @@
sname: '鎺掑彛',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'pk' // 鍏宠仈PointLayers
},
{
@@ -57,6 +61,7 @@
sname: '浜嬫晠姘�',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -65,6 +70,7 @@
sname: '寰幆姘�',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -73,6 +79,7 @@
sname: '鍑�鍖栨按',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -81,6 +88,7 @@
sname: '鐢熸椿姹℃按',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -89,6 +97,7 @@
sname: '鍖哄煙淇℃伅',
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ minZoom: 10,
childLayer: 'qyxx' // 鍏宠仈PointLayers
}
]
@@ -107,6 +116,7 @@
name: '鍥涢��',
sname: '鍥涢��',
checked: true,
+ minZoom: 10,
icon: 'sewers/鍥涢��.png'
},
{
@@ -114,18 +124,21 @@
name: '涓夐��',
sname: '涓夐��',
checked: false,
+ minZoom: 10,
icon: 'sewers/涓夐��.png'
},
{
code: 'piperack',
name: '绠℃灦(澧�)',
sname: 'PipeRack',
+ minZoom: 10,
checked: false
},
{
code: 'pipegallery',
name: '绠″粖(甯�)',
sname: 'PipeGallery',
+ minZoom: 10,
checked: false
},
{
@@ -137,12 +150,14 @@
{
code: 'pipeline',
name: '绠＄綉',
+ minZoom: 10,
sname: 'pipeline',
checked: false
},
{
code: 'valve',
name: '闃�闂�',
+ minZoom: 10,
sname: 'valve',
checked: false,
icon: 'sewers/闃�闂�.png'
@@ -151,6 +166,7 @@
code: 'elbow',
name: '寮ご',
sname: 'Elbow',
+ minZoom: 10,
checked: false,
icon: 'sewers/寮ご.png'
}
@@ -166,6 +182,7 @@
{
code: 'manhole',
name: '绐ㄤ簳',
+ minZoom: 10,
sname: '绐ㄤ簳',
checked: false,
icon: 'sewers/绐ㄤ簳.png'
@@ -174,6 +191,7 @@
code: 'firedike',
name: '闃茬伀鍫�',
sname: '闃茬伀鍫�',
+ minZoom: 10,
checked: false
},
{
@@ -181,24 +199,28 @@
name: '闆ㄧ瀛�',
sname: '闆ㄧ瀛�',
checked: false,
+ minZoom: 10,
icon: 'sewers/闆ㄧ瀛�.png'
},
{
code: 'overflowweir',
name: '婧㈡祦鍫�',
sname: '婧㈡祦鍫�',
+ minZoom: 10,
checked: false
},
{
code: 'chokevalve',
name: '鎴祦闂�',
sname: '鎴祦闂�',
+ minZoom: 10,
checked: false
},
{
code: 'collectingbasin',
name: '闆嗘按姹�(缃�)',
sname: '闆嗘按姹�',
+ minZoom: 10,
checked: false,
icon: 'sewers/闆嗘按姹�.png'
},
@@ -206,6 +228,7 @@
code: 'oilseparator',
name: '闅旀补姹�',
sname: '闅旀补姹�',
+ minZoom: 10,
checked: false,
icon: 'sewers/闅旀补姹�.png'
}
@@ -221,6 +244,7 @@
{
code: 'dischargeport',
name: '鎺掓斁鍙�',
+ minZoom: 10,
sname: '鎺掓斁鍙�',
checked: false
}
@@ -236,6 +260,7 @@
{
code: 'thirdpartypipe',
name: '绗笁鏂圭閬�',
+ minZoom: 10,
sname: '绗笁鏂圭閬�',
checked: false
},
@@ -243,6 +268,7 @@
code: 'firefightingunit',
name: '娑堥槻鍗曚綅',
sname: '娑堥槻鍗曚綅',
+ minZoom: 10,
checked: false,
icon: 'sewers/娑堥槻鍗曚綅.png'
},
@@ -250,6 +276,7 @@
code: 'emergencyesources',
name: '搴旀�ョ墿璧�',
sname: '搴旀�ョ墿璧�',
+ minZoom: 10,
checked: false
},
{
@@ -257,6 +284,7 @@
name: '绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�',
sname: '涓撲笟搴旀�ユ晳鎻�',
checked: false,
+ minZoom: 10,
icon: 'sewers/绀句細涓撲笟搴旀�ユ晳鎻�.png'
},
{
@@ -264,6 +292,7 @@
name: '缁存姠淇槦浼�',
sname: '缁存姠淇槦浼�',
checked: false,
+ minZoom: 10,
icon: 'sewers/绀句細涓撲笟搴旀�ユ晳鎻�.png'
},
{
@@ -271,6 +300,7 @@
name: '鍖婚櫌',
sname: '鍖婚櫌',
checked: false,
+ minZoom: 10,
icon: 'sewers/鍖婚櫌.png'
},
{
@@ -278,6 +308,7 @@
name: '鑷劧淇濇姢鍖�',
sname: '鑷劧淇濇姢鍖�',
checked: false,
+ minZoom: 10,
icon: 'sewers/鑷劧淇濇姢鍖�.png'
},
{
@@ -285,6 +316,7 @@
name: '姘翠綋',
sname: '姘翠綋',
checked: false,
+ minZoom: 10,
icon: 'sewers/姘翠綋.png'
},
{
@@ -292,6 +324,7 @@
name: '鏁忔劅鐩爣',
sname: '鏁忔劅鐩爣',
checked: false,
+ minZoom: 10,
icon: 'sewers/鏁忔劅鐩爣.png'
},
{
@@ -299,18 +332,21 @@
name: '鐜鐩戞祴鍗曚綅',
sname: '鐜鐩戞祴鍗曚綅',
checked: false,
+ minZoom: 10,
icon: 'sewers/鐜鐩戞祴鍗曚綅.png'
},
{
code: 'pointcontaminants',
name: '鐩戞祴鐐规薄鏌撶墿鎸囨爣淇℃伅',
sname: '姹℃煋鐗╂寚鏍�',
+ minZoom: 10,
checked: false
},
{
code: 'dischargeportaround',
name: '鎺掓斁鍙ｅ懆杈圭幆澧冩晱鎰熶俊鎭�',
sname: '鎺掓斁鍙ｅ懆杈圭幆澧�',
+ minZoom: 10,
checked: false,
iconN: 'sewers/鎺掓斁鍙ｅ懆杈规晱鎰熶俊鎭�.png'
},
@@ -318,6 +354,7 @@
code: 'pump',
name: '娉�',
sname: '娉�',
+ minZoom: 10,
checked: false,
icon: 'sewers/娉�.png'
},
@@ -326,12 +363,14 @@
name: '娑蹭綅璁�',
sname: '娑蹭綅璁�',
checked: false,
+ minZoom: 10,
icon: 'sewers/娑蹭綅璁�.png'
},
{
code: 'flowmeter',
name: '娴侀噺璁�',
sname: '娴侀噺璁�',
+ minZoom: 10,
checked: false,
icon: 'sewers/娴侀噺璁�.png'
},
@@ -339,30 +378,35 @@
code: 'video',
name: '瑙嗛鐩戞帶閰嶇疆',
sname: '瑙嗛鐩戞帶',
+ minZoom: 10,
checked: false
},
{
code: 'onlinemonitoring',
name: '鍦ㄧ嚎鐩戞祴璁惧閰嶇疆',
sname: '鍦ㄧ嚎鐩戞祴',
+ minZoom: 10,
checked: false
},
{
code: 'combustiblegas',
name: '鍙噧姘斾綋鎶ヨ璁惧閰嶇疆',
sname: '鍙噧姘斾綋鎶ヨ',
+ minZoom: 10,
checked: false
},
{
code: 'hydrogensulfide',
name: 'H2S娴撳害鎶ヨ璁惧閰嶇疆',
sname: 'H2S娴撳害鎶ヨ',
+ minZoom: 10,
checked: false
},
{
code: 'controlpoint',
name: '绠＄嚎鐐�',
sname: '绠＄嚎鐐�',
+ minZoom: 10,
checked: false,
icon: 'sewers/绠＄嚎鐐�.png'
},
@@ -370,6 +414,7 @@
code: 'pipesegment',
name: '绠℃',
sname: '绠℃',
+ minZoom: 10,
checked: false
}
]
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 341fb4b..83023b9 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -14,7 +14,11 @@
selectedServiceLayer: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE
serviceLayerFilters: {}, // 鏈嶅姟鍥惧眰鎺у埗杩囨护閰嶇疆
checkedLayers: {}, // 閫変腑鍥惧眰瀵硅薄
- // 鍥惧眰鏁版嵁
+ // 鍥惧眰鏁版嵁,鍥惧眰瀵硅薄
+ layers: {
+ sewers: []
+ },
+ // 鍘熷鍚庡彴JSON鏁版嵁
datas: {
sewers: []
},
@@ -30,8 +34,17 @@
state.map = map
},
// 璁剧疆姹￠洦姘村浘灞傛暟鎹�
- setSewersDatas (state, sewersDatas) {
- state.datas.sewers = sewersDatas
+ addSewersLayers (state, sewersLayers) {
+ state.layers.sewers.push(sewersLayers)
+ },
+ clearSewersLayers (state, SewersLayers) {
+ state.layers.sewers = []
+ },
+ addSewersDatas (state, sewersDatas) {
+ state.datas.sewers.push(sewersDatas)
+ },
+ clearSewersDatas (state, sewersDatas) {
+ state.datas.sewers = []
},
setBasemapHelper (state, layerHelper) {
state.basemapHelper = layerHelper
--
Gitblit v1.8.0