antv-l7/examples/point/scatter/demo/animatePoint.js

55 lines
1.1 KiB
JavaScript
Raw Normal View History

2021-05-27 19:53:22 +08:00
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
2021-05-27 19:55:06 +08:00
center: [ 112, 23.69 ],
zoom: 2.5
2021-05-27 19:53:22 +08:00
})
});
fetch(
2021-05-27 19:55:06 +08:00
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
2021-05-27 19:53:22 +08:00
)
2021-05-27 19:55:06 +08:00
.then(res => res.text())
.then(data => {
2021-05-27 19:53:22 +08:00
const pointLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
2021-05-27 19:55:06 +08:00
y: 'Latitude'
}
2021-05-27 19:53:22 +08:00
})
.shape('circle')
.active(true)
.animate(true)
.size(40)
.color('#ffa842')
.style({
opacity: 1,
2021-05-27 19:55:06 +08:00
offsets: [ 40, 40 ]
2021-05-27 19:53:22 +08:00
});
const pointLayer2 = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
2021-05-27 19:55:06 +08:00
y: 'Latitude'
}
2021-05-27 19:53:22 +08:00
})
.shape('circle')
.active(true)
.animate(true)
.size(50)
.color('#f00')
.style({
2021-05-27 19:55:06 +08:00
opacity: 1
2021-05-27 19:53:22 +08:00
});
scene.addLayer(pointLayer);
scene.addLayer(pointLayer2);
});