From 70fba1282f8a2d71f89fe5467c8f6c28cade465e Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 11:18:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix=EF=BC=9A=E5=A4=84=E7=90=86map=20?= =?UTF-8?q?=E5=8D=A0=E7=94=A8=E5=86=85=E5=AD=98=E5=A4=A7=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/chart/chartMap.vue | 66 +++++++++++++------ 1 file changed, 45 insertions(+), 21 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue index 6e1627e6f..c694b37d7 100644 --- a/nezha-fronted/src/components/chart/chart/chartMap.vue +++ b/nezha-fronted/src/components/chart/chart/chartMap.vue @@ -62,6 +62,7 @@ import axios from 'axios' import 'leaflet/dist/leaflet.css' import maplibregl from 'maplibre-gl' import mapAllStyle from './mapStyle' +import { getChart, setChart, chartCache } from '@/components/common/js/common' const regNum = /^[0-9]+.?[0-9]*/ export default { name: 'chartMap', @@ -69,7 +70,7 @@ export default { data () { const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light' return { - map: null, + mapId: null, tooltip: { x: 0, y: 0, @@ -116,12 +117,13 @@ export default { const mapConfig = JSON.parse(response.data.paramKey.map_center_config) mapStyle.center = [Number(mapConfig.longitude), Number(mapConfig.latitude)] mapStyle.zoom = Number(mapConfig.zoom) - if (this.map) { - this.map.remove() - this.map = null + const mapId = this.mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id) + let map = getChart(mapId) || null + if (map) { + map.remove() + map = null } - const mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id) - this.map = new maplibregl.Map({ + map = new maplibregl.Map({ container: mapId, style: mapStyle, maxZoom: mapConfig.maxZoom || 7, @@ -161,7 +163,8 @@ export default { } } }) - this.map.on('load', this.mapLoad) + map.on('load', this.mapLoad) + setChart(mapId, map) maplibregl.addProtocol('nzMap', (params, callback) => { // 切片显示接口 防止跨域的问题 fetch(`${params.url.split('://')[1]}`) .then(t => { @@ -184,13 +187,21 @@ export default { }) }, mapLoad () { + const map = getChart(this.mapId) + if (!map) { + return + } this.loadDataCenterMapData() - this.map.addControl(new maplibregl.NavigationControl(), 'bottom-right') + map.addControl(new maplibregl.NavigationControl(), 'bottom-right') const mapboxglInner = document.getElementsByClassName('mapboxgl-ctrl-attrib-inner') mapboxglInner[0].innerHTML = '© MapTiler © OpenStreetMap contributors' }, loadDataCenterMapData () { const self = this + const map = getChart(this.mapId) + if (!map) { + return + } return new Promise(resolve => { const requests = [axios.get('dc?pageSize=-1'), axios.get('/stat/overview/map')] axios.all(requests).then(result => { @@ -223,8 +234,8 @@ export default { } }) this.renderPoint(dcStats) - self.map.on('mouseenter', 'pointLayer', self.pointEnter) - self.map.on('mouseleave', 'pointLayer', self.pointLeave) + map.on('mouseenter', 'pointLayer', self.pointEnter) + map.on('mouseleave', 'pointLayer', self.pointLeave) self.pointAnimation(0) }) }) @@ -255,6 +266,10 @@ export default { }, renderPoint (dcStats) { const arr = [] + const map = getChart(this.mapId) + if (!map) { + return + } dcStats.forEach(dcStat => { arr.push({ type: 'Feature', @@ -267,14 +282,14 @@ export default { } }) }) - this.map.addSource('pointData', { + map.addSource('pointData', { type: 'geojson', data: { type: 'FeatureCollection', features: arr } }) - this.map.addLayer({ + map.addLayer({ id: 'pointLayer', type: 'circle', source: 'pointData', @@ -302,9 +317,10 @@ export default { }) }, pointAnimation (timeStep) { + const map = getChart(this.mapId) const opacity = 0.5 + (timeStep % 1000) / 1000 / 2 - if (this.map) { - this.map.setPaintProperty('pointLayer', 'circle-opacity', [ + if (map) { + map.setPaintProperty('pointLayer', 'circle-opacity', [ 'step', ['get', 'color'], 0.5, @@ -318,8 +334,12 @@ export default { }, resize () { setTimeout(() => { - this.map && this.map.remove() - this.map = null + let map = getChart(this.mapId) + if (!map) { + return + } + map && map.remove() + map = null this.initChart() }, 100) } @@ -329,11 +349,15 @@ export default { clearTimeout(this.timer) this.timer = null } - this.map.off('load', this.mapLoad) - this.map.off('mouseenter', 'pointLayer', this.pointEnter) - this.map.off('mouseleave', 'pointLayer', this.pointLeave) - this.map && this.map.remove() - this.map = null + let map = getChart(this.mapId) + if (!map) { + return + } + map.off('load', this.mapLoad) + map.off('mouseenter', 'pointLayer', this.pointEnter) + map.off('mouseleave', 'pointLayer', this.pointLeave) + map.remove() + map = null } } From 3e8b846d6569226894f99497d13c92f8410707e4 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 11:42:23 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix=EF=BC=9A=E5=A4=84=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart/chartMap.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue index c694b37d7..42e53595b 100644 --- a/nezha-fronted/src/components/chart/chart/chartMap.vue +++ b/nezha-fronted/src/components/chart/chart/chartMap.vue @@ -122,6 +122,7 @@ export default { if (map) { map.remove() map = null + setChart(this.mapId, map) } map = new maplibregl.Map({ container: mapId, @@ -340,6 +341,7 @@ export default { } map && map.remove() map = null + setChart(this.mapId, null) this.initChart() }, 100) } @@ -358,6 +360,7 @@ export default { map.off('mouseleave', 'pointLayer', this.pointLeave) map.remove() map = null + setChart(this.mapId, null) } }