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

[Euraxluo]

🐛 Question description [Please make everyone to understand it]

💻 Link to minimal reproduction

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

🏞 Expected result

🚑 Any additional [like screenshots]

• LarkMap Version:
• Platform:

[Euraxluo]

附：我使用的nextJS动态import客户端渲染：
page.jsx：

import { ReactElement } from 'react';
import Layout from '@/layout/inner-layout'
import { PageHead } from '@/layout/page-head';
import dynamic from 'next/dynamic';
import { LoadingCard } from '@/components/LoadingCard';
import { mapPageConfig } from '@/config/map-page';

const Map = dynamic(() => import('@/elements/map'), {
    ssr: false,
    loading: () => <LoadingCard />
});


export default function Page() {
    return (
        <Map />
    )
}

Page.pageLayout = function pageLayout(page: ReactElement) {
    return (
        <>
            <PageHead title="Map" />
            <Layout pageconfig={mapPageConfig}>
                {page}
            </Layout >
        </>
    )
}

[lvisei]

来一个 code sanbox 复现代码的示例吧，贴上去方便看和调试 https://codesandbox.io/s/uuk3jm?file=/App.jsx

[Euraxluo]

https://codesandbox.io/s/stoic-lamport-q57dj9?file=/App.tsx
继续放大的化，会看不到绘制的图层元素

[lvisei]

codesandbox.io/s/stoic-lamport-q57dj9?file=/App.tsx 继续放大的化，会看不到绘制的图层元素

@heiyexing