一、概述

最近由于项目的需求，借此机会对mapbox GL做了一个系统的学习，同时也对整个学习过程做一个记录，一方面留作自用，另一方面也希望看到此文的人在学习mapbox GL的时候，能够有所启发、有所收获。

二、快速认识

很多人在学习一个新的webis框架的时候，表示狗咬刺猬——无从下口。对于这一点，我的建议是快速认识。

1.目的

快速认识的目的有两个：1、对框架有一个认知性的理解；2、甄别框架是否满足需求。

2.如何快速认识

打开maobox GL官网，如下图所示：

快速认识mapbox GL，我们只需要快速看一下Overview和Example两个部分即可。

2.1 Overview

通过Overview，我们可以获取到几个信息：1、简介；2、版本；3、引用，包括npm和cdn；4、基本的使用demo。

2.2 Example

Example 是官方提供的有关maoboxl GL功能比较全面的一个展示，对于一个初次接触的人来说，通过Example，一方面我们能够快速的获取mapbox GL的表现，另一方面，通过Example代码，可以对框架的使用有一个初步的认识。

在Example页面，上方是实现的效果，下方是实现的代码，这样结合效果和代码，更方便我们对框架的理解。

三、深入学习

深入学习，我们对Example外的API Reference和Style Specification的部分去认真的阅读，有必要的同时做以笔记。深入学习的时候，我建议根据文档提供的结构，必要时需要去查阅源代码做以辅助，整理框架的思维导图。在整理导图的时候，如果对于webgis比较熟悉的话，可以根据自己的理解与判断，对于部分不经常用的做以删减。下图是我在学习的时候整理的导图。

从上图，我们可以明显的看出mapbox GL里面的几个核心：map、marker、popup、control、handler、geometry、source、layers,其中map和layers更是核心中的核心，下面我将结合一定的例子对上面的内容做一分解说明。

1.map

从大的导图里面把map的部分单独拿出来，如下图。

1.1 option

option是初始化map是需要的一些参数：

var map = new mapboxgl.Map({container: 'map', // container idstyle: 'mapbox://styles/mapbox/streets-v11', // stylesheet locationcenter: [-74.5, 40], // starting position [lng, lat]zoom: 9 // starting zoom
});

1.2 method

method是map可调用的一些方法，方法调用所需的参数和方法需参考API Reference。

// addSource
map.addSource('warn-line', {type: 'geojson',data: geojson
});
// addLayer
map.addLayer({id: 'warn-line',type: 'line',source: 'warn-line',paint: {'line-color': ['match',['get', 'color'],'blue', 'blue','green'],'line-width': 2,'line-dasharray': [5, 3]}
});
// getCanvas
map.getCanvas().style.cursor = 'pointer';

1.3 event

event是可绑定在map上的事件，事件的绑定方式为map.on('event', eventData)。

// mouseenter
map.on('mouseenter', 'points', function(e) {map.getCanvas().style.cursor = 'pointer';that.showInfo(e.features[0]);
});
// click
map.on('click', 'points', function(e) {map.getCanvas().style.cursor = 'pointer';var feature = e.features[0];var center = feature.geometry.coordinates.slice();map.flyTo({center: center, zoom: 14});
});
// mouseleave
map.on('mouseleave', 'points', function() {map.getCanvas().style.cursor = '';that.popup.remove();
});

2.marker

marker拆分后的导图如下。

2.1 option

option是初始化marker是需要的一些参数：

const ele = document.createElement('div');
ele.setAttribute('class', 'map-label');
ele.innerHTML = r.name;
const option = {element: ele,anchor: 'bottom',offset: [0, -10]
}
const marker = new mapboxgl.Marker(option);

2.2 method

method是marker可调用的一些方法，方法调用所需的参数和方法需参考API Reference。

marker.setLngLat([r.lon, r.lat]);
marker.addTo(map);

2.3 event

event是可绑定在marker上的事件，事件的绑定方式为marker.on('event', handler)。

function onDragEnd() {var lngLat = marker.getLngLat();coordinates.style.display = 'block';coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}marker.on('dragend', onDragEnd);

3.popup

popup拆分后的导图如下。

3.1 option

option是初始化popup是需要的一些参数：

var popup = new mapboxgl.Popup({closeButton: false,closeOnClick: false,className: 'my-popup',offset: [0, -15],anchor: 'bottom'
});

3.2 method

method是popup可调用的一些方法，方法调用所需的参数和方法需参考API Reference。

popup.setLngLat(coordinates).setHTML(description).addTo(map);

3.3 event

event是可绑定在popup上的事件，事件的绑定方式为popup.on('event', handler)。

function onOpen() {console.log('Popup Open');
}popup.on('open', onOpen);

