明白了，阿杰，你想要在 Vite + Vue 3 的项目中使用 高德地图（AMap） 构建可视化大屏，并且 添加地图控件（如缩放、比例尺、鹰眼、地图类型切换等）。下面我给你整理一份完整示例与注意事项。

🗺️ No.20 — Vite + Vue3 高德地图可视化大屏：添加地图控件指南

一、安装与初始化

1️⃣ 创建 Vite + Vue 3 项目

npm create vite@latest amap-dashboard -- --template vue
cd amap-dashboard
npm install

2️⃣ 安装高德地图 SDK

高德地图官方 JS SDK（Web 端）无需 npm，可直接引入 CDN：

<!-- public/index.html 中 head 标签内引入 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德Key"></script>

Vite 默认使用 ES 模块，可以在 Vue 组件内直接使用 AMap 对象。

二、创建地图组件

1️⃣ Map.vue

<template>
  <div id="mapContainer" ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const mapContainer = ref(null)
let map = null

onMounted(() => {
  map = new AMap.Map(mapContainer.value, {
    center: [114.305, 30.592], // 初始中心经纬度
    zoom: 11,                  // 初始缩放级别
    mapStyle: 'amap://styles/normal', // 默认地图风格
  })

  // 添加控件
  addMapControls(map)
})

// 封装控件函数
function addMapControls(map) {
  // 1️⃣ 缩放平移控件
  map.addControl(new AMap.ControlBar({
    position: {
      top: '10px',
      right: '10px'
    }
  }))

  // 2️⃣ 比例尺控件
  map.addControl(new AMap.Scale({
    position: {
      bottom: '10px',
      left: '10px'
    }
  }))

  // 3️⃣ 地图类型切换控件
  map.addControl(new AMap.MapType({
    position: {
      top: '10px',
      left: '10px'
    }
  }))

  // 4️⃣ 鹰眼控件
  map.addControl(new AMap.OverView({
    isOpen: true,
    position: {
      bottom: '50px',
      right: '10px'
    }
  }))
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>

三、控件说明

控件类名说明
缩放平移AMap.ControlBar提供放大、缩小、旋转等功能
比例尺AMap.Scale显示地图比例尺
地图类型AMap.MapType可切换普通、卫星、混合地图
鹰眼AMap.OverView小地图，显示整体范围
版权控件AMap.Copyright显示版权信息（默认存在）

四、样式与布局建议

  • 高德控件可通过 position 调整到大屏合适位置
  • 推荐固定控件位置，避免控件遮挡数据可视化组件
  • 大屏地图可配合 Panel/Charts/Vuex 等显示实时数据

五、可视化大屏集成技巧

  1. 多图层叠加
    • 使用 AMap.TileLayer / AMap.TileLayer.Raster 加载自定义瓦片
    • 使用 AMap.VectorLayer 或 AMap.Polyline/Polygon/Marker 绘制叠加数据
  2. 动态数据刷新
    • Vue 3 的 reactive + watchEffect 可以实时更新地图 Marker 或图表
  3. 性能优化
    • 控制 Marker 数量或使用 AMap.MarkerClusterer
    • 使用 requestAnimationFrame 处理大规模动画

✅ 最终效果：

  • 大屏全屏地图
  • 缩放、比例尺、鹰眼、地图类型控件
  • 可叠加实时数据可视化组件（如 ECharts / Three.js / D3）