Nuxt-Mapbox

優雅的 Mapbox 與 Nuxt 整合

📖 查看新文件！

功能

🏗 使用 Vue 元件輕鬆將 Mapbox 新增至您的 Nuxt 應用程式
🌎 useMapbox 組合式函式方便存取
👷 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