4.source

mapbox GL里source在API Reference和Style Specification均出现了，仔细查看文档，发现在API Reference说明的是方法，Style Specification里面说明的是属性。source的导图如下图。

4.1 GeoJSONSource

GeoJSONSource可为json对象或者文件url。

// data可为json对象或者文件url
var geojson = 'url';
var geojson = {};
map.addSource('points', {type: 'geojson',data: geojson
});
map.getSource('points').setData(geojson);

4.2 ImageSource

ImageSource需要url和coordinates,其中coordinates的格式为：top left, top right, bottom right, bottom left。

map.addSource('loopimage', {type: 'image',url: url,coordinates: coords
});
map.getSource('loopimage').updateImage({url: url,coordinates: coords
});

4.3 VideoSource

VideoSource需要url和coordinates,其中coordinates的格式为：top left, top right, bottom right, bottom left。

map.addSource('video', {type: 'video',url: url,coordinates: coords
});
map.getSource('video').play();

4.4 CanvasSource

CanvasSource需要canvas和coordinates,其中coordinates的格式为：top left, top right, bottom right, bottom left。

map.addSource('canvas', {type: 'canvas',canvas: canvas,coordinates: coords
});
map.getSource('canvas').play();

4.5 vector、raster和raster-dem

vector、raster和raster-dem是在API和style里面没有对应上的，主要是一些栅格或者矢量的切片或者服务调用。

// raster——xyz切片
map.addSource('XYZLabel', {"type": "raster","tiles": ['http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'],"tileSize": 256
});
// raster——wms
map.addSource('wmsLayer', {"type": "raster","tiles": ['http://39.106.122.204:8086/geoserver/railway/wms?service=WMS&version=1.1.0&request=GetMap&layers=railway:layer_base&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'],"tileSize": 256
});
// raster——tms
map.addSource('gugong', {'type': 'raster','scheme': 'tms','tiles': ['http://localhost:8086/geoserver/gwc/service/tms/1.0.0/jtmet%3Agugong@EPSG%3A900913@png/{z}/{x}/{y}.png']
});// vector
map.addSource("states", {type: "vector",url: "mapbox://mapbox.us_census_states_2015"
});
// raster-dem
map.addSource('dem', {"type": "raster-dem","url": "mapbox://mapbox.terrain-rgb"
});

5.layer

layer在mapbox GL中是非常重要的，我觉得mapbox GL的设计NB之处也在于此。layer的type的可能值有background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。layer的导图如下。
。

下面链接里是mapbox GL官方的streets-v11的图层配置参数，比较长，但是我希望你能够认真读完，他对于你理解layer非常重要！！！

链接：https://pan.baidu.com/s/1N0g2esP5POBL0GfZVMwYIw
提取码：kgdv

初识mapbox GL相关推荐

进阶mapbox GL之paint和filter
概述通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识,本节结合一些示例,重点讲述一下mapbox GL里面的filter和paint的用法. 说明本文中的示例 ...
Mapbox gl tile瓦片渲染点以及图片Icon
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图 2. 源码参考 1. 效果图点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示. 2. 源 ...
Mapbox GL JS 表达式概述
表达式(expressions)是Mapbox GL JS的一个高级功能,它为数据的添加和渲染展示提供了更多的灵活性. 表达式的功能包括: 数据驱动样式:根据一个或多个数据属性指定样式规则. 算术:对 ...
GIS开发：推荐Mapbox gl解决方案
在二维地图的开发中,实现类似于百度.高德地图那样加载简体的模型,使用mapbox gl是一个比较好的解决方案. https://docs.mapbox.com/mapbox-gl-js/api/ 类似 ...
Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...
Mapbox GL JS介绍及使用
Mapbox GL JS介绍及使用:(以web端基本交互实现为例) Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox st ...
GIS开发：mapbox gl几种底图的加载
mapbox gl除了加载客户端可控制样式的底图,也能够加载常规的影像底图. 这里指发布的影像或者矢量地图切片,在线经常使用的有天地图,谷歌地图.高德百度等,底图的加载,mapbox gl中,主要是修 ...
Mapbox GL可视化之热力图
本篇使用Mapbox GL JS实现数据的热力图可视化,以截止到2020-03-01日的新冠疫情作为示例数据. 一什么是热力图热力图使用颜色的深浅表示数值的变化,从而表示数据的分布情况,这使得用户 ...
喜大普奔——Mapbox GL JS支持多种投影了
1. 写在前面 Mapbox GL JS 在v2.6.0之前不支持投影,默认地图是Mercator投影方式,如果项目中使用其他类型的投影(比如加载经纬度直投4326的地图切片),必须通过修改源码的方式 ...

初识mapbox GL