import AMapLoader from '@amap/amap-jsapi-loader';
import { CustomControl, LarkMap, useScene, ImageLayerProps, ImageLayer, RasterLayer, RasterLayerProps, HeatmapLayer, HeatmapLayerProps, ZoomControl } from '@antv/larkmap';
import { Button } from '@/components/ui/button';
import React, { useEffect, useState } from 'react';
import { DrawCircle, DrawRect } from '@antv/l7-draw';
import { GaodeMap } from '@antv/l7';
import * as turf from '@turf/turf';
const geoJson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[116.40233, 39.785038],
[116.40293, 39.785109],
[116.402952, 39.785005],
[116.402346, 39.78494]
]
]
}
}
]
}
async function getTiffData() {
const cellSide = 20; // 20cm对应的经纬度大小，这个值会因地区和投影方式而略有差异
const options = { units: "centimeters" };
// const options = { units: "meters" };
// 根据GeoJSON对象的边界创建栅格
const bbox = turf.bbox(geoJson);
// var grid = turf.squareGrid(bbox, cellSide, options);
var grid = turf.pointGrid(bbox, cellSide, options);
const result: {
lng: number,
lat: number,
t: number
}[] = [];
grid.features.forEach((feature) => {
result.push({ lng: feature.geometry.coordinates[0], lat: feature.geometry.coordinates[1], t: 1 })
})
console.log("async")
return result;
}
function CustomDraw() {
const [circleDrawer, setCircleDrawer] = useState<DrawCircle | null>(null);
const [rectDrawer, setRectDrawer] = useState<DrawRect | null>(null);
const scene = useScene();
scene.on('zoomend', (e: any) => { console.log(e) });
useEffect(() => {
const drawerRect = new DrawRect(scene, {
distanceOptions: {},
areaOptions: {},
});
setRectDrawer(drawerRect);
const drawerCircle = new DrawCircle(scene, {});
setCircleDrawer(drawerCircle);
}, []);
return (
<CustomControl className="float-right">
<div style={{ padding: 8 }}>
circleDrawer
<Button onClick={() => circleDrawer?.enable()}>启用</Button>
<Button onClick={() => circleDrawer?.disable()}>禁用</Button>
<Button onClick={() => circleDrawer?.clear()}>清空</Button>
</div>
<div style={{ padding: 8 }}>
rectDrawer
<Button onClick={() => rectDrawer?.enable()}>启用</Button>
<Button onClick={() => rectDrawer?.disable()}>禁用</Button>
<Button onClick={() => rectDrawer?.clear()}>清空</Button>
</div>
</CustomControl>
);
}
const heatLayerOptions: Omit<HeatmapLayerProps, 'source'> = {
autoFit: true,
shape: 'square',
minZoom: 20,
maxZoom: 30,
size: {
field: 't',
value: [0, 1.0],
},
style: {
intensity: 3,
radius: 20,
opacity: 1,
rampColors: {
colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
},
};
const getMapInstance = () => {
return AMapLoader.load({
key: '089b120ae9421928984329b9ecec8eba', // 申请好的 Web 端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
return new GaodeMap({
mapInstance: new AMap.Map('container', {
zoom: 29.8, //初始化地图层级
zooms: [2, 30],
center: [116.397428, 39.90923], //初始化地图中心点
}),
});
});
};
export default function Map() {
const [heatOptions, setHeatOptions] = useState(heatLayerOptions);
const [heatSource, setHeatSource] = useState({
data: [],
parser: { type: 'json', x: 'lng', y: 'lat' }
});
useEffect(() => {
getTiffData()
.then((data: any) => {
setHeatSource((prevState) => ({ ...prevState, data }));
});
}, []);
return (
<LarkMap
id="container"
map={getMapInstance}
className="h-9/10"
>
<HeatmapLayer {...heatLayerOptions} source={heatSource} />
<ZoomControl/>
<CustomDraw />
</LarkMap>
);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent