webGIS开发第八章（地图控件的使用）

实现效果

地图控件有

比例尺
工具条
控制罗盘控件
显示鹰眼
定位控件

地图控件的使用单个调用（比例尺）

<template>
    <div id="container"></div>
    <div>
        <el-button type="" @click="add">显示实时交通图层</el-button>
        <el-button type="" @click="remove">隐藏实时交通图层</el-button>
    </div>
</template>
<script lang="ts" setup>
import {
      onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null
let traffic = nulllet toolbar = null
onMounted(() => {
     
    AMapLoader.load({
     
        key: "", //本人的k值！！！！
        version: "2.0",
        plugins: [],
    })
        .then((AMap) => {
     
            map = new AMap.Map("container", {
     
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 10, // 初始化地图级别
                center: [117.120128, 36.652069], // 初始化地图中心点位置
                // pitch: 45,
                terrain: true,
                skyColor: 'red',
                showIndoorMap: true</