mapbox的基本概念
文章目录
mapbox的基本概念
map的组成
style：
Source：
vector
raster
raster-dem
geojson
image
video
Layer：
background
fill
line
symbol
raster
API
mapbox官网例子

styles：显示一个地图

layers：用3D形式呈现建筑物、可视化人口密度

sources：将本地json数据与矢量切片图形链接；添加实时数据、添加栅格切片数据源、添加一个第三方矢量切片数据源

CSDN教程：Mapbox浅析（快速入门Mapbox）

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

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

相同点：

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

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

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

​ 4.是Leaflet的一个插件，使用方式是通过结合Leaflet使用

不同点：

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

map的组成
官方文档：map

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

var map = new mapboxgl.Map({
container: ‘map’,
center: [-122.420679, 37.772537],
zoom: 13,
style: style_object,
hash: true,
transformRequest: (url, resourceType)=> {
if(resourceType === ‘Source’ && url.startsWith(‘http://myHost’)) {
return {
url: url.replace(‘http’, ‘https’),
headers: { ‘my-custom-header’: true},
credentials: ‘include’ // Include cookies for cross-origin requests
}
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
style：
官网文档：style

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

{
//样式规范版本号，必须为8。
“version”: 8,
//样式的易于理解的名称。
“name”: “Mapbox Streets”,
//用于检索子画面图片和元数据的基本URL。URL必须是绝对的。
“sprite”: “mapbox://sprites/mapbox/streets-v8”,
//一个URL模板，用于以PBF格式加载以符合距离字段的字形集。该URL必须包含{fontstack}和{range}令牌。
“glyphs”: “mapbox://fonts/mapbox/{fontstack}/{range}.pbf”,
//数据源规范
“sources”: {
“mapbox-streets”: {
“type”: “vector”,
“url”: “mapbox://mapbox.mapbox-streets-v6”
}
}
//图层将按照此数组的顺序绘制
“layers”: [
{
“id”: “water”,
“source”: “mapbox-streets”,
“source-layer”: “water”,
“type”: “fill”,
“paint”: {
“fill-color”: “#00ffff”
}
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
从以上可以看出，除了一些基本的属性定义之外，就是sources和layers。

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

Source：
官网文档：Source

表明地图应该显示哪些数据。使用type属性指定来源类型，该类型必须是vector，raster，raster-dem， geojson， image，video之一。添加source还不足以使数据在地图上显示，因为source不包含颜色或宽度等样式细节。layer为其提供可视化表示。

平铺源（矢量和栅格）必须根据TileJSON规范指定其详细信息。有几种方法可以这样做：

方法一：通过提供TileJSON如属性"tiles"，“minzoom"和"maxzoom”

“mapbox-streets”: {
“type”: “vector”,
“tiles”: [
“http://a.example.com/tiles/{z}/{x}/{y}.pbf”,
“http://b.example.com/tiles/{z}/{x}/{y}.pbf”
],
“maxzoom”: 14
}
1
2
3
4
5
6
7
8
方法二：通过URL

“mapbox-streets”: {
“type”: “vector”,
“url”: “http://api.example.com/tilejson.json”
}
1
2
3
4
方法三：通过向支持EPSG：3857（或EPSG：900913）作为切片数据源的WMS服务器提供URL。

“wms-imagery”: {
“type”: “raster”,
“tiles”: [
“http://a.example.com/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=example”
],
“tileSize”: 256
}
1
2
3
4
5
6
7
vector
矢量图块源。切片必须是mapbox矢量切片格式。

“mapbox-streets”: {
“type”: “vector”,
“url”: “mapbox://mapbox.mapbox-streets-v6”
}
1
2
3
4
raster
栅格图块源。

“mapbox-satellite”: {
“type”: “raster”,
“url”: “mapbox://mapbox.satellite”,
“tileSize”: 256
}
1
2
3
4
5
raster-dem
栅格点图块源，仅支持mapbox terrain RGB

“mapbox-terrain-rgb”: {
“type”: “raster-dem”,
“url”: “mapbox://mapbox.terrain-rgb”
}
1
2
3
4
geojson
一个genjson的来源。必须通过data属性提供数据，该属性的值可以是URL或内联geojson

“geojson-marker”: {
“type”: “geojson”,
“data”: {
“type”: “Feature”,
“geometry”: {
“type”: “Point”,
“coordinates”: [-77.0323, 38.9131]
},
“properties”: {
“title”: “Mapbox DC”,
“marker-symbol”: “monument”
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
geojson源通过其URL引用外部geojson文档。geojson文档必须位于同一域或可以使用cors访问。

“geojson-lines”: {
“type”: “geojson”,
“data”: “./lines.geojson”
}
1
2
3
4
image
图像源。该URL值包含图片位置

“image”: {
“type”: “image”,
“url”: “https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif”,
“coordinates”: [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
}
1
2
3
4
5
6
7
8
9
10
video
视频源。该URL值是一个数组。

“video”: {
“type”: “video”,
“urls”: [
“https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4”,
“https://static-assets.mapbox.com/mapbox-gl-js/drone.webm”
],
“coordinates”: [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
[-122.51423120498657, 37.56161849366671]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
除了这个属性之外，source其实都有一个id，被layer引用，从而让数据源和数据呈现关联在一起。 这个地方需要注意的是，source和layer之间的关系，可以是1->n

Layer：
官网文档：Layer

图层的类型由type属性指定，background，fill，line，symbol，raster，circle，fill-extrusion，heatmap，hillshade之一。

虽然也是分为几类的，但并不是直接根据source来分类的。除了background类型的layer不需要绑定source之外。其他的都需要有source。图层将从源中获取数据，可以选择过滤要素，然后定义如何对这些要素进行样式设置。

“layers”: [
{
“id”: “water”,
“source”: “mapbox-streets”,
“source-layer”: “water”,
“type”: “fill”,
“paint”: {
“fill-color”: “#00ffff”
}
}
]
1
2
3
4
5
6
7
8
9
10
11
Filter：mapbox也充分考虑了个别特殊元素的定制化显示需求，如果要对一批元素中的某些个别元素进行定制化呈现，可以在layer里面设置filter，满足条件的元素才会被呈现出来，并用layer设定的样式渲染。filter是一个很强大的功能，有效融合在设计中，可以解决很多问题。

ID：唯一的图层名称。

source：任意属性可用于跟踪图层，但不影响渲染。应该给属性加上前缀以避免冲突，例如“ mapbox：”。

source：从矢量图块源使用的图层。矢量图块源所必需；禁止用于所有其他来源类型，包括GeoJSON来源。

type：该层渲染类型

background类型的layer负责地图的背景颜色或图案
fill类型的layer只负责填充；
line类型的layer只负责线条；
symbol类型的layer会处理sprite、图标、文字等；
raster类型的layer就只负责图片，栅格地图纹理，如卫星图像
circle类型的layer是更高一层的业务处理需要。

图层具有两个子属性，它们决定如何呈现该图层中的数据：layout和paint属性。

布局属性显示在图层的"layout"对象中。它们将在渲染过程的早期应用，并定义该层的数据如何传递到GPU。更改布局属性需要异步“布局”步骤。

绘画属性将在稍后的渲染过程中应用。绘画属性出现在图层的"paint"对象中。更改涂料属性很便宜，并且可以同时发生。

background
用于绘制背景的颜色。

fill
填充是否应该抗锯齿

line
应用于线的模糊

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

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

symbol
如果为true，则即使该图标与其他先前绘制的符号碰撞也将是可见的。

raster
增加或减少图像的亮度

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

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

更多内容请关注：CSDN、掘金、GitHub、gitee

原文链接：https://blog.csdn.net/weixin_42875245/article/details/107798725?utm_medium=distribute.pc_feed.none-task-blog-cf-3.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-cf-3.nonecase&request_id=5f4391b8cea070620e93e937