Mapbox 地图样式规范
Mapbox 样式文件定义的是地图所呈现的视觉外观,包括:需要绘制哪些数据、绘制的顺序、以及绘制数据时如何进行符号化。样式文档是以 JSON 对象中的属性字段进行组织的。此规范对这些属性字段进行定义和描述。
此文档面向的对象包括:
更倾向于手写样式而不是使用 Mapbox Studio 生成样式的高级设计师和制图人员
希望使用 Mapbox GL JS 或 Mapbox iOS 或 Android SDK 中样式相关特性的开发者
开发生成或处理 Mapbox 样式文件的软件工具开发者。
根节点属性字段规定了样式中地图的图层、瓦片数据源和其他资源、以及其他地方未指定时相机的默认参数。
{"version":8,"name":"Mapbox Streets","sprite":"mapbox://sprites/mapbox/streets-v8","glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf","sources":{...},"layers":[...]}
样式规范版本号。 必须为 8。
"version":8
样式名称.
"name":"Bright"
可选
关于样式表的任意属性信息,但不对渲染过程产生影响。这些属性应该添加前缀以避免冲突,例如 'mapbox:'。
地图默认的中心经度和纬度。这个中心点只有在地图没有被其他方法定位时(例如地图设置或用户交互)才生效。
"center":[-73.9749,40.7736]
默认缩放级别。这个缩放级别只有在地图没有被其他方法定位时(例如地图设置或用户交互)才生效。
"zoom":12.5
可选 number. 单位为 degrees. 默认为 0.
默认方位角,沿顺时针偏离真北方向的夹角。这个方位角只有在地图没有被其他方法定位时(例如地图设置或用户交互)才生效。
"bearing":29
可选 number. 单位为 degrees. 默认为 0.
默认倾斜角度。0 代表垂直于地面,即垂直俯视地图,更大的值例如 60 可以眺望到地平线。这个倾斜角度只有在地图没有被其他方法定位时(例如地图设置或用户交互)才生效。
"pitch":50
数据源说明。
"sources":{"mapbox-streets":{"type":"vector","url":"mapbox://mapbox.mapbox-streets-v6"}}
获取雪碧图及其元数据的基础 URL。扩展名后缀 .png、.json、以及缩放因子 @2x.png 会被自动添加。当有图层使用了 background-pattern、fill-pattern、line-pattern、或icon-image 属性时,此属性必须设置。
"sprite":"mapbox://sprites/mapbox/bright-v8"
获取以有向距离场编码的 PBF 字形文件的 URL 模板。URL 必须包含 {fontstack} 和 {range} 占位符。当有图层使用了 text-field 布局属性时,此属性必须设置。
"glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf"
全局的过渡动画属性,用来作为各种属性变化时的默认设置。
"transition":{"duration":300,"delay":0}
图层将按照此数组依次绘制。
"layers":[{"id":"water","source":"mapbox-streets","source-layer":"water","type":"fill","paint":{"fill-color":"#00ffff"}}]
数据源提供地图显示的数据。数据源的类型通过 "type" 属性指定,并且必须是 vector, raster, geojson, image, video 其中之一。仅添加数据源并不会立即显示在地图上,因为缺少样式信息如颜色或线宽。通过图层引用数据源将其显示出来。可以对同一数据源采用多种方式渲染,例如在高速路图层中对不同的等级的公路进行分别渲染以示区分。
瓦片数据源(矢量和栅格)必须按照 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}
提供一个指向 TileJOSN 文件的 "url":
"mapbox-streets":{"type":"vector","url":"http://api.example.com/tilejson.json"}
提供一个 url 指向支持EPSG:3857(或 EPSG:900913)坐标的 WMS 地图服务,作为瓦片的数据源。 服务的 url 应该包含一个 "{bbox-epsg-3857}" 替换符,用以提供 bbox 参数。 (此项功能目前仅支持 Mapbox GL JS 和 Mapbox macOS SDK。)
"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}
矢量瓦片数据源。瓦片必须是 Mapbox Vector Tile 格式。瓦片中所有的几何坐标必须在 -1 * extent 和 (extent * 2) - 1 之间(包括界限值)。所有引用矢量数据源的图层必须指定 "source-layer" 属性。 对于 Mapbox 托管的矢量瓦片,"url" 的形式为 mapbox://mapid。
"mapbox-streets":{"type":"vector","url":"mapbox://mapbox.mapbox-streets-v6"}
指向 TileJSON 的 URL。支持的协议有 http:、https:、 以及 mapbox://。
包含一个或多个瓦片数据源的 URL,见 TileJSON 规范
可选 number. 默认为 0.
瓦片源的最小缩放级别,见 TileJSON 规范。
可选 number. 默认为 22.
瓦片源的最大缩放级别,见 TileJSON 规范。当显示更高缩放级别的地图时,会使用此级别的数据。
SDK 支持
Mapbox GL JS
iOS SDK
Android SDK
基本功能
>= 0.10.0
>= 2.0.0
>= 2.0.1
对于 Mapbox 托管的矢量瓦片,"url" 的形式为 mapbox://mapid。
"mapbox-satellite":{"type":"raster","url":"mapbox://mapbox.satellite","tileSize":256}
指向 TileJSON 的 URL。支持的协议有 http:、https:、 以及 mapbox://。
包含一个或多个瓦片数据源的 URL,见 TileJSON 规范
可选 number. 默认为 0.
瓦片源的最小缩放级别,见 TileJSON 规范。
可选 number. 默认为 22.
瓦片源的最大缩放级别,见 TileJSON 规范。当显示更高缩放级别的地图时,会使用此级别的数据。
可选 number. 单位为 pixels. 默认为 512.
图层中显示瓦片的最小尺寸。仅对栅格图层有效。
SDK 支持
Mapbox GL JS
iOS SDK
Android SDK
基本功能
>= 0.10.0
>= 2.0.0
>= 2.0.1
GeoJSON 数据源。数据源必须指定 "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"}}}
以下示例是一个通过 URL 方式指向一个外部 GeoJSON 文件的 GeoJSON 数据源。GeoJSON 文件必须在同一域上或者可通过 CORS 方式访问到。
"geojson-lines":{"type":"geojson","data":"./lines.geojson"}
可选
链接到 GeoJSON 文件的 URL,或者内联的 GeoJSON。
可选 number. 默认为 18.
生成矢量瓦片的最大缩放级别(值越大详细程度越高)。
可选 number. 默认为 128.
瓦片边界上的缓冲区大小。0 表示无缓冲区。512 表示缓冲区与瓦片本身一样宽。值越大在瓦片边缘上生成的符号冲突越少,但是意味着性能降低。
可选 number. 默认为 0.375.
Douglas-Peucker 化简容差(值越大,几何要素化简程度越高,渲染性能也更好)。
可选 boolean. 默认为 false.
如果数据是点数据集,设置 true 将会按照聚类半径进行聚类。
可选 number. 默认为 50.
聚类半径。512 表示聚类半径等于瓦片宽度。
点进行聚类的最大缩放级别。默认为 maxzoom - 1(为了确保在最大缩放级别下要素不被聚类)。
SDK 支持
Mapbox GL JS
iOS SDK
Android SDK
基础功能
>= 0.10.0
>= 2.0.0
>= 2.0.1
聚类
>= 0.14.0
暂不支持
暂不支持
图片数据源。"url" 包含了图片文件的位置。
"coordinates" 数组包含图片四角的 [经度, 纬度] 坐标对,以顺时针方向排列:左上角、右上角、右下角、左下角。
"image":{"type":"image","url":"/mapbox-gl-js/assets/radar.gif","coordinates":[[-80.425,46.437],[-71.516,46.437],[-71.516,37.936],[-80.425,37.936]]}
指向图片的 URL。
SDK 支持
Mapbox GL JS
iOS SDK
Android SDK
基础功能
>= 0.10.0
视频数据源。"urls" 的值是一个数组。对于数组中的每一个 URL,将会生成一个 video 元素的 源,以满足不同浏览器对视频格式的要求。
"coordinates" 数组包含视频四角的 [经度, 纬度] 坐标对,以顺时针方向排列:左上角、右上角、右下角、左下角。
"video":{"type":"video","urls":["https://www.mapbox.com/drone/video/drone.mp4","https://www.mapbox.com/drone/video/drone.webm"],"coordinates":[[-122.51596391201019,37.56238816766053],[-122.51467645168304,37.56410183312965],[-122.51309394836426,37.563391708549425],[-122.51423120498657,37.56161849366671]]}
指向视频内容的URL,按照格式优先级排列。
SDK 支持
Mapbox GL JS
iOS SDK
Android SDK
基础功能
>= 0.10.0
样式中的 sprite 属性需提供一个 URL 模板,用于获取在background-pattern、fill-pattern、line-pattern、和 icon-image 属性中使用的小图标。
"sprite":"mapbox://sprites/mapbox/bright-v8"
一个有效的雪碧图源必须包含两种文件:
索引文件,即一个 JSON 文件包含对雪碧图中的每个图标的描述信息。文件的内容必须是一个 JSON 对象,其中 key 作为标识符,被以上四个样式属性所使用;value 是一个对象,用来描述图标的尺寸(width 和 height 属性)、像素比例(pixelRatio)、以及在雪碧图中的位置(x 和 y)。例如,只包含一个图标的雪碧图的索引文件内容如下:
{"poi":{"width":32,"height":32,"x":0,"y":0,"pixelRatio":1}}
然后样式文件可以通过创建一个设置了"icon-image": "poi"的符号图层来引用雪碧图中的图标,或者使用 "icon-image": "{icon}" 替换符的方式,符号化 icon 字段的值为 poi 的矢量瓦片要素。
图片文件, 包含雪碧图数据的 PNG 图片。
Mapbox SDK 将会根据样式中的 sprite 属性值,生成获取这两种文件的 URL。首先,对于这两种文件,在高分屏设备上都会在 URL 上追加 @2x。其次,会对索引文件添加 .json 文件后缀,对图片文件添加 .png 文件后缀。例如,如果你指定 "sprite": "https://example.com/sprite",渲染是将会载入 https://example.com/sprite.json 和 https://example.com/sprite.png,或者 https://example.co