声明式 Mapbox GL 组件库
声明式组合地图、图层、标记与控件,相机参数
v-model 双向绑定。一套组件通用于 Nuxt 4 与纯 Vue + Vite,内置 3D 建筑、动态效果、天气环境与本土化底图。<template>
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/light-v11',
center: [116.461, 39.909],
zoom: 15.5,
pitch: 60,
bearing: -20
}"
>
<MapboxGradientBuilding
:stops="[[0, '#1e3a8a'], [80, '#0ea5e9'], [200, '#f59e0b'], [400, '#f43f5e']]"
:opacity="0.9"
/>
</MapboxMap>
</template>
核心特性
声明式组合、上下文注入与双模式运行,从一张底图到复杂的三维效果与本土化底图服务,按需采用。
声明式组合
以组件组合地图、数据源、图层、标记、弹窗与控件,状态即视图,告别命令式的 add/remove 样板。
MapboxContext 注入
根组件下发上下文,子组件经 useMap() 直接取实例与 isLoaded / whenLoaded(),无需 id 查表。
相机双向绑定
v-model:center / zoom / bearing / pitch 双向同步相机参数,并支持跨路由 persistent 持久化。
丰富图层与效果
内置 circle / fill / line / symbol / fill-extrusion / heatmap 与聚合、建筑、栅格、视频图层,叠加雷达、扩散、辉光、波纹、迁徙、轨迹等动态效果。
环境与天气
fog 大气、3D lights、terrain 地形与 temperature / rain / snow 天气,配合相机倾斜还原沉浸式三维场景。
本土化扩展
天地图底图、WMS / WMTS 服务、mapbox-gl-draw 绘制,以及基于 gcoord 的 WGS84 / GCJ02 / BD09 坐标转换,开箱即用。
Nuxt / Vue 双模式
既是 Nuxt 4 模块,也提供 @movk/mapbox/vite + vue-plugin,让同一套组件在纯 Vue + Vite 项目中通用。
Composables 与工具
useMap、useMapboxCamera、useMeasure、useMapExport 等 composables,搭配坐标、缓冲、几何与量算工具,按需渐进式采用。
开始构建你的下一张地图
从一张底图到三维建筑、动态效果与本土化底图服务,Movk Mapbox 用声明式组件把 Mapbox GL 的复杂度收敛为可组合的能力。