mirror of https://gitee.com/antv-l7/antv-l7
112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
// @ts-nocheck
|
||
import React from 'react';
|
||
import {
|
||
Scene,
|
||
GaodeMap,
|
||
GaodeMapV2,
|
||
Mapbox,
|
||
Map,
|
||
PointLayer,
|
||
Marker,
|
||
MarkerLayer,
|
||
Popup,
|
||
} from '@antv/l7';
|
||
|
||
export default class Amap2demo extends React.Component {
|
||
// @ts-ignore
|
||
private scene: Scene;
|
||
|
||
public componentWillUnmount() {
|
||
this.scene.destroy();
|
||
}
|
||
|
||
public async componentDidMount() {
|
||
const scene = new Scene({
|
||
id: 'map',
|
||
map: new GaodeMap({
|
||
pitch: 0,
|
||
style: 'dark',
|
||
// center: [115, 30],
|
||
|
||
center: [105.790327, 36.495636],
|
||
|
||
zoom: 0,
|
||
// layers: [new window.AMap.TileLayer.Satellite()]
|
||
}),
|
||
});
|
||
|
||
this.scene = scene;
|
||
|
||
scene.on('loaded', () => {
|
||
// var xyzTileLayer = new window.AMap.TileLayer({
|
||
// // 图块取图地址
|
||
// getTileUrl:
|
||
// 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8<ype=11',
|
||
// zIndex: 100,
|
||
// });
|
||
// scene.getMapService().map.add(xyzTileLayer);
|
||
|
||
addMarkers();
|
||
scene.render();
|
||
});
|
||
|
||
function addMarkers() {
|
||
fetch(
|
||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||
)
|
||
.then((res) => res.json())
|
||
.then((nodes) => {
|
||
const markerLayer = new MarkerLayer({
|
||
cluster: true,
|
||
});
|
||
for (let i = 0; i < nodes.features.length; i++) {
|
||
const { coordinates } = nodes.features[i].geometry;
|
||
const marker = new Marker().setLnglat({
|
||
lng: coordinates[0],
|
||
lat: coordinates[1],
|
||
});
|
||
markerLayer.addMarker(marker);
|
||
}
|
||
scene.addMarkerLayer(markerLayer);
|
||
// 模拟第二次查询（8条数据，坐标点是兰州）
|
||
// 注意看地图上兰州的位置，原本是3，放大后会变成11
|
||
const data = [
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
{ coordinates: [103.823305441, 36.064225525] },
|
||
];
|
||
for (let i = 0; i < data.length; i++) {
|
||
const { coordinates } = data[i];
|
||
const marker = new Marker().setLnglat({
|
||
lng: coordinates[0],
|
||
lat: coordinates[1],
|
||
});
|
||
markerLayer.addMarker(marker);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
public render() {
|
||
return (
|
||
<>
|
||
<div
|
||
id="map"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
}}
|
||
></div>
|
||
</>
|
||
);
|
||
}
|
||
}
|