Mapbox-vue3 NPM

Mapbox-Vue3

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

use

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

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">
		<MapboxVectorTileSource url="mapbox://examples.8fgz4egr">
			<MapboxCircleLayer
				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'],
				}"
			></MapboxCircleLayer>
		</MapboxVectorTileSource>
	</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">
		<MapboxTerrain url="mapbox://mapbox.mapbox-terrain-dem-v1" :exaggeration="1.5"></MapboxTerrain>
	</Mapbox>
</template>
<script lang="ts" setup>
import type { MapboxOptions } from 'mapbox-gl';
import { useMapbox, useChainCamera } from 'mapbox-vue3';

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

const { getMapInstance, register } = 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>