Mapbox Vue3

中文

English

中文

English

Appearance

安装使用说明 ​

TIP

在进行SSR打包时，需要特殊处理，mapbox中包含了对window对象的直接访问

Mapbox Vue3 组件库共有5个包，分别为：

  • @mapbox-vue3/core: v1.0.0，核心组件包
  • @mapbox-vue3/effect-layers: v1.0.0，特效组件包
  • @mapbox-vue3/deck-layers: v1.0.0，Deck GL特效扩展包
  • @mapbox-vue3/env-layers: v1.0.0，模拟环境组件包，包括雨，雪等
  • @mapbox-vue3/utils: v1.0.0，工具包

使用方式 ​

1. 引入css ​

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

// 使用core, env-layers，effect-layers，deck-layers包，需要引入如下css
import "@mapbox-vue3/core/index.css"

// 使用utils包，需要引入如下css
import "@mapbox-vue3/utils/index.css"

// 如果需要标绘相关功能，需要引入如下css
import '@mapbox-web/draw/mapbox-web-draw.css'

TIP

全量引入和按需引入选择一种即可

2. 全量引入组件 ​

ts
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. 按需引入组件 ​

需要使用 unplugin-vue-components 插件，请参考官方文档

ts
// resolvers配置方式
name => {
  if (name.startsWith('Mb')) { return { importName: name, path: '@mapbox-vue3/core/es' }; }
}

TIP

由于deck-layers，env-layers，effect-layers包中的组件也使用Mb前缀，如果使用unplugin-vue-components插件，需要单独配置。 建议使用 import { * } from '@mapbox-vue3/deck-layers(effect-layers，env-layers)'直接导入

安装方式 ​

npm ​

shell
# 根据需求安装
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 ​

shell
# 根据需求安装
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 ​

shell
# 根据需求安装
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