Nuxt-Mapbox

优雅的 Mapbox 与 Nuxt 集成

📖 查看最新文档!

特性

🏗 使用 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 组件内部嵌套各自的组件来添加 Layers、Sources & Controls

示例

    <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