Mapbox浅析（快速入门Mapbox）

1.是什么？

Mapbox是一个可以免费创建并定制个性化地图的网站。

2.了解一些基本东西

常见的 mapbox.js和mapbox-gl.js的异同点？

相同点：

1.都是由Mapbox公司推出的免费开源的JavaScript库

2.都可以作为前端渲染矢量瓦片交互地图的工具

3.它们的样式设置都支持Mapbox Style

不同点：

1.mapbox.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

2.mapbox-gl.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

3.使用mapbox-gl.js的浏览器必须支持WebGL渲染，在旧的浏览器中是不支持mapbox-gl.js的，而mapbox.js则没有此限制

3.能表达整个Map的style文件

mapbox-gl.js目前是围绕style文件来进行的，其内容如下：

{"version": 8, "name": "Mapbox Streets","sprite": "mapbox://sprites/mapbox/streets-v8", "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": {...},"layers": [...]
}

从以上可以看出，除了一些基本的属性定义之外，就是sources和layers。

基本属性的可以参见官网https://www.mapbox.com/mapbox-gl-js/api

mapbox通过这样一个style的配置文件来描述整个地图，这是目前其他map都没有使用的方式。在讨论如何设计实现这个目的之前，我们想一下这样做有什么好处？最大的好处莫过于为自定义地图提供了方便之门。使用者压根可以不写任何代码，用mapbox就能做出一个自己想要的地图。这一点很符合mapbox目前提供的服务。style如此之重要，以至于官网专门对style进行详细了说明，涉及到各个参数及作用。

3.Map的组成：

任何GIS引擎必然要处理两个部分，一个是数据来源，一个是这些数据在界面呈现的样子，在style里面的source和layer对应于这两个部分。

4.Source：

目前source支持vector，raster， geojson， image，video。geojson的支持比较巧妙，有了这个就可以处理各种矢量类型，包括集合。而vector主要解决的是矢量瓦片，raster解决的是目前常用的栅格化的瓦片。video的加入使得功能更加的现代化。 mapbox在style里面，为source定义了一个type属性，来说明这些类型。

除了这个属性之外，source其实都有一个id，被layer引用，从而让数据源和数据呈现关联在一起。这个地方需要注意的是，source和layer之间的关系，可以是1->n

5.Layer：

虽然也是分为几类的，但并不是直接根据source来分类的。目前分为：background,fill, line, symbol, raster, circle。除了background类型的layer不需要绑定source之外。其他的都需要有source。fill类型的layer只负责填充；line类型的layer只负责线条；symbol类型的layer会处理sprite，文字等；raster类型的layer就只负责图片， circle类型的layer是更高一层的业务处理需要。

不管是什么界面，都是由点线面组成的。 layer其实代表的就是界面，只是大家通常会认为一个layer上会放置各种点，线，面。 mapbox把这种layer再细分层了更小的单元，只包含点的layer，只负责呈现线的layer，只负责面的layer。如果把多个layer组合在一起，就和现在的通用想法的layer是一样的，source和layer的1->n关系在这个地方发挥作用了。

这样设计不仅简单化，关键还可以提高效率，能批量化的渲染。

Filter：

mapbox也充分考虑了个别特殊元素的定制化显示需求，如果要对一批元素中的某些个别元素进行定制化呈现，可以在layer里面设置filter，满足条件的元素才会被呈现出来，并用layer设定的样式渲染。filter是一个很强大的功能，有效融合在设计中，可以解决很多问题。

style文件才是核心，API只是围绕着这个核心服务的

想看API，可以参见 https://www.mapbox.com/mapbox-gl-js/api 。

Mapbox浅析（快速入门Mapbox）相关推荐

我的《ANSA快速入门指南》中文帮助文档浅析（上）
作者 | 团长仿真秀科普作者导读:本文是ANSA入门系列第一篇(后续将会在仿真秀官网或APP同步发布).本系列致力于提供ANSA软件的中文版,帮助广大初学者迅速入门.本文档内容及图片均来自于ANS ...
2引擎帮助文档_ANSA快速入门指南中文帮助文档浅析（上）
作者 | 团长仿真秀科普作者首发 | 仿真秀公众号(ID:fangzhenxiu2018) 导读:本文是ANSA入门系列第一篇(后续将会在仿真秀官网或APP同步发布).本系列致力于提供ANSA软件 ...
ROS2零基础快速入门
ROS2入门最快需要多少时间?3天: ROS2开发一款基础机器人需要多久?3个星期: ROS2怎么才能算"精通"?不可能,3年也不行-- 如何判断一款通用性软件成熟并可以投入精力去 ...
京东必考JVM 问题诊断快速入门
JVM 问题诊断快速入门 JVM 全称为 Java Virtual Machine,翻译为中文 "Java 虚拟机".本文中的JVM主要指 Oracle 公司的 HotSpot V ...
VIVE开发基础（A、快速入门篇）（Yanlz+HTC+VIVE+VR+AR+MR+XR+SteamVR+CameraRig+LightHouse+HeadSet+Teleport+立钻哥哥+）
<HTC_VIVE开发基础> 版本作者参与者完成日期备注 HTC_VIVE_V01_1.0 严立钻 2018.08.23 <HTC_VIVE开发基础>发布说明: +++ ...
Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录一.下载解压二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试三.shiro.ini分析四.Quickstart. ...
计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...

Mapbox浅析（快速入门Mapbox）

Mapbox浅析（快速入门Mapbox）相关推荐

最新文章

热门文章