Nuxt-Mapbox

與 Nuxt 優雅整合 Mapbox

📖 查看新文件！

功能

🏗 使用 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