diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 01ed942..c6fb8a5 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -66,8 +66,56 @@ bus.emit('jhkhclick', 'fhbz'); } else if (curTab.value == 'nlbz') { bus.emit('jhkhclick', 'nlbz'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: false, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else { bus.emit('jhkhclick', 'nlxc'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: false, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } getjb(); getkhzn(); diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 01ed942..c6fb8a5 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -66,8 +66,56 @@ bus.emit('jhkhclick', 'fhbz'); } else if (curTab.value == 'nlbz') { bus.emit('jhkhclick', 'nlbz'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: false, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else { bus.emit('jhkhclick', 'nlxc'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: false, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } getjb(); getkhzn(); diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue index 2593e02..840533f 100644 --- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue +++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue @@ -76,12 +76,79 @@ if (curTab.value == 1) { bus.emit('jhkhclick', 'hcst'); type.value = 'hcst'; + addOdorousWaterBodies(); + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: true, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else if (curTab.value == 2) { type.value = 'shwssjl'; bus.emit('jhkhclick', 'shwssjl'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: false, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else { type.value = 'cqjsbod'; bus.emit('jhkhclick', 'cqjsbod'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: false, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } getjb(); getkhzn(); @@ -115,7 +182,66 @@ hcdatas.value = res.data; } } +//地图渲染黑臭水体 +const addOdorousWaterBodies = async () => { + // 飞哥 这=这里 + let params = { + examineYear: 2024, + }; + let res = await blackWaterInfoList(params); + console.log(res, 'ress'); + if (res && res.code == 200) { + let black_odor = [], + black_odor_label = []; + res.data.forEach(data => { + data.fillcolor = data.isExamine == 1 ? '#70b603' : '#d9001b'; + let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data); + let waterLabel = turf.center(waterLine, { + properties: data, + }); + black_odor.push(waterLine); + black_odor_label.push(waterLabel); + }); + let waterLineGeojson = turf.featureCollection(black_odor); + let waterLabelGeojson = turf.featureCollection(black_odor_label); + if (!newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson }); + newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson }); + newfiberMapbox.map.addLayer({ + id: 'waterLine', + type: 'line', + source: 'waterLine', + paint: { + 'line-color': ['get', 'fillcolor'], + 'line-width': 5, + }, + }); + newfiberMapbox.map.addLayer({ + id: 'waterLabel', + type: 'symbol', + source: 'waterLabel', + layout: { + 'text-field': ['get', 'blackWaterName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-offset': [0, 2], + }, + paint: { + 'text-halo-color': 'rgba(238, 251, 255,1)', + 'text-color': ['get', 'fillcolor'], + 'icon-opacity': 1, + 'text-halo-width': 1, + }, + }); + } else { + newfiberMapbox.map.getSource('waterLine').setData(waterLineGeojson); + newfiberMapbox.map.getSource('waterLabel').setData(waterLabelGeojson); + } + + //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies'); + } +}; onMounted(() => { // getHc(); getjb(); diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 01ed942..c6fb8a5 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -66,8 +66,56 @@ bus.emit('jhkhclick', 'fhbz'); } else if (curTab.value == 'nlbz') { bus.emit('jhkhclick', 'nlbz'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: false, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else { bus.emit('jhkhclick', 'nlxc'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'waterLoging', + show: false, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + { + layername: 'sewageFactory', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } getjb(); getkhzn(); diff --git a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue index 2593e02..840533f 100644 --- a/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue +++ b/src/views/sponeScreen/evaluationKH/heiChouShuiTi.vue @@ -76,12 +76,79 @@ if (curTab.value == 1) { bus.emit('jhkhclick', 'hcst'); type.value = 'hcst'; + addOdorousWaterBodies(); + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: true, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else if (curTab.value == 2) { type.value = 'shwssjl'; bus.emit('jhkhclick', 'shwssjl'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: false, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } else { type.value = 'cqjsbod'; bus.emit('jhkhclick', 'cqjsbod'); + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: false, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); } getjb(); getkhzn(); @@ -115,7 +182,66 @@ hcdatas.value = res.data; } } +//地图渲染黑臭水体 +const addOdorousWaterBodies = async () => { + // 飞哥 这=这里 + let params = { + examineYear: 2024, + }; + let res = await blackWaterInfoList(params); + console.log(res, 'ress'); + if (res && res.code == 200) { + let black_odor = [], + black_odor_label = []; + res.data.forEach(data => { + data.fillcolor = data.isExamine == 1 ? '#70b603' : '#d9001b'; + let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data); + let waterLabel = turf.center(waterLine, { + properties: data, + }); + black_odor.push(waterLine); + black_odor_label.push(waterLabel); + }); + let waterLineGeojson = turf.featureCollection(black_odor); + let waterLabelGeojson = turf.featureCollection(black_odor_label); + if (!newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson }); + newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson }); + newfiberMapbox.map.addLayer({ + id: 'waterLine', + type: 'line', + source: 'waterLine', + paint: { + 'line-color': ['get', 'fillcolor'], + 'line-width': 5, + }, + }); + newfiberMapbox.map.addLayer({ + id: 'waterLabel', + type: 'symbol', + source: 'waterLabel', + layout: { + 'text-field': ['get', 'blackWaterName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-offset': [0, 2], + }, + paint: { + 'text-halo-color': 'rgba(238, 251, 255,1)', + 'text-color': ['get', 'fillcolor'], + 'icon-opacity': 1, + 'text-halo-width': 1, + }, + }); + } else { + newfiberMapbox.map.getSource('waterLine').setData(waterLineGeojson); + newfiberMapbox.map.getSource('waterLabel').setData(waterLabelGeojson); + } + + //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies'); + } +}; onMounted(() => { // getHc(); getjb(); diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index 33b303f..d000ccd 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -32,6 +32,8 @@ import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体 import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况 import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价 +import bus from '@/bus'; +import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); const showPanel = ref(true); //面板展开收起 @@ -51,6 +53,32 @@ ); onMounted(() => {}); +onBeforeUnmount(() => { + if (newfiberMapbox.map.getLayer('waterLine')) { + newfiberMapbox.map.removeLayer('waterLine'); + newfiberMapbox.map.removeLayer('waterLabel'); + newfiberMapbox.map.removeSource('waterLine'); + newfiberMapbox.map.removeSource('waterLabel'); + } + bus.emit('setIniteLayer', [ + { + layername: 'sewageFactory', + show: true, + }, + { + layername: 'waterLoging', + show: true, + }, + { + layername: 'cesiumPaishuiArea2', + show: true, + }, + ]); + newfiberMapbox.map.easeTo({ + center: [114.315, 34.852], + zoom: 10.4, + }); +});