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文件来进行的，其内容以下：

1.  
   {
2.  
       "version": 8,
3.  
       "name": "Mapbox Streets",
4.  
       "sprite": "mapbox://sprites/mapbox/streets-v8",
5.  
       "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
6.  
       "sources": {...},
7.  
       "layers": [...]
8.  
   }

从以上能够看出，除了一些基本的属性定义以外，就是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是一个很强大的功能，有效融合在设计中，能够解决不少问题。

6.

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

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