Installation

TIP

When performing SSR packaging, special processing is required. Mapbox includes direct access to the window object

The Mapbox Vue3 component library has 5 packages, namely:

• @mapbox-vue3/core: v1.0.0, core component package
• @mapbox-vue3/effect-layers: v1.0.0, special effect component package
• @mapbox-vue3/deck-layers: v1.0.0, Deck GL special effect extension package
• @mapbox-vue3/env-layers: v1.0.0, simulation environment component package, including rain, snow, etc.
• @mapbox-vue3/utils: v1.0.0, tool package

Usage

1. Import css

import '@mapbox-web/supermap/mapbox-gl-enhance.css'

// Use core, env-layers, effect-layers, deck-layers packages, you need to import the following css
import "@mapbox-vue3/core/index.css"

// To use the utils package, you need to import the following css
import "@mapbox-vue3/utils/index.css"

// If you need to draw related functions, you need to import the following css
import '@mapbox-web/draw/mapbox-web-draw.css'

TIP

Choose one of the full import and on-demand import

2. Full import of components

import MapboxVue3Core from "@mapbox-vue3/core"
import MapboxVue3DeckLayers from "@mapbox-vue3/deck-layers"
import MapboxVue3EnvLayers from "@mapbox-vue3/env-layers"
import MapboxVue3EffectLayers from "@mapbox-vue3/effect-layers"
import { createMeasure } from "@mapbox-vue3/utils"

Vue.use(MapboxVue3Core)
Vue.use(MapboxVue3DeckLayers)
Vue.use(MapboxVue3EnvLayers)
Vue.use(MapboxVue3EffectLayers)

3. Import components on demand

Need to use the unplugin-vue-components plugin, please refer to the official documentation

// resolvers configuration method
name => {
if (name.startsWith('Mb')) { return { importName: name, path: '@mapbox-vue3/core/es' }; }
}

TIP

Because the components in the deck-layers, env-layers, and effect-layers packages also use the Mb prefix, if you use the unplugin-vue-components plugin, you need to configure it separately. It is recommended to use import { * } from '@mapbox-vue3/deck-layers(effect-layers，env-layers)' to import directly

Installation method

npm

# Install as required
npm i @mapbox-vue3/core@latest
npm i @mapbox-vue3/utils@latest
npm i @mapbox-vue3/env-layers@latest
npm i @mapbox-vue3/effect-layers@latest
npm i @mapbox-vue3/deck-layers@latest

yarn

# Install as required
yarn add @mapbox-vue3/core@latest
yarn add @mapbox-vue3/utils@latest
yarn add @mapbox-vue3/env-layers@latest
yarn add @mapbox-vue3/effect-layers@latest
yarn add @mapbox-vue3/deck-layers@latest

pnpm

# Install as needed
pnpm add @mapbox-vue3/core@latest
pnpm add @mapbox-vue3/utils@latest
pnpm add @mapbox-vue3/env-layers@latest
pnpm add @mapbox-vue3/effect-layers@latest
pnpm add @mapbox-vue3/deck-layers@latest