mapbox-gl教程(1):初识mapboxgl

hello world

我们先来编写一个hello world,并看看效果:

代码如下(html、body之类的标签就省略了哈):

1
2
3
4
5
6
7
8
9
10
11
12
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
<div id='map' style='width: 90%; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaW1saXV5dSIsImEiOiJjbDM4aHM4eXowMDBpM2RvZGdxdGZjeWMxIn0.mYtay02E_Z4iYOsDx3IdoA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [116.403119,39.925338],
zoom: 9
});
</script>

逐行解释一下:

第一步,引入mapbox的js和css

1
2
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

第二步,写一个div来展现地图,给它指定id

1
<div id='map' style='width: 90%; height: 300px;'></div>

第三步,mapbox设置一个token才能获取它官方发布的地图,这里用了一个公开的token,你也可以去这里自己申请一个

1
mapboxgl.accessToken = 'pk.eyJ1IjoiaW1saXV5dSIsImEiOiJjbDM4aHM4eXowMDBpM2RvZGdxdGZjeWMxIn0.mYtay02E_Z4iYOsDx3IdoA';

接下来就是传入参数来构造map对象了:

1
2
3
4
5
6
7
var map = new mapboxgl.Map({
container: 'map',
center: [116.403119,39.925338],
zoom: 9,
style: 'mapbox://styles/mapbox/streets-v9',

});

各参数说明如下:

参数名 解释
container 将地图在指定的dom中展示,这里展示在我们刚才写的id为”map”的div里
center 地图初始化时的中心坐标,如果你不知道你要展示的位置的坐标,可以从这里点选获取
zoom 地图初始化时的缩放等级,越大则越比例尺越大
style 地图样式,详见下面的描述

style

mapbox的style是一个比较奇怪的概念,与arcgis、openlayers等产品中的样式有很大的不同,它实际上是数据源、图层、样式等信息的汇总。
我们后面再详细地学习它,这里我们只需知道它是一个url或者json,配置了地图展现相关的重要信息。所以,配置不同的style会在地图上展现出不同的数据和式样。

本节中我们仅学习通过url来展现mapbox官方提供的背景地图。

下面列出了几种常用的style id,你可以预览并选择一个你喜欢的id,然后用’mapbox://styles/mapbox/‘+id来配置它们


更多的样式,你可以从这里找到,然后申请一个token并点击“Expoler”->“Add Decimal to your account”将其复制到你的token下来使用

当然,这种style的设置方式虽然便捷,但是太不灵活了,后续的章节中我们将使用自定义json来配置它

mapbox-gl的优势和劣势

如果你用过openlayers、leaflet或是arcgis js,你会发现mapbox-gl构建map对象的语法和它们很相像。事实上,如果我们想做一个web端的二维gis应用,这几款框架也是仅有的比较靠谱的选择。

arcgis js作为esri的产品,功能强大稳定,而且它是require风格编写的,按需加载的机制使我们不用担心文件体积爆炸。但一个很致命的问题是,它不开源,使得深度调试和扩展很是麻烦。

leaflet的优势是轻量级和对ie等浏览器的良好兼容,如果你需要兼容ie或是做一些轻量级、小数据量的开发,leaflet是不错的选择。

openlayers是对面向对象开发人员非常友好的一个框架,map、layer、feature、geometry的分层非常清晰,写起来非常的OOP,如果有很复杂的前端逻辑,openlayers写出来的代码比其它几个都容易维护。
缺点是性能一般,而且对于一些新技术有少量奇怪的bug,比如矢量瓦片绘制跨瓦片的点绘制不完整。

还有一类是运营商开发的框架,比如百度和高德,这类框架优势是方便且中文文档丰富。但是必须接公网、不开源、定制性差等问题,使得我们在需要开发强业务功能时几乎不会去考虑它。

那么,mapbox有哪些优劣呢?最大的优劣都来源于:mapbox-gl是基于webgl开发的

👍高性能 用js进行数据基本处理,然后就丢给webgl去渲染了,所以性能非常强悍。以我的破笔记本来测试geojson点图层的加载,
openlayers加载一千个点左右就开始卡顿了,而mapbox可以支撑两万个点左右。如果用mapbox的webgl接口来操作,甚至可以支撑到百万级。

👍可视化效果丰富 mapbox-gl开放了webgl的操作接口,这使得我们可以直接用gl对象或是将gl对象丢给Three.js等框架,从而做出炫酷的效果。

👎代码层级不够清晰 但基于webgl开发,造成了数据与渲染的高度分离,使得mapbox的代码层次不是很清晰,甚至于根本就没有feature和geometry(而是用json去代替),不是很容易维护,后面的章节中我们会体会到这点。
所以开发之前,你应该充分设计代码结构以防止后期的混乱(当然,openlayers虽然层次清晰,但不好好设计依然会混乱,只是比mapbox容易维护一些)。

👎兼容性不高 在IE上完全无法展示,但微软自己都把IE丢掉了,除了应付守旧的用户,这条也不是大问题。

了解了以上优劣,相信你会对你的的项目是否该使用mapbox有自己的判断。

本教程计划章节

本教程将按以下章节,逐步介绍和学习mapbox(啊,这坑好大,慢慢施工~

第一部分 简介

这部分我们先编写一个hello world,介绍mapbox的基本情况,并与其它前端地图框架做比较,以帮助你快速选型和上手

mapbox-gl教程(1):初识mapboxgl

第二部分 简单的数据加载与展现

完成了hello world,我们就可以在此基础上展现我们自己的数据,从而实现实际的业务功能了

mapbox-gl教程(2):添加自定义数据(小数据量的方式)(上)
介绍如何将自定义数据添加到地图上,并按我们需要的样式进行展现

mapbox-gl教程(3):添加自定义数据(小数据量的方式)(下)
详细介绍geojson数据源

mapbox-gl教程(4):适配国内底图
mapbox官方的底图对国内用户并不是很友好,这里介绍一些适配方式,适配过程中我们将接触到一种新的数据源:栅格瓦片

第三部分 地图能力拓展——交互事件、组件及第三方插件

完成了数据加载后,我们基本具备了地图展现的能力,接下来我们将补充学习如何与地图进行交互,并利用插件

mapbox-gl教程(5):常见事件与组件

(施工中) mapbox-gl教程(6):通过第三方组件扩展的效果

第四部分 数据与图层

第二部分已经介绍了如何加载官方地图和自定义数据,然而很多情况下这并不能满足我们的需求。

例如,在内网环境下我们无法使用官网的底图,那我们需要自己发布和加载内网底图来替换它。

又如,数据量很大时,用第二部分介绍的添加geojson图层的方式会使得浏览器卡死,此时我们需要一些更高效的方法。

或是需要高级特效的场景,我们需要使用mapbox的webgl接口来扩展自定义图层。

这些例子中我们发现,要把gis功能做精,往往是需要前后端技术密切配合的,所以如果你是一位纯前端/后端,有些内容看起来会比较吃力,
你需要补习一下相关知识,或者找一位后端/前端来帮助你。

(施工中) mapbox-gl教程(7):栅格瓦片图层的发布与使用

mapbox-gl教程(8):矢量瓦片图层的发布与使用

(施工中) mapbox-gl教程(9):使用webgl接口扩展展现效果


本文采用 CC BY-SA 4.0 协议 ,转载请注明原始链接: https://blog.wowtools.org/2020/12/21/2020-12-21-mapbox-gl-tutorial-1/

×

请作者喝杯咖啡