antvis/LarkMap

🤔 [QUESTION]

Euraxluo opened this issue · 2 comments

🐛 Question description [Please make everyone to understand it]

LarkMap 似乎无法使用 简单Map 模式

💻 Link to minimal reproduction

import { CustomControl, LarkMap, useScene, ImageLayerProps, ImageLayer } from '@antv/larkmap';
import { Button } from '@/components/ui/button';
import React, { useEffect, useState } from 'react';
import { DrawCircle, DrawRect } from '@antv/l7-draw';

function CustomDraw() {
    const [circleDrawer, setCircleDrawer] = useState<DrawCircle | null>(null);
    const [rectDrawer, setRectDrawer] = useState<DrawRect | null>(null);

    const scene = useScene();
    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 layerOptions: Omit<ImageLayerProps, 'source'> = {
    autoFit: true,
    style: {
        opacity: 0.8,
    },
};
export default function Map() {
    const [options, setOptions] = useState(layerOptions);
    const [source, setSource] = useState({
        data: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ',
        parser: {
            type: 'image',
            extent: [36, 40, 64, 60],
        },
    });

    return (
        <LarkMap
            id="map_show"
            mapType="Map"
            mapOptions={{
                center: [0, 0],
                pitch: 0,
                zoom: 3,
                style: "dark",
                version: 'SIMPLE',
                mapSize: 100,
                maxZoom: 5,
                minZoom: 2,
                pitchEnabled: false,
                rotateEnabled: false,
            }}
            className="h-9/10"
        >
            <ImageLayer {...options} source={source} />
            <CustomDraw />
        </LarkMap>
    );
}

🏞 Expected result

预期
1.正常显示,现在经纬度具有约束
2. 可以正常绘制圆等

🚑 Any additional [like screenshots]

  • LarkMap Version:
  • Platform:

L7Draw 暂不支持在简易地图上进行绘制,因为 L7Draw 内部涉及到非常多的经纬度运算操作,没办法兼容 Map 的x,y坐标系上