Mapbox React

中文

English

中文

English

Appearance

安装使用说明 ​

TIP

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

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

  • @mapbox-react/core: v1.0.0，核心组件包
  • @mapbox-react/effect-layers: v1.0.0，特效组件包
  • @mapbox-react/deck-layers: v1.0.0，Deck GL特效扩展包
  • @mapbox-react/env-layers: v1.0.0，模拟环境组件包，包括雨，雪等
  • @mapbox-react/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-react/core/index.css"

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

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

2. 引入组件 ​

ts
import { MbMap, ... } from "@mapbox-react/core"
import { MbArcLayer, ... } from "@mapbox-react/deck-layers"
import { MbRainLayer, ... } from "@mapbox-react/env-layers"
import { MbDelayedPointLayer, ... } from "@mapbox-react/effect-layers"
import { createMeasure } from "@mapbox-react/utils"

安装方式 ​

npm ​

shell
# 根据需求安装
npm i @mapbox-react/core@latest
npm i @mapbox-react/utils@latest
npm i @mapbox-react/env-layers@latest
npm i @mapbox-react/effect-layers@latest
npm i @mapbox-react/deck-layers@latest

yarn ​

shell
# 根据需求安装
yarn add @mapbox-react/core@latest
yarn add @mapbox-react/utils@latest
yarn add @mapbox-react/env-layers@latest
yarn add @mapbox-react/effect-layers@latest
yarn add @mapbox-react/deck-layers@latest

pnpm ​

shell
# 根据需求安装
pnpm add @mapbox-react/core@latest
pnpm add @mapbox-react/utils@latest
pnpm add @mapbox-react/env-layers@latest
pnpm add @mapbox-react/effect-layers@latest
pnpm add @mapbox-react/deck-layers@latest