🤔 [QUESTION]我直接复制的官网示例上绘图控件，但是控件无法显示

[Yu]

🐛 问题：我直接复制的官网示例上绘图控件，但是控件并没有显示，也没有什么报错

[Yu]

<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>
  

[heiyexing]

地图容器 #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>