From 4627fc484c1697ca7e9f05f9e5d2d85341b526fe Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 25 二月 2021 18:12:27 +0800
Subject: [PATCH] 修改图层控制
---
src/main.js | 1
src/components/LayerController/modules/LcServiceLayerFilter.vue | 10 ++-
src/conf/MapConfig.js | 3
package.json | 2
src/conf/LayerSewers.js | 4 +
src/components/helpers/ServiceLayerHelper.js | 104 ++++++++++++++++------------------
src/components/LayerController/modules/LcServiceLayer.vue | 12 +++-
src/Sgis.js | 2
src/store/modules/map.js | 12 +++-
9 files changed, 83 insertions(+), 67 deletions(-)
diff --git a/package.json b/package.json
index a9d5e32..ba42def 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"jquery": "^3.5.1",
"js-cookie": "^2.2.0",
"leaflet": "^1.6.0",
- "leaflet-canvas-marker": "^0.2.0",
+ "leaflet-canvas-markers": "^1.0.6",
"leaflet.markercluster": "^1.4.1",
"lodash": "^4.17.10",
"nprogress": "^0.2.0",
diff --git a/src/Sgis.js b/src/Sgis.js
index 264422a..6ae1b0a 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -4,7 +4,6 @@
import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
-import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
import WmtsSupport from '@components/plugin/wmts_plugins'
@@ -21,7 +20,6 @@
Editable.init(L) // 鍥惧眰缂栬緫
PathDrag.init(L) // 璺緞鎷栨嫿
MagicMarker.init(L) // 鍔ㄧ敾Marker
- CanvasIcon.init(L) // 浣跨敤canvas缁樺埗Marker
WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
// CustomPopup.init(L) // 鑷畾涔夊脊鍑烘
DashFlow.DashFlow(L) // 娴佸姩绾垮浘
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index 09ec4c4..9833b42 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -11,7 +11,8 @@
:name="'wmsSublayers_'+item.code+'_'+itm.code"
:checked="itm.checked"
:value="itm.code"
- @change="swWmsLayer(itm)"/>{{ itm.name }}
+ @change="swWmsLayer(item.url,itm)"/>{{
+ itm.name }}
</div>
</div>
</div>
@@ -56,9 +57,14 @@
window.L.geoJSON(res).addTo(window.map)
})
},
- swWmsLayer (itm) {
+ swWmsLayer (url, itm) {
itm.checked = !itm.checked
- this.updateWms()
+ if (itm.checked) {
+ window.serviceLayerHelper.loadGeojsonLayer(url, itm)
+ } else {
+ window.serviceLayerHelper.removeLayer(itm)
+ }
+ // this.updateWms()
},
swFilter (item) {
this.layerFilterVisible = !this.layerFilterVisible
diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue
index d9bad44..c4a6cef 100644
--- a/src/components/LayerController/modules/LcServiceLayerFilter.vue
+++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue
@@ -7,7 +7,7 @@
</div>
<div class="content">
<div v-for="filter in item.filters" :key="filter.code">
- <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(filter)"><label
+ <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(item.url,filter)"><label
:title="filter.name">{{filter.name}}</label>
</div>
</div>
@@ -58,9 +58,13 @@
console.log(item)
// window.serviceLayerHelper.loadLayers()
},
- swSubFilter (item) {
+ swSubFilter (url, item) {
item.checked = !item.checked
- console.log(item)
+ if (item.checked) {
+ window.serviceLayerHelper.loadGeojsonLayer(url, item)
+ } else {
+ window.serviceLayerHelper.removeLayer(item)
+ }
// window.serviceLayerHelper.loadLayers()
}
}
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index cbfdedd..91bd842 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -3,7 +3,7 @@
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
import AjaxUtils from '@/utils/AjaxUtils'
-import { GEOM_TYPE } from '../../conf/Constants'
+import store from '@/store'
class ServiceLayerHelper {
constructor (options) {
@@ -14,7 +14,7 @@
this.tileLayersWMTSArray = [] // 鍒濆鐨刉MTS闆�
this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
- this.geojsonArray = [] // 鍒濆鐨刧eojson闆�
+ this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
}
@@ -51,73 +51,49 @@
this.loadTileLayer(opt, isAddToMap)
this.tileLayersTileArray.push(opt)
} else if (opt.type === 'geojson') {
- this.loadGeojson(opt)
+ this.loadGeojsonLayers(opt)
}
}
}
}
- loadGeojson (options) {
+ loadGeojsonLayers (options) {
var url = options.url
var layers = options.layers
- var matches = this.regex.exec(url)
for (var i = 0; i < layers.length; i++) {
var layer = layers[i]
- var matchValue = layer[matches[1]]
var checked = layer.checked
- var geomtype = layer.geomtype
- if (!checked) {
- continue
+ if (checked) {
+ this.loadGeojsonLayer(url, layer)
}
- var newUrl = url.replace(this.regex, matchValue)
- var that = this
+ }
+ }
+
+ loadGeojsonLayer (url, layer) {
+ var matches = this.regex.exec(url)
+ var matchValue = layer[matches[1]]
+ var code = layer.code
+ var newUrl = url.replace(this.regex, matchValue)
+ var that = this
+ if (!that.geojsonArray[code]) {
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
- switch (geomtype) {
- case GEOM_TYPE.POINT :
- that.loadPointGeojson(res)
- break
- case GEOM_TYPE.LINE :
- that.loadLineGeojson(res)
- break
- case GEOM_TYPE.POLYGON :
- break
- default:
- that.loadLineGeojson(res)
- break
- }
+ store.commit('setMapObj', res)
+ var layer = that.loadGeojson(res)
+ that.geojsonArray[code] = layer
})
}
}
/**
- * 鍔犺浇鐐规暟鎹�
- * @param res
- */
- loadPointGeojson (res) {
- this.L.geoJSON(res.features, {
- pointToLayer: function (geoJsonPoint, latlng) {
- return this.L.canvasMarker(latlng,
- {
- radius: 20,
- prevLatlng: this.L.latLng(51.503, -0.09), // previous point
- img: {
- url: './images/beng.png',
- size: [20, 20],
- rotate: 90
- }
- })
- }
- }).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(this.map)
- }
-
- /**
- * 鍔犺浇绾挎暟鎹�
- * @param res
- */
- loadLineGeojson (res) {
- this.L.geoJSON(res.features, {
+ * 鍔犺浇鐐规暟鎹�
+ * @param res
+ */
+ loadGeojson (res) {
+ var that = this
+ const featureGroup = that.L.featureGroup([], {
+ attribution: { id: '123' }
+ }).addTo(that.map)
+ that.L.geoJSON(res.features, {
style: function (feature) {
return {
fill: true,
@@ -130,10 +106,30 @@
dashSpeed: -10
}
},
- minZoom: 10
+ pointToLayer: function (geoJsonPoint, latlng) {
+ return that.L.canvasMarker(latlng,
+ {
+ radius: 20,
+ img: {
+ url: 'assets/images/map/marker-icon.png',
+ size: [20, 20]
+ }
+ })
+ }
}).bindPopup(function (layer) {
// return layer.feature.properties.linenumber
- }).addTo(this.map)
+ }).addTo(featureGroup)
+ featureGroup.bringToBack()
+ return featureGroup
+ }
+
+ removeLayer (item) {
+ var code = item.code
+ var layer = this.geojsonArray[code]
+ if (layer) {
+ this.map.removeLayer(layer)
+ delete this.geojsonArray[code]
+ }
}
/**
diff --git a/src/conf/LayerSewers.js b/src/conf/LayerSewers.js
index 01626a2..f6f45cd 100644
--- a/src/conf/LayerSewers.js
+++ b/src/conf/LayerSewers.js
@@ -98,6 +98,7 @@
code: 'fsss',
name: '闄勫睘璁炬柦',
checked: false, // 榛樿閫変腑鐘舵��
+ url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
filters: [
{
code: 'fourlink',
@@ -161,6 +162,7 @@
code: 'hbss',
name: '鐜繚璁炬柦',
checked: false, // 榛樿閫変腑鐘舵��
+ url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
filters: [
{
code: 'manhole',
@@ -217,6 +219,7 @@
code: 'pk',
name: '鎺掑彛',
checked: false, // 榛樿閫変腑鐘舵��
+ url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
filters: [
{
code: 'dischargeport',
@@ -231,6 +234,7 @@
code: 'qyxx',
name: '鍖哄煙淇℃伅',
checked: false, // 榛樿閫変腑鐘舵��
+ url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
filters: [
{
code: 'thirdpartypipe',
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index dccff74..fdaa00f 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -27,7 +27,8 @@
inertia: true,
zoomControl: false,
attributionControl: false,
- editable: true
+ editable: true,
+ preferCanvas: true
}
const mapConfig = {
diff --git a/src/main.js b/src/main.js
index 45c8a84..cf57dcb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet.markercluster'
+import 'leaflet-canvas-markers'
Vue.config.productionTip = false
Vue.use(ElementUI, { size: 'small' })
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index c6b997e..6016809 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -14,12 +14,20 @@
selectedServiceLayer: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE
serviceLayerFilters: {}, // 鏈嶅姟鍥惧眰鎺у埗杩囨护閰嶇疆
checkedLayers: {}, // 閫変腑鍥惧眰瀵硅薄
+ // 鍥惧眰鏁版嵁
+ datas: {
+ sewers: []
+ },
config: config,
serviceLayers: config.mapConfig.Layers
}
const mutations = {
setMapObj (state, map) {
state.map = map
+ },
+ // 璁剧疆姹￠洦姘村浘灞傛暟鎹�
+ setSewersDatas (state, sewersDatas) {
+ state.datas.sewers = sewersDatas
},
setBasemapHelper (state, layerHelper) {
state.basemapHelper = layerHelper
@@ -43,9 +51,7 @@
state.showServiceLayerFilter = !state.showServiceLayerFilter
}
}
-const actions = {
-
-}
+const actions = {}
export default {
state,
mutations,
--
Gitblit v1.8.0