Mapbox-GL样式参考
{
"version": 8,
"sprite": "mapbox://sprites/mapbox/bright-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {
"mapbox-streets": {
"type": "vector",
"url": "mapbox://mapbox.mapbox-streets-v5"
}
},phenomenon
"layers": [
hall是什么意思
{
"id": "water",
"source": "mapbox-streets",
"source-layer": "water",
"type": "fill",
"paint": {
"fill-color": "#00ffff"
}
}
],
"transition": {
"duration": 300,
"delay": 0
}
}
⼀、sprite
Sprite属性提供了⼀个符号集，可以⽤于各种要素的渲染，包括background-pattern, fill-pattern, line-pattern, 和icon-image。sprite 包含两个⽂件：
索引⽂件，json格式，描述每个单独符号的名称、⼤⼩、位置。例如⼀下描述了⼀个名为poi的符号：
{
"poi": {
"width": 32,
"height": 32,
"x": 0,
"y": 0,
"pixelRatio": 1
}
}
图像⽂件，⼀般png格式，包含符号的集合。
当指定⼀个sprite url以后，mapboxgl会⾃动在对应位置下载对应的json和png⽂件。
⼆、Sources
Sources属性提供地图数据，数据的格式由“type”指定，⽬前⽀持vector、raster、geojson、video四种，⽡⽚数据（⽮量⽡⽚和栅格⽡⽚）必须指定对应的TileJSON⽂件，并在中指定数据详情，有两种⽅式指定：
直接在属性中通过”tiles”,”minzoom”,”maxzoom”指定。
"mapbox-streets": {
"type": "vector",
"tiles": [
/tiles/{z}/{x}/{y}.pbf",
"/tiles/{z}/{x}/{y}.pbf"巴拿马运河扩建
],
"maxzoom": 14
}
指定⼀个TileJSON的url。
"mapbox-streets": {
"type": "vector",
"url": "/tilejson.json"
}
1. vector
⽮量⽡⽚数据源，必须为
"mapbox-streets": {
"type": "vector",
"url": "mapbox://mapbox.mapbox-streets-v5"
}
1. raster
栅格⽡⽚数据源。
"mapbox-satellite": {
"type": "raster",
"url": "mapbox://mapbox.satellite",
"tileSize": 256
}
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"
}
}
}
regardless
1. video
视频数据源，url是⼀个字符串数组，为了保证不同浏览器的兼容性，每个url都会创建⼀个视频元素的数据源。
"video": {
"type": "video",
"url": [
"/drone/video/drone.mp4",
"/drone/video/drone.webm"
],
"coordinates": [
[37.56238816766053, -122.51596391201019],
[37.56410183312965, -122.51467645168304],
[37.563391708549425, -122.51309394836426],
[37.56161849366671, -122.51423120498657]
]
}
三、Layers
Layers的每个style layer都必须制定⼀个”type”属性，”type”属性的取值包括background, fill, line, symbol, raster，每个层有两种属性指定那些数据应该怎样渲染，分别是”layout”属性和”paint”属性。
layout属性会先于paint属性被处理，其定义了该层应该怎样传到GPU，某⼀层可以通过”ref”属性共享其它层layout。并且这是推荐的做法，因为这样可以减少处理时间，并且节省GPU存储空间。
两个参考其他层的layout属性的层可以有相互独⽴的paint属性。每个层的paint属性还能指定⼀个或多个class。
1.
2.
3.
4.
5.
四、Values（样式表中⽤到的数据类型）
① 可⽀持多种颜⾊指定⽅式
{
"line-color": "#ff0",
"line-color": "#ffff00",
"line-color": "rgb(255, 255, 0)",
"line-color": "rgba(255, 255, 0, 1)",
"line-color": "hsl(100, 50%, 50%)",
"line-color": "hsla(100, 50%, 50%, 1)",
"line-color": "yellow"
}
② Enum
内部已定义好的字符串值
{
"text-transform": "upperca"
}
③ Stringconvince
String对象可以为任何字符串，⼀般来说就是⽂本，并可通过{}指定⽮量⽡⽚的某⼀个字段。
{
hop
"text-field": "{MY_FIELD}"
}mrs是什么意思
④ Boolean
布尔值，true或者fal
{
"fill-enabled": true
}
⑤ Number
数值，不需要引号，整数浮点数均可
{
"text-size": 24
}
⑥ Array
数组，例如当需要绘制虚线时需要制定虚线间隔，以下代码表⽰绘制2px，间隔4px。
{
"line-dasharray": [2, 4]
}
⑦ Function
所有layout属性和paint属性的值都可以通过函数指定，允许根据地图当前级别动态计算对应的值。函数通过⼀组stops数组给出，每个元素包含⼀个两元素的数组：⼀个zoom，⼀个value。stops中zoom级别必须是从⼩到⼤。
⼀些属性⽀持插值函数，插值函数的结果是相邻两个stop之间的内插值。默认情况下为线性插值，也可以通过”ba”属性指定插值指数的基底。如果当前地图级别⼩于第⼀个级别或者⼤于最后⼀个级别，将会取临界值。
对于不⽀持插值函数的属性，将会取⼩于当前级别并与之最接近的stop。
{
"line-width": {
"ba": 1.5,
"stops": [[5, 1], [7, 2], [11, 3]]
}
}
⑧ Filter
表⽰过滤条件，根据指定条件选出指定的要素，是⼀个数组，主要有以下⼏种形式。
["==", key, value] 等于: key = value
["!=", key, value] 不等于: key ≠ value
flip
[">", key, value] ⼤于: key > value
[">=", key, value] ⼤于等于: key ≥ value
["<", key, value] ⼩于: key < value
["<=", key, value] ⼩于等于: key ≤ value
["in", key, v0, ..., vn] 包含关系: key ∈ {v0, ..., vn}
["!in", key, v0, ..., vn] 不包含关系: key ∉ {v0, ..., vn}
["all", f0, ..., fn] 逻辑与: f0 ∧...∧ fn
["any", f0, ..., fn] 逻辑或: f0 ∨...∨ fn
["none", f0, ..., fn] 逻辑⾮: ¬f0 ∧...∧ ¬fn
["==", "$type", "LineString"]
["in", "class", "street_major", "street_minor", "street_limited"]
[
"all",
["==", "class", "street_limited"],
[">=", "admin_level", 3],
["!in", "$type", "Polygon"]
]
