From 239a629af8c75b80d5c0e50fcd27b932655b7b04 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期二, 23 二月 2021 18:09:46 +0800
Subject: [PATCH] 修改图层控制
---
src/conf/Constants.js | 5 +
src/components/LayerController/modules/LcServiceLayerFilter.vue | 27 +---
src/conf/Styles.js | 24 ++++
src/conf/LayerSewers.js | 138 +++++++++++++++-----------
src/components/helpers/ServiceLayerHelper.js | 84 ++++++++++++----
5 files changed, 181 insertions(+), 97 deletions(-)
diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue
index cb36875..d9bad44 100644
--- a/src/components/LayerController/modules/LcServiceLayerFilter.vue
+++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue
@@ -7,8 +7,8 @@
</div>
<div class="content">
<div v-for="filter in item.filters" :key="filter.code">
- <input type="checkbox" :value="filter.code" :checked="filter.checked"><label
- :title="filter.name">{{filter.sname}}</label>
+ <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(filter)"><label
+ :title="filter.name">{{filter.name}}</label>
</div>
</div>
</div>
@@ -18,7 +18,6 @@
<script>
import { mapMutations } from 'vuex'
-import WmsHelper from '../../helpers/WmsHelper'
export default {
name: 'LcServiceLayerFilter',
@@ -56,21 +55,13 @@
...mapMutations([]),
swAllSubFilter (item) {
item.checked = !item.checked
- for (let i = 0, len = item.filters.length; i < len; ++i) {
- item.filters[i].checked = item.checked
- }
- var mapConfig = this.mapConfig
- var wmsHelper = new WmsHelper()
- wmsHelper.initMapConfig(mapConfig)
- var wmsLayersMap = wmsHelper.getWmsLayersMap()
- for (var k in wmsLayersMap) {
- var layers = wmsLayersMap[k]
- var tileLayer = this.serviceLayerHelper.getTileLayer(k)
- if (tileLayer) {
- tileLayer.setParams({ layers: layers.join(',') }, true)
- tileLayer.setUrl(tileLayer.config.url, false)
- }
- }
+ console.log(item)
+ // window.serviceLayerHelper.loadLayers()
+ },
+ swSubFilter (item) {
+ item.checked = !item.checked
+ console.log(item)
+ // window.serviceLayerHelper.loadLayers()
}
}
}
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 7bef7bd..cbfdedd 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -3,6 +3,7 @@
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
import AjaxUtils from '@/utils/AjaxUtils'
+import { GEOM_TYPE } from '../../conf/Constants'
class ServiceLayerHelper {
constructor (options) {
@@ -27,7 +28,7 @@
*/
initServiceLayers (layerConfig) {
this.layerConfig = layerConfig
- this._loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
+ this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
}
/**
@@ -35,7 +36,7 @@
* @param {*} mapConfig
* @param {*} isAddToMap
*/
- _loadLayers (layerConfig, isAddToMap = true) {
+ loadLayers (layerConfig, isAddToMap = true) {
console.debug('ServiceLayerHelper鍔犺浇鍙傛暟锛�', layerConfig)
for (let i = 0, len = layerConfig.length; i < len; ++i) {
const opt = layerConfig[i]
@@ -64,35 +65,78 @@
var layer = layers[i]
var matchValue = layer[matches[1]]
var checked = layer.checked
+ var geomtype = layer.geomtype
if (!checked) {
continue
}
var newUrl = url.replace(this.regex, matchValue)
var that = this
AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
- // let geojsondata = L.geoJSON(test.features,{
- that.L.geoJSON(res.features, {
- style: function (feature) {
- return {
- fill: true,
- weight: 2,
- fillColor: '#06cccc',
- color: '#06cccc',
- fillOpacity: 0.2,
- opacity: 0.8,
- dashArray: '10,4',
- dashSpeed: -10
- }
- },
- minZoom: 10
- }).bindPopup(function (layer) {
- // return layer.feature.properties.linenumber
- }).addTo(that.map)
+ 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
+ }
})
}
}
/**
+ * 鍔犺浇鐐规暟鎹�
+ * @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, {
+ style: function (feature) {
+ return {
+ fill: true,
+ weight: 2,
+ fillColor: '#06cccc',
+ color: '#06cccc',
+ fillOpacity: 0.2,
+ opacity: 0.8,
+ dashArray: '10,4',
+ dashSpeed: -10
+ }
+ },
+ minZoom: 10
+ }).bindPopup(function (layer) {
+ // return layer.feature.properties.linenumber
+ }).addTo(this.map)
+ }
+
+ /**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MTS鏈嶅姟
* @param {}} options
* @param {*} isAddToMap
diff --git a/src/conf/Constants.js b/src/conf/Constants.js
new file mode 100644
index 0000000..0c173b0
--- /dev/null
+++ b/src/conf/Constants.js
@@ -0,0 +1,5 @@
+export const GEOM_TYPE = {
+ POINT: 'point',
+ LINE: 'line',
+ POLYGON: 'polygon'
+}
diff --git a/src/conf/LayerSewers.js b/src/conf/LayerSewers.js
index 3416c8f..01626a2 100644
--- a/src/conf/LayerSewers.js
+++ b/src/conf/LayerSewers.js
@@ -1,31 +1,13 @@
-import * as L from 'leaflet'
-
-const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
-const myRenderer = L.canvas()// 闇�瑕佷娇鐢ㄧ敾甯冩覆鏌撶殑浣跨敤 renderer: myRenderer 浣滀负鍙傛暟
+import { GEOM_TYPE } from './Constants'
+// const APP_GIS_HOST_2 = 'http://xearth.cn:6230'
+const APP_GIS_HOST_2 = 'http://localhost:3000'
export const LayerSewersLine = {
code: 'pipeline',
name: '绠＄綉鏁版嵁',
- icon_actived: '',
- icon_deactived: '',
type: 'geojson',
// url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
url: APP_GIS_HOST_2 + '/layer/findLayer?layerName={sname}',
- inLegend: true,
checked: true,
- option: {
- styles: {
- fill: true,
- weight: 2,
- fillColor: '#06cccc',
- color: '#06cccc',
- fillOpacity: 0.2,
- opacity: 0.8
- // dashArray:'10,4',
- // dashSpeed:-10,
- },
- renderer: myRenderer
-
- },
layers: [
{
code: 'rainline',
@@ -33,6 +15,7 @@
sname: 'pipeline', // 琛ㄥ悕
checked: true, // 榛樿閫変腑鐘舵��
filter: {},
+ zoom: 10, // 鍦ㄦ寚瀹氱骇鍒樉绀�
childLayer: 'fsss,hbss' // 鍏宠仈PointLayers
},
{
@@ -114,55 +97,63 @@
{
code: 'fsss',
name: '闄勫睘璁炬柦',
- checked: true, // 榛樿閫変腑鐘舵��
+ checked: false, // 榛樿閫変腑鐘舵��
filters: [
{
code: 'fourlink',
name: '鍥涢��',
sname: 'FourLink',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'tee',
name: '涓夐��',
sname: 'Tee',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'piperack',
name: '绠℃灦(澧�)',
sname: 'PipeRack',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pipegallery',
name: '绠″粖(甯�)',
sname: 'PipeGallery',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pipesegment',
name: '娴佸悜',
sname: 'ywslx',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pipeline',
name: '绠＄綉',
sname: 'pipeline',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'valve',
name: '闃�闂�',
sname: 'valve',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'elbow',
name: '寮ご',
sname: 'Elbow',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
}
]
},
@@ -175,43 +166,50 @@
code: 'manhole',
name: '绐ㄤ簳',
sname: '绐ㄤ簳',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'firedike',
name: '闃茬伀鍫�',
sname: '闃茬伀鍫�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'raingate',
name: '闆ㄧ瀛�',
sname: '闆ㄧ瀛�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'overflowweir',
name: '婧㈡祦鍫�',
sname: '婧㈡祦鍫�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'chokevalve',
name: '鎴祦闂�',
sname: '鎴祦闂�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'collectingbasin',
name: '闆嗘按姹�(缃�)',
sname: '闆嗘按姹�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'oilseparator',
name: '闅旀补姹�',
sname: '闅旀补姹�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
}
]
},
@@ -224,7 +222,8 @@
code: 'dischargeport',
name: '鎺掓斁鍙�',
sname: '鎺掓斁鍙�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
}
]
},
@@ -237,127 +236,148 @@
code: 'thirdpartypipe',
name: '绗笁鏂圭閬�',
sname: '绗笁鏂圭閬�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'firefightingunit',
name: '娑堥槻鍗曚綅',
sname: '娑堥槻鍗曚綅',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'emergencyesources',
name: '搴旀�ョ墿璧�',
sname: '搴旀�ョ墿璧�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'emergencyres',
name: '绀句細涓撲笟搴旀�ユ晳鎻撮槦浼�',
sname: '涓撲笟搴旀�ユ晳鎻�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'maintenanceteam',
name: '缁存姠淇槦浼�',
sname: '缁存姠淇槦浼�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'hospital',
name: '鍖婚櫌',
sname: '鍖婚櫌',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pointpreservationzone',
name: '鑷劧淇濇姢鍖�',
sname: '鑷劧淇濇姢鍖�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pointhydrology',
name: '姘翠綋',
sname: '姘翠綋',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'sensitivetarget',
name: '鏁忔劅鐩爣',
sname: '鏁忔劅鐩爣',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'envmonunit',
name: '鐜鐩戞祴鍗曚綅',
sname: '鐜鐩戞祴鍗曚綅',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pointcontaminants',
name: '鐩戞祴鐐规薄鏌撶墿鎸囨爣淇℃伅',
sname: '姹℃煋鐗╂寚鏍�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'dischargeportaround',
name: '鎺掓斁鍙ｅ懆杈圭幆澧冩晱鎰熶俊鎭�',
sname: '鎺掓斁鍙ｅ懆杈圭幆澧�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pump',
name: '娉�',
sname: '娉�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'liquidlevelmeter',
name: '娑蹭綅璁�',
sname: '娑蹭綅璁�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'flowmeter',
name: '娴侀噺璁�',
sname: '娴侀噺璁�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'video',
name: '瑙嗛鐩戞帶閰嶇疆',
sname: '瑙嗛鐩戞帶',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'onlinemonitoring',
name: '鍦ㄧ嚎鐩戞祴璁惧閰嶇疆',
sname: '鍦ㄧ嚎鐩戞祴',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'combustiblegas',
name: '鍙噧姘斾綋鎶ヨ璁惧閰嶇疆',
sname: '鍙噧姘斾綋鎶ヨ',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'hydrogensulfide',
name: 'H2S娴撳害鎶ヨ璁惧閰嶇疆',
sname: 'H2S娴撳害鎶ヨ',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'controlpoint',
name: '绠＄嚎鐐�',
sname: '绠＄嚎鐐�',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
},
{
code: 'pipesegment',
name: '绠℃',
sname: '绠℃',
- checked: false
+ checked: false,
+ geomtype: GEOM_TYPE.POINT
}
]
}
diff --git a/src/conf/Styles.js b/src/conf/Styles.js
new file mode 100644
index 0000000..42416e5
--- /dev/null
+++ b/src/conf/Styles.js
@@ -0,0 +1,24 @@
+export const LineStyles = {
+ pipeline: {
+ fill: true,
+ weight: 2,
+ fillColor: '#06cccc',
+ color: '#06cccc',
+ fillOpacity: 0.2,
+ opacity: 0.8,
+ dashArray: '10,4',
+ dashSpeed: -10
+ }
+}
+export const PointStyles = {
+ pipeline: {
+ fill: true,
+ weight: 2,
+ fillColor: '#06cccc',
+ color: '#06cccc',
+ fillOpacity: 0.2,
+ opacity: 0.8,
+ dashArray: '10,4',
+ dashSpeed: -10
+ }
+}
--
Gitblit v1.8.0