快速开始

Mapbox GL JS 是一个 JavaScript 库，基于 vector tiles 和 Mapbox styles，使用 WebGL 渲染交互式地图。Mapbox GL JS 是 Mapbox GL 生态系统之一，其中还包括 Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

1. 安装

npm install --save mapbox-gl

# v3.5.0 之后无需安装
# npm install --save-dev @types/mapbox-gl

提示

mapbox-gl@v3.5.0 转为 TypeScript，不用再需安装 @types/mapbox-gl。

2. 添加 CSS 样式文件

import 'mapbox-gl/dist/mapbox-gl.css'

3. 初始化地图

import mapboxgl from 'mapbox-gl'

mapboxgl.accessToken = '<your access token here>'
const map = new mapboxgl.Map({
  container: 'map', // 地图容器 id
  style: 'mapbox://styles/mapbox/streets-v11', // 样式
  center: [104.294538, 35.860092], // 地图初始中心点 [经度, 维度]
  zoom: 2.4, // 地图初始缩放级别
  projection: 'globe', // 地图投影，自 v2.9.0 起支持 'globe'
})

示例：Display a globe on a webpage

因为 Mapbox GL JS 中的图层是异步的。因此，通常使用事件绑定在合适的时间更改地图。例如：

map.on('load', () => {
  map.addLayer({
    id: 'terrain-data',
    type: 'line',
    source: {
      type: 'vector',
      url: 'mapbox://mapbox.mapbox-terrain-v2',
    },
    'source-layer': 'contour',
  })
})

此示例代码用于仅在加载地图的资源（包括样式）后添加图层。如果立即运行 map.addLayer，则会触发错误：Error: Style is not done loading，因为要添加图层的样式不存在。

提示

有关地图图层的渲染规范，请参考：样式规范。