VMapbox 标准地图

如果使用 Mapbox 托管的样式，则需要设置 accessToken 访问令牌。

如何创建 accessToken 访问令牌？

Mapbox GL JS v3

Mapbox GL JS v3 支持 Mapbox 标准样式 和 Mapbox 标准卫星样式。

• mapbox://styles/mapbox/standard
• mapbox://styles/mapbox/standard-satellite

提示

迁移至 Mapbox GL JS v3

注意

• 如果图层样式中有使用 text-field 属性，则必须设置 glyphs 属性。
• Mapbox 的矢量瓦片、字体都是采用 pbf 数据结构进行存储、压缩的。
• 使用 font-maker 工具可以将 ttf 字体转换为 pbf 字体。

基础用法

mapbox-base.vue

<script lang="ts" setup>
import { VMapbox } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
</script>

<template>
  <VMapbox :access-token="accessToken" type="standard-satellite" />
</template>

隐藏源代码

更改地图的样式配置属性

参考 Mapbox 样式配置属性

mapbox-dynamic.vue

<script lang="ts" setup>
import type { MapboxLoadEvent, MapboxProps } from '@movk-repo/mapbox'
import { VMapbox, VNavigationControl } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const options: Ref<MapboxProps['defaultOptions']> = ref({
  center: [2.2932, 48.86069],
  zoom: 15.1,
  pitch: 62,
  bearing: -20,
})

const lightPreset = computed(() => {
  const hour = new Date().getHours()
  if (hour >= 6 && hour < 8)
    return 'dawn'
  if (hour >= 8 && hour < 18)
    return 'day'
  if (hour >= 18 && hour < 20)
    return 'dusk'
  return 'night'
})

function load({ map }: MapboxLoadEvent) {
  map.setConfig('basemap', {
    lightPreset,
    showPointOfInterestLabels: false,
  })
}
</script>

<template>
  <VMapbox type="standard" :access-token="accessToken" :default-options="options" @load="load">
    <VNavigationControl />
  </VMapbox>
</template>

隐藏源代码

Api

官方配置文档 map

mapboxProps

属性名	说明	类型	默认值
accessToken	访问令牌	string	必填
type	标准样式类型	enum	-
projection	地图投影	ProjectionSpecification/string	globe
zoom	缩放级别	number	6
minZoom	最小缩放级别	number	0
maxZoom	最大缩放级别	number	22
center	中心坐标	LngLatLike	[120, 30]
sprite	雪碧图文件	string	-
glyphs	字体文件	string	string
defaultOptions	配置选项	object	-
syncOptions	同步插件的配置	object	-

mapboxEmits

事件名	说明	回调参数
load	地图渲染完成后执行	Function
mousedown	鼠标按下时触发	Function
mouseup	鼠标抬起时触发	Function
mouseover	鼠标悬停时触发	Function
mousemove	鼠标移动时触发	Function
preclick	鼠标单击前触发	Function
click	鼠标单击时触发	Function
dblclick	鼠标双击时触发	Function
mouseenter	鼠标进入时触发	Function
mouseleave	鼠标离开时触发	Function
mouseout	鼠标移出时触发	Function
contextmenu	右键菜单时触发	Function
wheel	滚轮滚动时触发	Function
touchstart	触摸开始时触发	Function
touchend	触摸结束时触发	Function
touchmove	触摸移动时触发	Function
touchcancel	触摸取消时触发	Function
movestart	地图开始移动时触发	Function
move	地图移动时触发	Function
moveend	地图停止移动时触发	Function
dragstart	拖拽开始时触发	Function
drag	拖拽时触发	Function
dragend	拖拽结束时触发	Function
zoomstart	缩放开始时触发	Function
zoom	缩放时触发	Function
zoomend	缩放结束时触发	Function
rotatestart	旋转开始时触发	Function
rotate	旋转时触发	Function
rotateend	旋转结束时触发	Function
pitchstart	倾斜开始时触发	Function
pitch	倾斜时触发	Function
pitchend	倾斜结束时触发	Function
boxzoomstart	框选缩放开始时触发	Function
boxzoomend	框选缩放结束时触发	Function
boxzoomcancel	框选缩放取消时触发	Function
resize	地图大小改变时触发	Function
renderstart	渲染开始时触发	Function
render	渲染时触发	Function
remove	地图移除时触发	Function
error	错误时触发	Function

Inject

hooks/symbol.ts

export const mapKey: InjectionKey<ShallowRef<Map | undefined>> = Symbol('Map')

hooks/useMap.ts

export function useMap() {
  const map = inject(mapKey)
  if (!map) {
    throw new Error('No Map provided')
  }
  return unref(map)
}

类型定义

MapboxLoadEvent

basemap/Mapbox/Mapbox.ts

export interface MapboxLoadEvent {
  map: Map
}

要使用 Mapbox 的默认标准样式的雪碧图，请带上 accessToken 访问令牌。例如：https://api.mapbox.com/styles/v1/mapbox/light-v11/sprite?access_token=xxx

mapboxStyles 类型定义

constant/index.ts

export const mapboxStyles = {
  'standard': {
    url: 'mapbox://styles/mapbox/standard',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/standard/4ivg79if39renk8nikar5sjr3/sprite',
  },
  'standard-satellite': {
    url: 'mapbox://styles/mapbox/standard-satellite',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/standard-satellite/c431ijrfgwsyfexdag09oy9n8/sprite',
  },
  'streets-v12': {
    url: 'mapbox://styles/mapbox/streets-v12',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/streets-v12/sprite',
  },
  'outdoors-v12': {
    url: 'mapbox://styles/mapbox/outdoors-v12',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite',
  },
  'light-v11': {
    url: 'mapbox://styles/mapbox/light-v11',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/light-v11/sprite',
  },
  'dark-v11': {
    url: 'mapbox://styles/mapbox/dark-v11',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/dark-v11/sprite',
  },
  'satellite-v9': {
    url: 'mapbox://styles/mapbox/satellite-v9',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/sprite',
  },
  'satellite-streets-v12': {
    url: 'mapbox://styles/mapbox/satellite-streets-v12',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/sprite',
  },
  'navigation-day-v1': {
    url: 'mapbox://styles/mapbox/navigation-day-v1',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/navigation-day-v1/sprite',
  },
  'navigation-night-v1': {
    url: 'mapbox://styles/mapbox/navigation-night-v1',
    sprite: 'https://api.mapbox.com/styles/v1/mapbox/navigation-night-v1/sprite',
  },
} as const