🤔 [QUESTION]
Euraxluo opened this issue · 2 comments
Euraxluo commented
🐛 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:
Euraxluo commented
heiyexing commented
L7Draw 暂不支持在简易地图上进行绘制,因为 L7Draw 内部涉及到非常多的经纬度运算操作,没办法兼容 Map 的x,y坐标系上