当前位置：首页 > news >正文

基于 Vue + 高德地图实现卫星图与 Mapbox 矢量瓦片

news 2025/8/9 10:01:40

在实际的地图可视化项目中，往往需要同时利用卫星影像与矢量数据来展现道路细节。例如，在交通监控或智慧城市场景中，我们不仅需要看到真实的地理环境，还要叠加车道线、标线、箭头等交通元素，以实现更直观的效果。

本文将基于 Vue 3 + 高德地图 JS API，结合 Mapbox 矢量瓦片（PBF 格式），实现 卫星底图 + 矢量标注 的融合渲染。

1️⃣ 项目背景

传统的在线地图服务（如普通高德、百度、谷歌地图）虽然提供了卫星影像，但交通标注通常是内置的，无法灵活定制。而矢量瓦片（MVT, Mapbox Vector Tile）则可以让我们自己控制：

显示哪些图层（比如车道线、标志标线、地面箭头等）
每个图层的样式（颜色、线宽、透明度）
灵活叠加在任意底图上

这种能力对于智慧交通、应急调度、数字孪生等领域非常重要。

2️⃣ 效果预览

最终效果如下：

底图：高德卫星影像
上层：多个自定义样式的 Mapbox 矢量瓦片图层（车道线、标线、箭头、安全岛等）
支持 3D 模式、缩放、旋转等交互
图层可叠加、透明度可调

3️⃣ 核心实现

3.1 地图初始化

首先，在 Vue 组件中创建一个 ref 作为地图容器，并在 onMounted 中初始化高德地图：

<template><div ref="mapContainer" style="width: 100%; height: 600px"></div>
</template><script setup>
import { ref, onMounted } from "vue";
const mapContainer = ref(null);
let map = null;onMounted(() => {map = new AMap.Map(mapContainer.value, {zoom: 16,center: [114.139699, 30.473609],viewMode: "3D",skyColor: "rgba(11, 77, 153,1)",wallColor: "rgba(111,123,144,0.5)",roofColor: "rgba(164,207,227,.5)",zooms: [2, 26],pitch: 0,plugins: ["AMap.MapboxVectorTileLayer", "AMap.GeoJSON"],});

3.2 添加卫星底图

高德地图的卫星影像可以通过 AMap.TileLayer.Satellite 添加：

  const satelliteLayer = new AMap.TileLayer.Satellite({ zIndex: 0 });map.add(satelliteLayer);

zIndex: 0 表示它作为最底层图层。

3.3 加载 Mapbox 矢量瓦片

矢量瓦片文件（PBF 格式）可以存放在本地 public/assets/vectorTiles 下，也可以从服务器获取。

  map.on("complete", () => {let vectorUrl = location.origin + "/assets/vectorTiles/[z]/[x]/[y].pbf";

[z]、[x]、[y] 会自动替换成瓦片的缩放级别和坐标。

3.4 创建多图层样式

这里创建了多个 AMap.MapboxVectorTileLayer 实例，每个实例对应不同的 sourceLayer（数据源图层），并设置样式：

    let mvtl = new AMap.MapboxVectorTileLayer({url: vectorUrl,zIndex: 1,styles: {polygon: {sourceLayer: "斑马线",color: "rgba(255,255,255,1)",},line: {sourceLayer: "标线",color: "rgba(255,255,255,1)",lineWidth: 1,},},});let mvtl1 = new AMap.MapboxVectorTileLayer({url: vectorUrl,zIndex: 1,styles: {polygon: {sourceLayer: "地面箭头",color: "rgba(255,255,255,1)",},line: {sourceLayer: "车道线",color: "#ccc",lineWidth: 1.3,},},});

通过这种方式，你可以灵活叠加多个图层，实现丰富的地图可视化效果。

3.5 添加到地图

最后，将这些矢量图层加到地图上：

    map.add(mvtl);map.add(mvtl1);map.add(mvtl2);map.add(mvtl3);map.setFitView();});
});
</script>

4️⃣ 技术要点

PBF 矢量瓦片来源
- 可以使用 Mapbox Studio、MapTiler、TileServer GL 自行生成
- 也可以用 Tippecanoe 将 GeoJSON 转为 PBF
样式控制
- sourceLayer 必须和瓦片数据里的图层名一致
- polygon、line、text 样式可分开定义
- 支持 color、opacity、lineWidth 等属性
性能优化
- 合理设置 dataZooms 和 zooms 避免在高倍缩放下加载大量数据
- 使用 zIndex 控制渲染顺序，避免覆盖底图