🏗 使用 Vue 组件轻松将 Mapbox 添加到您的 Nuxt 应用中
🌎 使用 useMapbox Composable 方便访问
👷 defineMapboxMarker & defineMapboxPopup 用于创建自定义组件
🎛️ defineMapboxControl 用于创建您自己的控件
📖 跨路由持久化地图实例

快速设置

将 nuxt-mapbox & mapbox-gl 依赖项添加到您的项目中

npx nuxi@latest module add nuxt-mapbox
npm install --save-dev mapbox-gl

将 nuxt-mapbox 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    'nuxt-mapbox'
  ]
})

将您的 Mapbox API 密钥添加到 nuxt.config.ts 的 mapbox 部分

export default defineNuxtConfig({
  modules: [
    'nuxt-mapbox'
  ],
  mapbox: {
    accessToken: '{API_KEY}'
  }
})

用法

查看 Mapbox GL JS 文档以供参考。

地图实例是使用组件创建的。您可以通过组件 props 提供所有选项

示例

    <MapboxMap
      map-id="{ID}"
      style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;"
      :options="{
        style: 'mapbox://styles/mapbox/light-v11', // style URL
        center: [-68.137343, 45.137451], // starting position
        zoom: 5 // starting zoom
      }"
    />

您可以通过在 Map 内部嵌套其各自的组件来添加图层、数据源和控件

示例

    <MapboxMap
      ...
    >
      <MapboxSource 
        source-id="{ID}"
        :source="{
          type: 'geojson',
          data: '/test.geojson'
        }"
      />
      <MapboxLayer
        :layer="{
          source: '{ID}',
          id: 'geojson-layer',
          type: 'fill'
        }"
      />
      <MapboxGeolocateControl position="top-left" />
    </MapboxMap>

开发

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

nuxt-mapbox

Nuxt-Mapbox

优雅的 Nuxt Mapbox 集成

📖 查看新的文档！

功能

快速设置

用法

开发