明白了,阿杰,你想在 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>
添加:
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德Key"></script>
版本 2.0 支持更多可视化图层和 API。
二、创建地图组件
1️⃣ Map.vue
<template>
<div id="mapContainer" ref="mapContainer" class="map-container"></div>
</template>
<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 地图瓦片。
五、图层管理与性能优化
- 图层分组
const layerGroup = new AMap.LayerGroup([marker1, polyline1]) layerGroup.setMap(map)
- 动态更新
- Marker / Polyline / Polygon 可用
setPath()
或setPosition()
动态刷新
- Marker / Polyline / Polygon 可用
- 大数据量优化
- 使用
AMap.MarkerClusterer
聚合点位 - 热力图用插件处理
- 避免过多 DOM 渲染
- 使用
六、样式与大屏集成建议
- 大屏地图一般全屏显示,控件固定在边角
- 图层透明度、颜色统一,保证叠加效果清晰
- 可结合 ECharts / Vue3 reactive 数据 动态刷新地图图层
✅ 效果总结
- Marker 点位展示
- Polyline 线路展示
- Polygon 面域展示
- 热力图展示密度
- 可叠加自定义瓦片或矢量图层
发表回复