大纲
- API简介
- 生态体系
- style 规范介绍
基本的使用
初始化地图
- 安装
javascript
npm install --save mapbox-gl
npm install --save-dev @types/mapbox-gl- 初始化地图
javascript
import 'mapbox-gl/dist/mapbox-gl.css'
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'
})mapboxgl.Map是一个总的入口，也是一个核心接口，通过Map接口，我们可以：
- 添加所有的数据源
- 基础的地图操作(zoom)、相机操作
- 添加
marker标签、popup弹窗 - 添加地图交互事件
handler - 动态的设置地图图层的样式。
添加地图服务
mapboxgl对地图数据的组织分为源数据source和图层layer。其中源数据只是指定地图源，不能直接添加source到地图中，而图层才代表在地图中显示的数据，layer可以指定图层的显示样式、显示规则等等。
添加一个geoserver发布的矢量切片数据
- geoserver发布矢量切片
具体的发布流程可参照这篇文章：https://zhuanlan.zhihu.com/p/65584557 这里自己实践过程中发现的需要注意的点：
- 计算边框信息
- 网格集grid set，mapboxgl默认只支持3857（web墨卡托）投影的地图服务，而在geoserver默认没有3857坐标系的网格集，需要自己新建，然后再切片图层中使用3857网格集
- mapboxgl加载
javascript
// 矢量
{
'source-id': {
'type': 'vector',
'tiles': [
'https://a.example.com/geoserver/gwc/service/tms/1.0.0/example:example@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
],
'scheme': 'tms'
}
}设置矢量切片图层的样式
maoboxgl 定义了一份样式规范Style Specification，样式规范决定了绘制哪些数据，绘制顺序以及绘制数据时如何设置数据样式。 样式规范包括几大类：
- 描述信息，包括version、name、center，这些信息不会对地图样式和状态产生影响
- 初始化时地图状态，包括center、zoom
- 地图要素，sources、layers
- 设置样式显示，
paint、layout、filter
mapboxgl基本架构和渲染流程
mapbox.gl源码解析——基本架构与数据渲染流程 - 羊大葱 - 博客园
数据处理流程：
数据加载与渲染的流程：