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);
|
|
|
|
});
|