@movk-repo/mapbox

快速开始 {#start}

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

在线示例

更新日志

✨ 特点 {#features}

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

💡 前置条件 {#prerequisites}

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

::: tip 提示

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

:::

::: warning 注意

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

📦 安装 {#installation}

::: code-group

pnpm add @movk-repo/mapbox mapbox-gl

npm add @movk-repo/mapbox mapbox-gl

yarn add @movk-repo/mapbox mapbox-gl

:::

🚀 导入样式 {#import-styles}

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

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