快速开始

一个基于 MapBoxGLJS 的 Vue 3 轻量级组件库.

在线示例

更新日志

✨ 特点

• MapBoxGLJS: 基于 MapBoxGLJS V3 开发，支持几乎所有内置的功能
• 内置底图: 内置天地图，支持切换地图样式
• 内置OGC: 内置 OGC 服务组件，支持 WMS、WMTS、WFS 等服务
• 绘制模式: 支持绘制点、线、面、矩形、圆、涂鸦、测距与测面等
• 地图同步: 支持同步多个地图之间的操作，如拖拽、缩放、旋转和倾斜。
• 地图卷帘: 支持在两个地图的滑动与同步
• 简单轻量: 易于使用，仅包含必要的组件
• TypeScript: 使用 TypeScript 编写，支持类型提示

💡 前置条件

• Vue 3.5.0 以上版本
• mapbox-gl 3.7.0 以上版本

提示

mapbox-gl@v3.5.0 转为 TypeScript，不用再需安装 @types/mapbox-gl

注意

@movk-repo/mapbox 是仅 ESM 的软件包，不要使用 require() 导入它，并确保最新的 package.json 包含 "type": "module"，或者更改相关文件的文件扩展名，例如 vite.config.js 到 .mjs/.mts。

📦 安装

pnpm

pnpm add @movk-repo/mapbox mapbox-gl

npm

npm add @movk-repo/mapbox mapbox-gl

yarn

yarn add @movk-repo/mapbox mapbox-gl

🚀 导入样式

将 mapbox-gl 和 @movk-repo/mapbox 的样式导入到你的项目中。

import 'mapbox-gl/dist/mapbox-gl.css'
import '@movk-repo/mapbox/style.css'