🤔 [QUESTION]我直接复制的官网示例上绘图控件,但是控件无法显示
mumaYu opened this issue · comments
<template>
<div id="map"></div>
</template>
<script setup lang="ts">
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { ControlEvent, DrawControl } from '@antv/l7-draw';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [116.1608, 40.1119],
zoom: 15,
}),
});
scene.on('loaded', () => {
const tileLayer = new AMap.TileLayer.Satellite();
tileLayer.setMap(scene.map);
const drawControl = new DrawControl(scene, {});
scene.addControl(drawControl);
drawControl.on(ControlEvent.DrawChange, (changeType) => {
console.log(changeType);
});
});
</script>
<style lang="less" scoped>
#map{
width:100vw;
height:100vh;
}
</style>
地图容器 #map 还没有初始化完,就开始 new Scene 了
<template>
<div id="map"></div>
</template>
<script setup lang="ts">
import { Scene } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import { ControlEvent, DrawControl } from "@antv/l7-draw";
import { onMounted } from "vue";
onMounted(() => {
const scene = new Scene({
id: "map",
map: new GaodeMap({
style: "light",
center: [116.1608, 40.1119],
zoom: 15,
}),
});
scene.on("loaded", () => {
const drawControl = new DrawControl(scene, {});
scene.addControl(drawControl);
drawControl.on(ControlEvent.DrawChange, (changeType) => {
console.log(changeType);
});
});
});
</script>
<style scoped>
body {
margin: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>