Vue3-mapbox-gl NPM

vue3-mapbox-gl

一个基于Vue3+Typescript封装的Mapbox地图组件

安装

yarn add mapbox-gl vue3-mapbox-gl

引入

入口文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'vue3-mapbox-gl/dist/style.css'
import mapbox from 'vue3-mapbox-gl'
const app = createApp(App)
app.use(mapbox, {
  accessToken: 'pk.xxxxxxxxxxxxx'
})
app.mount('#app')

对于ts项目需要在tsconfig.json里面配置types

{
  "compilerOptions": {
    "types": [
      // ...
      "vue3-mapbox-gl/global"
    ]
  }
}

BaseMap

<template>
  <Mapbox :options="options"></Mapbox>
</template>
<script lang="ts" setup>
import type { MapboxOptions } from 'mapbox-gl';
const options: Partial<MapboxOptions> = {
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [0，0],
	zoom: 4
};
</script>

SourceAndLayer

<template>
  <Mapbox :options="options">
    <VectorTileSource url="mapbox://examples.8fgz4egr">
      <CircleLayer
        source-layer="sf2010"
        :style="{
          'circle-radius': {
            base: 1.75,
            stops: [
              [12, 2],
              [22, 180]
            ]
          },
          'circle-color': [
            'match',
            ['get', 'ethnicity'],
            'White',
            '#fbb03b',
            'Black',
            '#223b53',
            'Hispanic',
            '#e55e5e',
            'Asian',
            '#3bb2d0',
            '#ccc'
          ]
        }"></CircleLayer>
    </VectorTileSource>
  </Mapbox>
</template>
<script lang="ts" setup>
import type { MapboxOptions } from 'mapbox-gl'
const options: Omit<MapboxOptions, 'container'> = {
  style: 'mapbox://styles/mapbox/light-v11',
  zoom: 12,
  center: [-122.4473, 37.7535]
}
</script>

Hooks

<template>
  <Mapbox :options="options" :register="register">
    <Terrain
      url="mapbox://mapbox.mapbox-terrain-dem-v1"
      :exaggeration="1.5"></Terrain>
  </Mapbox>
</template>
<script lang="ts" setup>
import type { MapboxOptions } from 'mapbox-gl'
import { useMapbox, useChainCamera } from 'vue3-mapbox-gl'

const options: Partial<MapboxOptions> = {
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [107.132759, 34.784138],
  zoom: 4
}

const [register, { getMapInstance }] = useMapbox()
useChainCamera({
  map: getMapInstance,
  autoplay: true,
  list: [
    {
      lngLat: [138.73375, 35.41914],
      lookAtLngLat: [138.73036, 35.36197],
      altitude: 7000,
      duration: 0
    },
    {
      lngLat: [138.72649, 35.33974],
      lookAtLngLat: [138.73036, 35.36197],
      altitude: 6000.0,
      duration: 20000
    },
    {
      lngLat: [138.72623, 35.31977],
      lookAtLngLat: [138.73036, 35.36197],
      altitude: 6000,
      duration: 15000
    },
    {
      lngLat: [138.73375, 35.41914],
      lookAtLngLat: [138.73036, 35.36197],
      altitude: 7000,
      duration: 15000
    }
  ]
})
</script>