diff --git a/stories/MapPerformance/components/DataUpdate.tsx b/stories/MapPerformance/components/DataUpdate.tsx new file mode 100644 index 0000000000..1642c168be --- /dev/null +++ b/stories/MapPerformance/components/DataUpdate.tsx @@ -0,0 +1,83 @@ +import * as React from 'react'; +import { Scene, PolygonLayer, LineLayer, Source } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +export default class DataUpdate extends React.Component { + private scene: Scene | undefined; + + public componentWillUnmount() { + this.scene?.destroy(); + } + + public componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'blank', + center: [116.368652, 39.93866], + zoom: 10.07, + }), + }); + + scene.on('loaded', () => { + Promise.all([ + fetch( + 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/choropleth-data/country/100000_country_province.json', + ).then((res) => res.json()), + fetch( + 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/choropleth-data/province/330000_province_city.json', + ).then((res) => res.json()), + ]).then(([china, zhejiang]) => { + const source = new Source(zhejiang); + const chinaPolygonLayer = new PolygonLayer({ + autoFit: true, + }) + .color('name', [ + '#B8E1FF', + '#7DAAFF', + '#3D76DD', + '#0047A5', + '#001D70', + ]) + .shape('fill'); + + const chinaPolygonLineLayer = new LineLayer({}).shape('line'); + chinaPolygonLayer.setSource(source); + chinaPolygonLineLayer.setSource(chinaPolygonLayer.getSource()); + + scene.addLayer(chinaPolygonLayer); + scene.addLayer(chinaPolygonLineLayer); + + let current = true; + + chinaPolygonLayer.on('unclick', () => { + console.time('dataUpdate'); + scene.setEnableRender(false); + source.setData(current ? china : zhejiang); + current = !current; + scene.setEnableRender(true); + scene.render(); + console.timeEnd('dataUpdate'); + }); + }); + }); + + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/MapPerformance/map.stories.tsx b/stories/MapPerformance/map.stories.tsx index 7f62d0746a..654a1259b7 100644 --- a/stories/MapPerformance/map.stories.tsx +++ b/stories/MapPerformance/map.stories.tsx @@ -2,8 +2,10 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import PointTest from './components/Map'; -import BigLine from './components/BigLine' +import BigLine from './components/BigLine'; +import DataUpdate from './components/DataUpdate'; // @ts-ignore storiesOf('地图性能检测', module) -.add('点', () => ) -.add('BigLine', () => ) + .add('点', () => ) + .add('BigLine', () => ) + .add('DataUpdate', () => );