明白了,阿杰,你想在 Vite + Vue3 可视化大屏中,使用 高德地图展示多种图层(如 Marker、热力图、面/线、瓦片图层等)。下面我整理一份完整示例和实现方法。


🗺️ No.19 — Vite + Vue3 高德地图可视化大屏:展示图层


一、前置准备

1️⃣ 创建 Vite + Vue3 项目

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

2️⃣ 引入高德地图 JS SDK

public/index.html<head> 添加:

&lt;script src="https://webapi.amap.com/maps?v=2.0&amp;key=你的高德Key">&lt;/script>

版本 2.0 支持更多可视化图层和 API。


二、创建地图组件

1️⃣ Map.vue

&lt;template>
  &lt;div id="mapContainer" ref="mapContainer" class="map-container">&lt;/div>
&lt;/template>

&lt;script setup>
import { ref, onMounted } 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'
  })

  // 添加示例图层
  addMarkerLayer(map)
  addPolylineLayer(map)
  addPolygonLayer(map)
  addHeatmapLayer(map)
})


三、示例图层展示

1️⃣ Marker 图层(点位)

function addMarkerLayer(map) {
  const markers = [
    new AMap.Marker({ position: [114.305, 30.592], title: '点位1' }),
    new AMap.Marker({ position: [114.315, 30.602], title: '点位2' }),
  ]
  markers.forEach(marker => marker.setMap(map))
}


2️⃣ Polyline 图层(线)

function addPolylineLayer(map) {
  const polyline = new AMap.Polyline({
    path: [
      [114.305, 30.592],
      [114.315, 30.602],
      [114.325, 30.595]
    ],
    strokeColor: '#FF0000',
    strokeWeight: 3,
    strokeOpacity: 0.8
  })
  polyline.setMap(map)
}


3️⃣ Polygon 图层(面)

function addPolygonLayer(map) {
  const polygon = new AMap.Polygon({
    path: [
      [114.32, 30.59],
      [114.33, 30.59],
      [114.33, 30.60],
      [114.32, 30.60]
    ],
    fillColor: '#00FF00',
    fillOpacity: 0.5,
    strokeColor: '#00AA00',
    strokeWeight: 2
  })
  polygon.setMap(map)
}


4️⃣ 热力图层(Heatmap)

function addHeatmapLayer(map) {
  // 高德热力图插件需单独引入
  AMap.plugin(['AMap.Heatmap'], () => {
    const heatmap = new AMap.Heatmap(map, {
      radius: 25,
      opacity: [0, 0.8]
    })

    // 模拟热力点
    const heatmapData = [
      { lng: 114.305, lat: 30.592, count: 10 },
      { lng: 114.315, lat: 30.602, count: 15 },
      { lng: 114.325, lat: 30.595, count: 8 }
    ]
    heatmap.setDataSet({ data: heatmapData, max: 20 })
  })
}


四、瓦片图层 / 自定义 TileLayer

function addCustomTileLayer(map) {
  const tileLayer = new AMap.TileLayer({
    tileUrl: 'https://your-server/tiles/{z}/{x}/{y}.png',
    zIndex: 5
  })
  map.add(tileLayer)
}

可加载 GDAL 切片 / Web 地图瓦片。


五、图层管理与性能优化

  1. 图层分组 const layerGroup = new AMap.LayerGroup([marker1, polyline1]) layerGroup.setMap(map)
  2. 动态更新
    • Marker / Polyline / Polygon 可用 setPath()setPosition() 动态刷新
  3. 大数据量优化
    • 使用 AMap.MarkerClusterer 聚合点位
    • 热力图用插件处理
    • 避免过多 DOM 渲染

六、样式与大屏集成建议

  • 大屏地图一般全屏显示,控件固定在边角
  • 图层透明度、颜色统一,保证叠加效果清晰
  • 可结合 ECharts / Vue3 reactive 数据 动态刷新地图图层

效果总结

  • Marker 点位展示
  • Polyline 线路展示
  • Polygon 面域展示
  • 热力图展示密度
  • 可叠加自定义瓦片或矢量图层