antvis / antvis/LarkMap

🤔 [QUESTION]渲染好像有点问题

Open
#168 4 comments 0 reactions 1 assignee Claimed by @heiyexing View on GitHub
Dominant language
TypeScript
Stars
87
Forks
34
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Question description [Please make everyone to understand it]

### 💻 Link to minimal reproduction

```tsx
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(null);
const [rectDrawer, setRectDrawer] = useState(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 (


circleDrawer
circleDrawer?.enable()}>启用
circleDrawer?.disable()}>禁用
circleDrawer?.clear()}>清空


rectDrawer
rectDrawer?.enable()}>启用
rectDrawer?.disable()}>禁用
rectDrawer?.clear()}>清空


);
}
const heatLayerOptions: Omit = {
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 (





);
}

```
![image](https://user-images.githubusercontent.com/34028978/233245921-8ab247ee-60a2-427b-a2da-6bc10cad1e48.png)
![image](https://user-images.githubusercontent.com/34028978/233246093-c2041d19-aa63-4539-937d-f8e6bbb34781.png)

### 🏞 Expected result

### 🚑 Any additional [like screenshots]

- **LarkMap Version**:
- **Platform**:

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.