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
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:
这样设计不仅简单化,关键还可以提高效率,能批量化的渲染。
Filter: