diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 7e9a2cf27f..4ef1c9815d 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -333,6 +333,10 @@ export default class Scene extends EventEmitter implements ISceneService { this.interactionService.destroy(); this.controlService.destroy(); this.markerService.destroy(); + + // TODO: 销毁 container 容器 + this.$container?.parentNode?.removeChild(this.$container) + this.removeAllListeners(); this.inited = false; unbind(this.$container as HTMLDivElement, this.handleWindowResized); diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index dee66c084f..2cd0c1c600 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -417,6 +417,10 @@ export default class AMapService public destroy() { this.map.destroy(); + + // TODO: 销毁地图可视化层的容器 + this.$mapContainer?.parentNode?.removeChild(this.$mapContainer) + // @ts-ignore delete window.initAMap; const $jsapi = document.getElementById(AMAP_SCRIPT_ID); diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 664694fe5d..a3f72b675e 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -509,6 +509,10 @@ export default class AMapService public destroy() { this.map.destroy(); + + // TODO: 销毁地图可视化层的容器 + this.$mapContainer?.parentNode?.removeChild(this.$mapContainer) + // @ts-ignore delete window.initAMap; const $jsapi = document.getElementById(AMAP_SCRIPT_ID); diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index a4a195ab47..2e1950cf41 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -279,6 +279,10 @@ export default class L7MapService implements IMapService { } public destroy() { + + // TODO: 销毁地图可视化层的容器 + this.$mapContainer?.parentNode?.removeChild(this.$mapContainer) + this.eventEmitter.removeAllListeners(); if (this.map) { this.map.remove(); diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index f7d9875421..f79834eb49 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -362,6 +362,10 @@ export default class MapboxService } public destroy() { + + // TODO: 销毁地图可视化层的容器 + this.$mapContainer?.parentNode?.removeChild(this.$mapContainer) + this.eventEmitter.removeAllListeners(); if (this.map) { this.map.remove(); diff --git a/stories/Map/components/amap2demo_destroy.tsx b/stories/Map/components/amap2demo_destroy.tsx new file mode 100644 index 0000000000..1bc302d251 --- /dev/null +++ b/stories/Map/components/amap2demo_destroy.tsx @@ -0,0 +1,104 @@ +import { PointLayer, Scene } from '@antv/l7'; +import { GaodeMapV2 } from '@antv/l7-maps'; +import * as React from 'react'; +export default class Amap2demo_destroy extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV2({ + center: [121.107846, 30.267069], + pitch: 0, + style: 'normal', + zoom: 20, + animateEnable: false, + }), + }); + let originData = [ + { + lng: 121.107846, + lat: 30.267069, + opacity2: 0.2, + strokeOpacity2: 0.4, + strokeColor: '#000', + strokeWidth: 0.5, + // offsets2: [0, 0] + offsets2: [100, 100], + }, + { + lng: 121.107, + lat: 30.267069, + opacity2: 0.4, + strokeOpacity2: 0.6, + strokeColor: '#0f0', + strokeWidth: 2, + offsets2: [100, 100], + }, + { + lng: 121.107846, + lat: 30.26718, + opacity2: 0.6, + strokeOpacity2: 0.8, + strokeColor: '#f00', + strokeWidth: 4, + // offsets2: [200, 200] + offsets2: [100, 100], + }, + // { + // lng: 38.54, + // lat: 77.02, + // opacity: 0.5 + // strokeColor: "#ff0" + // }, + ]; + this.scene = scene; + scene.on('loaded', () => { + let layer = new PointLayer() + .source(originData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + }) + .shape('circle') + .color('rgba(255, 0, 0, 1.0)') + .size([10, 10, 100]) + .style({ + strokeWidth: 4, + opacity: 'opacity2', + }) + .active(true); + scene.addLayer(layer); + }); + } + + public render() { + return ( + <> +
+ + + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index a0620ca314..8a9889811e 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import MapCenter from './components/mapCenter'; import Amap2demo from './components/amap2demo' +import Amap2demo_destroy from './components/amap2demo_destroy'; import Amap2demo_extrude from './components/amap2demo_extrude' import Amapdemo_extrude from './components/amapdemo_extrude' import Amap2demo_text from './components/amap2demo_text' @@ -118,3 +119,5 @@ storiesOf('地图方法', module) .add('高德地图 样式数据映射', () => ) .add('高德地图 样式映射 文字偏移', () => ) + + .add('测试销毁', () => )