import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; // @ts-ignore import data from '../data/data.json'; export default class AnimatePoint extends React.Component { // @ts-ignore private scene: Scene; public componentWillUnmount() { this.scene.destroy(); } public async componentDidMount() { const scene = new Scene({ id: document.getElementById('map') as HTMLDivElement, map: new Mapbox({ pitch: 0, style: 'dark', center: [112, 23.69], zoom: 2.5, plugin: ['AMap.ToolBar'], }), }); fetch( 'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv', ) .then((res) => res.text()) .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', y: 'Latitude', }, }) .shape('circle') .active(true) .animate(true) .size(40) .color('#ffa842') .style({ opacity: 1, }); scene.addLayer(pointLayer); }); this.scene = scene; } public render() { return ( <div id="map" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, transform: 'scale(1.5)', }} /> ); } }