基于Mapbox的地图样式规范

偏执的太偏执、 2021-09-21 15:18 518阅读 0赞

# Mapbox 地图样式规范 #

关于Mapbox更多开发信息，可以直接访问**[Mapbox中文官网][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": [...]
    }

**version**

*必选 enum.*

样式规范版本号。 必须为 8。

"version": 8

**name**

*可选 string.*

样式名称.

"name": "Bright"

**metadata**

*可选*

关于样式表的任意属性信息，但不对渲染过程产生影响。这些属性应该添加前缀以避免冲突，例如 'mapbox:'。

**center**

*可选 array.*

地图默认的中心经度和纬度。这个中心点只有在地图没有被其他方法定位时（例如地图设置或用户交互）才生效。

"center": [
      -73.9749,
      40.7736
    ]

**zoom**

*可选 number.*

默认缩放级别。这个缩放级别只有在地图没有被其他方法定位时（例如地图设置或用户交互）才生效。

"zoom": 12.5

**bearing**

*可选 number.* *单位为* degrees. *默认为 *0.

默认方位角，沿顺时针偏离真北方向的夹角。这个方位角只有在地图没有被其他方法定位时（例如地图设置或用户交互）才生效。

"bearing": 29

**pitch**

*可选 number.* *单位为* degrees. *默认为 *0.

默认倾斜角度。0 代表垂直于地面，即垂直俯视地图，更大的值例如 60 可以眺望到地平线。这个倾斜角度只有在地图没有被其他方法定位时（例如地图设置或用户交互）才生效。

"pitch": 50

**light**

*可选*

**sources**

*必选 *sources

数据源说明。

"sources": {
      "mapbox-streets": {
        "type": "vector",
        "url": "mapbox://mapbox.mapbox-streets-v6"
      }
    }

**sprite**

*可选 string.*

获取雪碧图及其元数据的基础 URL。扩展名后缀 `.png`、`.json`、以及缩放因子 `@2x.png` 会被自动添加。当有图层使用了 `background-pattern`、`fill-pattern`、`line-pattern`、或`icon-image` 属性时，此属性必须设置。

"sprite": "mapbox://sprites/mapbox/bright-v8"

**glyphs**

*可选 string.*

获取以有向距离场编码的 PBF 字形文件的 URL 模板。URL 必须包含 `{fontstack}` 和 `{range}` 占位符。当有图层使用了 `text-field` 布局属性时，此属性必须设置。

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

**transition**

*可选 *transition*.*

全局的过渡动画属性，用来作为各种属性变化时的默认设置。

"transition": {
      "duration": 300,
      "delay": 0
    }

**layers**

*必选 array.*

图层将按照此数组依次绘制。

"layers": [
      {
        "id": "water",
        "source": "mapbox-streets",
        "source-layer": "water",
        "type": "fill",
        "paint": {
          "fill-color": "#00ffff"
        }
      }
    ]

## 数据源 ##

数据源提供地图显示的数据。数据源的类型通过 `"type"` 属性指定，并且必须是 vector, raster, geojson, image, video 其中之一。仅添加数据源并不会立即显示在地图上，因为缺少样式信息如颜色或线宽。通过图层引用数据源将其显示出来。可以对同一数据源采用多种方式渲染，例如在高速路图层中对不同的等级的公路进行分别渲染以示区分。

瓦片数据源（矢量和栅格）必须按照 [TileJSON 规范][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
        }

### vector ###

矢量瓦片数据源。瓦片必须是 [Mapbox Vector Tile 格式][Mapbox Vector Tile]。瓦片中所有的几何坐标必须在 `-1 * extent` 和 `(extent * 2) - 1` 之间（包括界限值）。所有引用矢量数据源的图层必须指定 `"source-layer"` 属性。 对于 Mapbox 托管的矢量瓦片，`"url"` 的形式为 `mapbox://mapid`。

"mapbox-streets": {
      "type": "vector",
      "url": "mapbox://mapbox.mapbox-streets-v6"
    }

**url**

*可选 string.*

指向 TileJSON 的 URL。支持的协议有 `http:`、`https:`、 以及 `mapbox://<mapid>`。

**tiles**

*可选 array.*

包含一个或多个瓦片数据源的 URL，见 TileJSON 规范

**minzoom**

*可选 number.* *默认为 *0.

瓦片源的最小缩放级别，见 TileJSON 规范。

**maxzoom**

*可选 number.* *默认为 *22.

瓦片源的最大缩放级别，见 TileJSON 规范。当显示更高缩放级别的地图时，会使用此级别的数据。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基本功能</td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
 </tbody> 
</table>

### raster ###

对于 Mapbox 托管的矢量瓦片，`"url"` 的形式为 `mapbox://mapid`。

"mapbox-satellite": {
      "type": "raster",
      "url": "mapbox://mapbox.satellite",
      "tileSize": 256
    }

**url**

*可选 string.*

指向 TileJSON 的 URL。支持的协议有 `http:`、`https:`、 以及 `mapbox://<mapid>`。

**tiles**

*可选 array.*

包含一个或多个瓦片数据源的 URL，见 TileJSON 规范

**minzoom**

*可选 number.* *默认为 *0.

瓦片源的最小缩放级别，见 TileJSON 规范。

**maxzoom**

*可选 number.* *默认为 *22.

瓦片源的最大缩放级别，见 TileJSON 规范。当显示更高缩放级别的地图时，会使用此级别的数据。

**tileSize**

*可选 number.* *单位为* pixels. *默认为 *512.

图层中显示瓦片的最小尺寸。仅对栅格图层有效。

### geojson ###

[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"
    }

**data**

*可选*

链接到 GeoJSON 文件的 URL，或者内联的 GeoJSON。

**maxzoom**

*可选 number.* *默认为 *18.

生成矢量瓦片的最大缩放级别（值越大详细程度越高）。

**buffer**

*可选 number.* *默认为 *128.

瓦片边界上的缓冲区大小。0 表示无缓冲区。512 表示缓冲区与瓦片本身一样宽。值越大在瓦片边缘上生成的符号冲突越少，但是意味着性能降低。

**tolerance**

*可选 number.* *默认为 *0.375.

Douglas-Peucker 化简容差（值越大，几何要素化简程度越高，渲染性能也更好）。

**cluster**

*可选 boolean.* *默认为 *false.

如果数据是点数据集，设置 true 将会按照聚类半径进行聚类。

**clusterRadius**

*可选 number.* *默认为 *50.

聚类半径。512 表示聚类半径等于瓦片宽度。

**clusterMaxZoom**

*可选 number.*

点进行聚类的最大缩放级别。默认为 maxzoom - 1（为了确保在最大缩放级别下要素不被聚类）。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基础功能</td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td>聚类</td> 
   <td>&gt;= 0.14.0</td> 
   <td>暂不支持</td> 
   <td>暂不支持</td> 
  </tr> 
 </tbody> 
</table>

### image ###

图片数据源。`"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**

*必选 string.*

指向图片的 URL。

**coordinates**

*必选 array.*

图片的四角的经纬度坐标。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基础功能</td> 
   <td>&gt;= 0.10.0</td> 
   <td>暂不支持</td> 
   <td>暂不支持</td> 
  </tr> 
 </tbody> 
</table>

### video ###

视频数据源。`"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]
      ]
    }

**urls**

*必选 array.*

指向视频内容的URL，按照格式优先级排列。

**coordinates**

*必选 array.*

视频的四角的经纬度坐标。

## Sprite ##

样式中的 `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.com/sprite@2x.json` 和 `https://example.com/sprite@2x.png`。

如果您正在使用 Mapbox Studio，Mapbox 会提供预生成好的雪碧图，同时也可以上传自定义的 SVG 图像来生成您自己的雪碧图。无论哪种方式，雪碧图都会自动构建并且可用通过 Mapbox API 获取到。如果您想手动生成雪碧图并放到自己的服务器上，您可以使用 [spritezero-cli][]，这个命令行工具可以从 SVG 文件夹中生成兼容 Mapbox GL 的雪碧图片和索引文件。

## [Glyphs][] ##

样式的 `glyphs` 属性提供一个获取 PBF 格式的有向距离场字型文件的 URL 模板。

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

## [Transition][Glyphs] ##

样式的 `transition` 属性提供一个全局的过渡设置。

"transition": {
      "duration": 300,
      "delay": 0
    }

[duration][Glyphs]

*可选 [number][Glyphs].* *单位为* milliseconds. *默认为 *300.

过渡动画的持续时间。

[delay][Glyphs]

*可选 [number][Glyphs].* *单位为* milliseconds. *默认为 *0.

过渡动画延迟开始的时间。

## [Layers][Glyphs] ##

样式的 `layers` 属性罗列出所有的样式图层。图层的类型通过 `"type"` 属性指定，并且必须是 background, fill, line, symbol, raster, circle 其中之一。

除了 background 图层，其他图层均需要引用一个数据源。图层从数据源中获取数据、过滤数据、以及定义要素符号化的方法。

[id][Glyphs]

*必选 [string][Glyphs].*

全局唯一的图层名称。

[type][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* fill, line, symbol, circle, raster, background.

图层的渲染类型。

fill

可填充的多边形，可带描边。

line

绘制线。

symbol

图标或者文本标注。

circle

可填充的圆。

raster

栅格地图例如卫星影像。

background

地图的背景色或者填充图案。

[metadata][Glyphs]

*可选*

关于图层的任意属性信息，但不对渲染过程产生影响。这些属性应该添加前缀以避免冲突，例如 'mapbox:'。

[ref][Glyphs]

*可选 [string][Glyphs].*

引用其他图层的 `type`、`source`、`source-layer`、`minzoom`、`maxzoom`、`filter`、以及 `layout` 属性。此属性可让图层共享处理过程，提高效率。

[source][Glyphs]

*可选 [string][Glyphs].*

图层的数据源。

[source-layer][Glyphs]

*可选 [string][Glyphs].*

矢量瓦片数据源的图层。当数据源支持多个图层时，此属性是必需的。

[minzoom][Glyphs]

*可选 [number][Glyphs].*

图层进行解析并显示的最小缩放级别。

[maxzoom][Glyphs]

*可选 [number][Glyphs].*

图层进行解析并显示的最大缩放级别。

[interactive][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false.

允许从此图层上查询要素数据，用于交互。

[filter][Glyphs]

*可选 [filter][Glyphs].*

指明数据源上要素的过滤条件的表达式。只有符合过滤条件的要素才被显示。

[layout][Glyphs]

*可选 [layout][Glyphs].*

图层的布局属性。

[paint][Glyphs]

*可选 [paint][Glyphs].*

图层的默认绘制属性。

[paint.\*][Glyphs]

*可选 [paint][Glyphs].*

特定类别的绘制属性。第一个点后面的部分即为类别名。

图层有两个子属性用来确定图层中的数据如何被渲染：`layout` 和 `paint` 属性.

*Layout 属性* 出现在图层的 `"layout"` 对象中。它将被应用于渲染过程的早期阶段，定义了图层的数据如何传输到 GPU。为了提升效率，其他图层可以通过 `"ref"` 属性来共享此图层的 layout 属性，应当尽可能地使用此功能。这将会减少处理时间，并允许图层间共享 GPU 内存和其他资源。

*Paint 属性* 被应用于渲染过程的后期阶段。一个共享其他图层 layout 属性的图层可以设置不同的 paint 属性。Paint 属性出现在图层的 `"paint"` 对象中。图层可以设置特定类别的 paint 属性，根据地图设置的类名称进行调用。例如，图层的 `"paint.night"` 属性将会在地图设置了 `"night"` 类名时生效。

Key: [支持插值函数][Glyphs] [支持阶梯函数][Glyphs] 支持过渡

### [background][Glyphs] ###

[Layout 属性][Glyphs]

[visibility][Glyphs]

*可选 [enum][].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[background-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000. *设置* background-pattern *后无效*.

背景色。

[background-pattern][Glyphs]

*可选 [string][Glyphs].*

在雪碧图中的图标名称，用来绘制背景图案。为了无缝填充，图案的宽和高必须是 2 的整数倍如 (2, 4, 8, ..., 512)。

[background-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

背景色的不透明度。

### [fill][Glyphs] ###

[Layout 属性][Glyphs]

[visibility][Glyphs]

*可选 [enum][].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[fill-antialias][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *true.

多边形填充是否需要反锯齿。

[fill-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

多边形填充的不透明度。与 `fill-color` 不同的是，当有描边时，这个值也会影响到多边形填充作为 1px 的描边。对于一个凸出的填充图层，不透明度将以图层为单位而不是以要素为单位生效（也因此将不会支持字段函数）。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.21.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[fill-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000. *设置* fill-pattern *后无效*.

此图层填充部分的颜色。该颜色可以用包括 alpha 通道的 `rgba` 方式指定，并且颜色的不透明度将不会影响到周围 1 px的描边。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.19.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[fill-outline-color][Glyphs]

*可选 [color][Glyphs].* *设置* fill-pattern *后无效*. *需要* fill-antialias = true.

多边形填充的轮廓颜色。如果未指定，与 `fill-color` 一致。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.19.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[fill-translate][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0.

几何要素的偏移量。以 \[x, y\] 形式设置，负值表示向左和上偏移。

[fill-translate-anchor][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport. *默认为 *map. *需要* fill-translate.

控制偏移的参考点。

map

相对于地图偏移。

viewport

相对于视窗偏移。

[fill-pattern][Glyphs]

*可选 [string][Glyphs].*

在雪碧图中的图标名称，用来对多边形进行图案填充。为了无缝填充，图案的宽和高必须是 2 的整数倍如 (2, 4, 8, ..., 512)。

[fill-extrude-height][Glyphs]

*可选 [number][Glyphs].* *默认为 *0.

凸出此多边形图层的高度值。

[fill-extrude-base][Glyphs]

*可选 [number][Glyphs].* *默认为 *0. *必须小于等于* fill-extrude-height.

凸出此图层基底的高度值。

### [line][Glyphs] ###

[Layout 属性][Glyphs]

[line-cap][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* butt, round, square. *默认为 *butt.

线末端的显示样式。

butt

方型末端，仅绘制到直线端点。

round

圆型末端，以线宽的 1/2 为半径，以线端点为圆心，超出线端点绘制。

square

方型末端，以线宽的 1/2 长度超出线端点绘制。

[line-join][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* bevel, round, miter. *默认为 *miter.

线交叉时的显示样式。

bevel

方型交点，以线宽的 1/2 长度超出交点绘制。

round

圆型交点，以线宽的 1/2 为半径，以交点为圆心绘制，超出交点绘制。

miter

尖型交角，以两线段外沿相交，超出交点绘制。

[line-miter-limit][Glyphs]

*可选 [number][Glyphs].* *默认为 *2. *需要* line-join = miter.

用来将锐利的尖型交角自动地转换为方型交角。

[line-round-limit][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.05. *需要* line-join = round.

用来将平浅的圆型交角自动地转换为尖型交角。

[visibility][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[line-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

绘制线的不透明度。

[line-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000. *设置* line-pattern *后无效*.

绘制线的颜色。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.23.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[line-translate][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0.

几何要素的偏移量。以 \[x, y\] 形式设置，负值表示向左和上偏移。

[line-translate-anchor][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport. *默认为 *map. *需要* line-translate.

控制偏移的参考点。

map

相对于地图偏移。

viewport

相对于视窗偏移。

[line-width][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *1.

Stroke thickness.

[line-gap-width][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0.

在线的实际路径外部绘制线套。设置的值表示内间距。

[line-offset][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0.

线的偏移。对于线状要素，正值表示相对于线走向的右边偏移。对于多边形要素，正值表示内缩（inset），负值表示外突（outset）。

[line-blur][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0.

线虚化的像素值。

[line-dasharray][Glyphs]

*可选 [array][Glyphs].* *单位为* line widths. *设置* line-pattern *后无效*.

指定生成虚线的实部和虚部长度。设置的长度会随着线宽进行缩放。将长度乘以当前线宽即为虚线的实际像素数。

[line-pattern][Glyphs]

*可选 [string][Glyphs].*

在雪碧图中的图标名称，用来对线进行图案填充。为了无缝填充，图案的宽和高必须是 2 的整数倍如 (2, 4, 8, ..., 512)。

### [symbol][Glyphs] ###

[Layout 属性][Glyphs]

[symbol-placement][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* point, line. *默认为 *point.

注记相对于几何要素的位置。

point

标注在几何要素的点位上。

line

标注在几何要素的边线上。只能用在 `LineString` 和 `Polygon` 要素上

[symbol-spacing][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *250. *需要* symbol-placement = line.

两个注记锚点之间的距离。

[symbol-avoid-edges][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false.

设置为 true 时，注记不会跨瓦片边缘，以避免相互冲突。当图层的矢量瓦片没有足够的缓冲区以避免冲突，或者一个点注记图层在一个线注记图层之上时，推荐开启此设置。

[icon-allow-overlap][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* icon-image.

设置为 true 时，图标符号即使碰撞到其他绘制的注记也会显示。

[icon-ignore-placement][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* icon-image.

设置为 true 时，其他注记即使碰撞到此图标符号也会显示。

[icon-optional][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* icon-image. *需要* text-field.

设置为 true 时，当此注记的图标与其他注记碰撞而文本未碰撞时，仅显示此注记的文本而不显示图标。

[icon-rotation-alignment][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport, auto. *默认为 *auto. *需要* icon-image.

与 `symbol-placement` 组合使用，决定旋转时图标的行为。

map

当 `symbol-placement` 设置为 `point` 时，将图标与东西方向对齐。当 `symbol-placement` 设置为 `line` 时，将图标的 x 轴与线对齐。

viewport

将图标的 x 轴与视窗的 x 轴对齐，无论 `symbol-placement` 设置为哪个值。

auto

当 `symbol-placement` 设置为 `point` 时，与 `viewport` 行为一致。当 `symbol-placement` 设置为 `line` 时，与 `map` 行为一致。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p><code>auto</code>&nbsp;value</p> </td> 
   <td>不支持</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[icon-size][Glyphs]

*可选 [number][Glyphs].* *默认为 *1. *需要* icon-image.

图标的缩放因子。1 表示原始大小，3 表示三倍大小。

[icon-text-fit][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* none, width, height, both. *默认为 *none. *需要* icon-image. *需要* text-field.

缩放图标以与文本相匹配。

none

图标按其本身的比例进行显示。

width

图标在 x 轴进行缩放以匹配文本的宽度。

height

图标在 y 轴进行缩放以匹配文本的高度。

both

图标在 x 轴与 y 轴都进行缩放。

[icon-text-fit-padding][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0,0,0. *需要* icon-image. *需要* text-field. *需要* icon-text-fit = one of both, width, height.

根据 `icon-text-fit` 确定的图标尺寸添加额外的间隔，以上-右-下-左的顺时针顺序设置。

[icon-image][Glyphs]

*可选 [string][Glyphs].*

替换 \{tokens\} 的字符串，引用拉取的图标资源。

[icon-rotate][Glyphs]

*可选 [number][Glyphs].* *单位为* degrees. *默认为 *0. *需要* icon-image.

按顺时针方向旋转图标。

[icon-padding][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *2. *需要* icon-image.

包围在图标 bbox 外的额外空间，用以检测注记碰撞。

[icon-keep-upright][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* icon-image. *需要* icon-rotation-alignment = map. *需要* symbol-placement = line.

如果设置为 true，图标可以被翻转以避免图标上下颠倒。

[icon-offset][Glyphs]

*可选 [array][Glyphs].* *默认为 *0,0. *需要* icon-image.

图标与其锚点的偏移量。正值表示向右和下偏移，负值表示向左和上偏移。

[text-pitch-alignment][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport, auto. *默认为 *auto. *需要* text-field.

当地图倾斜时文本的方向。

map

文本与地图平面对齐。

viewport

文本与视窗平面对齐。

auto

自动地与 `text-rotation-alignment` 设置相匹配。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.21.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p><code>auto</code>&nbsp;value</p> </td> 
   <td>不支持</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[text-rotation-alignment][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport, auto. *默认为 *auto. *需要* text-field.

与 `symbol-placement` 结合使用，确定构成文本的单个字型的旋转行为。

map

当 `symbol-placement` 设置为 `point` 时，将文本与东西方向对齐。当 `symbol-placement` 设置为 `line` 时，将文本的 x 轴与线对齐。

viewport

将字型的 x 轴与视窗的 x 轴对齐，无论 `symbol-placement` 设置为哪个值。

auto

当 `symbol-placement` 设置为 `point` 时，与 `viewport` 行为一致。当 `symbol-placement` 设置为 `line` 时，与 `map` 行为一致。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p><code>auto</code>&nbsp;value</p> </td> 
   <td>不支持</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[text-field][Glyphs]

*可选 [string][Glyphs].*

用来作为文本标注的字段。用 \{field\_name\} 指示使用要素的哪个字段。

[text-font][Glyphs]

*可选 [array][Glyphs].* *默认为 *Open Sans Regular,Arial Unicode MS Regular. *需要* text-field.

显示文本的字栈。

[text-size][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *16. *需要* text-field.

字体大小

[text-max-width][Glyphs]

*可选 [number][Glyphs].* *单位为* ems. *默认为 *10. *需要* text-field.

文本折行的最大行度。

[text-line-height][Glyphs]

*可选 [number][Glyphs].* *单位为* ems. *默认为 *1.2. *需要* text-field.

多行文本的行高。

[text-letter-spacing][Glyphs]

*可选 [number][Glyphs].* *单位为* ems. *默认为 *0. *需要* text-field.

字符间距。

[text-justify][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* left, center, right. *默认为 *center. *需要* text-field.

文本对齐选项。

left

文本左对齐。

center

文本居中。

right

文本右对齐。

[text-anchor][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* center, left, right, top, bottom, top-left, top-right, bottom-left, bottom-right. *默认为 *center. *需要* text-field.

文本停靠到锚点的部分。

center

文本中心停靠到锚点。

left

文本左边停靠到锚点。

right

文本右边停靠到锚点。

top

文本顶部停靠到锚点。

bottom

文本底部停靠到锚点。

top-left

文本的左上角停靠到锚点。

top-right

文本的右上角停靠到锚点。

bottom-left

文本的左下角停靠到锚点。

bottom-right

文本的右下角停靠到锚点。

[text-max-angle][Glyphs]

*可选 [number][Glyphs].* *单位为* degrees. *默认为 *45. *需要* text-field. *需要* symbol-placement = line.

相邻字符的最大夹角。

[text-rotate][Glyphs]

*可选 [number][Glyphs].* *单位为* degrees. *默认为 *0. *需要* text-field.

顺时针旋转文本的角度。

[text-padding][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *2. *需要* text-field.

文本框四周的额外空间，用以检测注记碰撞。

[text-keep-upright][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *true. *需要* text-field. *需要* text-rotation-alignment = map. *需要* symbol-placement = line.

如果设置为 true，文本可以被翻转以避免图标上下颠倒。

[text-transform][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* none, uppercase, lowercase. *默认为 *none. *需要* text-field.

设置文本的大小写，类似于 CSS 的 `text-transform` 属性。

none

文本保持不变。

uppercase

强制使所有的字符大写。

lowercase

强制使所有的字符小写。

[text-offset][Glyphs]

*可选 [array][Glyphs].* *单位为* ems. *默认为 *0,0. *需要* text-field.

文本与其锚点的偏移量。正值表示向右和下偏移，负值表示向左和上偏移。

[text-allow-overlap][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* text-field.

设置为 true 时，文本标注即使碰撞到其他绘制的注记也会显示。

[text-ignore-placement][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* text-field.

设置为 true 时，其他注记即使碰撞到此文本标注也会显示。

[text-optional][Glyphs]

*可选 [boolean][Glyphs].* *默认为 *false. *需要* text-field. *需要* icon-image.

设置为 true 时，当此文本注记与其他注记碰撞而图标未碰撞时，仅显示此注记的图标而不显示文本。

[visibility][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[icon-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1. *需要* icon-image.

绘制图标的不透明度。

[icon-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000. *需要* icon-image.

图标的颜色。仅对 sdf 格式的图标有效。

[icon-halo-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *rgba(0, 0, 0, 0). *需要* icon-image.

图标的光晕颜色。仅对 sdf 格式的图标有效。

[icon-halo-width][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0. *需要* icon-image.

光晕到图标轮廓的距离。

[icon-halo-blur][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0. *需要* icon-image.

光晕向外渐变的宽度。

[icon-translate][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0. *需要* icon-image.

图标锚点偏离原始位置的距离。正数表示向右和下偏移，负数表示向左和上偏移。

[icon-translate-anchor][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport. *默认为 *map. *需要* icon-image. *需要* icon-translate.

控制偏移的参考点。

map

相对于地图偏移。

viewport

相对于视窗偏移。

[text-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1. *需要* text-field.

绘制文本的不透明度。

[text-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000. *需要* text-field.

绘制文本的颜色。

[text-halo-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *rgba(0, 0, 0, 0). *需要* text-field.

文本光晕的颜色，用于区别于背景。

[text-halo-width][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0. *需要* text-field.

光晕离字体轮廓线的距离。最大值为字体大小的 1/4

[text-halo-blur][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *0. *需要* text-field.

光晕向外渐变的宽度。

[text-translate][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0. *需要* text-field.

。

[text-translate-anchor][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport. *默认为 *map. *需要* text-field. *需要* text-translate.

控制偏移的参考点。

map

相对于地图偏移。

viewport

相对于视窗偏移。

### [raster][Glyphs] ###

[Layout 属性][Glyphs]

[visibility][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[raster-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

绘制图片的不透明度。

[raster-hue-rotate][Glyphs]

*可选 [number][Glyphs].* *单位为* degrees. *默认为 *0.

在色轮上旋转色相的角度。

[raster-brightness-min][Glyphs]

*可选 [number][Glyphs].* *默认为 *0.

增大或减少图片的亮度。此值是最小亮度。

[raster-brightness-max][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

增大或减少图片的亮度。此值是最大亮度。

[raster-saturation][Glyphs]

*可选 [number][Glyphs].* *默认为 *0.

增加或者减少图片的饱和度。

[raster-contrast][Glyphs]

*可选 [number][Glyphs].* *默认为 *0.

增加或者减少图片的对比度。

[raster-fade-duration][Glyphs]

*可选 [number][Glyphs].* *单位为* milliseconds. *默认为 *300.

当添加新瓦片时的渐隐时间。

### [circle][Glyphs] ###

[Layout 属性][Glyphs]

[visibility][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* visible, none. *默认为 *visible.

是否显示此图层。

visible

显示此图层。

none

不显示此图层。

[Paint 属性][Glyphs]

[circle-radius][Glyphs]

*可选 [number][Glyphs].* *单位为* pixels. *默认为 *5.

圆的半径。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.18.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[circle-color][Glyphs]

*可选 [color][Glyphs].* *默认为 *\#000000.

圆的填充颜色。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.18.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[circle-blur][Glyphs]

*可选 [number][Glyphs].* *默认为 *0.

圆虚化的程度。1 表示把圆虚化到只有圆心是不透明的。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.20.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[circle-opacity][Glyphs]

*可选 [number][Glyphs].* *默认为 *1.

绘制圆的不透明度。

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>basic functionality</p> </td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td> <p>data-driven styling</p> </td> 
   <td>&gt;= 0.20.0</td> 
   <td>不支持</td> 
   <td>不支持</td> 
  </tr> 
 </tbody> 
</table>

[circle-translate][Glyphs]

*可选 [array][Glyphs].* *单位为* pixels. *默认为 *0,0.

几何要素的偏移量。以 \[x, y\] 形式设置，负值表示向左和上偏移。

[circle-translate-anchor][Glyphs]

*可选 [enum][].* *可选的值有* map, viewport. *默认为 *map. *需要* circle-translate.

控制偏移的参考点。

map

相对于地图偏移。

viewport

相对于视窗偏移。

[circle-pitch-scale][Glyphs]

*可选 [enum][Glyphs].* *可选的值有* map, viewport. *默认为 *map.

当地图倾斜时，控制圆的缩放行为。

map

圆根据与相机的视距离进行缩放。

viewport

圆不进行缩放。

## [值类型][Glyphs] ##

Mapbox 样式文件包含多种不同类型的值，其中大多数是图层相关的属性。

### [Color][Glyphs] ###

颜色值以 JSON 字符串的形式定义，允许的格式有：HTML 风格的 hex 值、rgb、rbga、hsl、和hsla。HTML 保留的颜色名称如 `yellow` 和 `blue`也可以使用。

{
      "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"
    }

支持 hsl，是因为[比 rgb() 更易理解][Glyphs]。

### [Enum][Glyphs] ###

从字符串形式的值列表中选择一个。在值两边使用引号括起来。

{
      "text-transform": "uppercase"
    }

### [String][Glyphs] ###

字符串即文本。在 Mapbox 样式文件中，字符串要用引号括起来。字符串可以为任意内容，但是要注意 `text-field` ——它实际上是通过花括号的方式引用要素，如下例。

{
      "text-field": "{MY_FIELD}"
    }

### [Boolean][Glyphs] ###

布尔值表示是或否，接受的值有 `true` 或 `false`。

{
      "fill-enabled": true
    }

### [Number][Glyphs] ###

数值，通常为整数或浮点数（十进制）。不需要用引号括起来。

{
      "text-size": 24
    }

### [Array][Glyphs] ###

数组是以一定顺序、以逗号分隔的一个或多个数值。它们被用来设置虚线，指定虚线实部和虚部的长度间隔。

{
      "line-dasharray": [2, 4]
    }

### [Function][Glyphs] ###

任何 layout 或 paint 属性可以设置成 *函数*. 函数使得地图要素的样式随当前缩放级别和要素字段变化。

*  stops*必选 [array][Glyphs].*
    
    函数按照输入和输出进行定义。一对输入输出就是一个“stop”。
 *  property*可选 [string][Glyphs].*
    
    如果指定，函数将会把相应要素字段作为输入。另见 [字段函数][Glyphs]。
 *  base*可选 [number][Glyphs]. 默认为 1.*
    
    插值曲线的指数基底。控制断点插值的增长速率。值越大，在靠近上限的一端增长越快。1 表示线性插值。
 *  type*可选 [enum][Glyphs]. 可选的值有 identity, exponential, interval, categorical.*
    
    identity 函数的输出与输入相同。
    
    exponential 函数在断点间插值的结果稍小于和稍大于函数输入。 这是  属性的默认设置。
    
    interval 函数输出的断点值稍小于函数输入。这是  属性的默认设置。
    
    categorical 函数输出的断点值等于函数输入。

**缩放函数**允许地图要素的样式随缩放级别变化。缩放用来产生视觉深度和控制数据显示密度。每个断点由两个元素组成，第一个是缩放级别，第二个是函数输出的值。

{
      "circle-radius": {
        "stops": [
    
          // zoom is 5 -> circle radius will be 1px
          [5, 1],
    
          // zoom is 10 -> circle radius will be 2px
          [10, 2]
    
        ]
      }
    }

**字段函数**允许地图要素样式随其字段值变化。字段函数用来区分同一个图层中不同类型的要素，或者进行数据可视化。每个断点由两个元素组成，第一个是字段的值，第二个是函数输出的值。需要注意的是，现阶段不是所有的样式属性、所有的平台都支持字段函数。

{
      "circle-color": {
        "property": "temperature",
        "stops": [
    
          // "temperature" is 0   -> circle color will be blue
          [0, 'blue'],
    
          // "temperature" is 100 -> circle color will be red
          [100, 'red']
    
        ]
      }
    }

**缩放+字段函数**允许地图要素样式随缩放级别*和* 字段进行变化。每个断点由两个元素组成，第一个是包含字段值和缩放级别的对象，第二个值是函数输出的值。需要注意的是对字段函数的支持还不完整。

{
      "circle-radius": {
        "property": "rating",
        "stops": [
    
          // zoom is 0 and "rating" is 0 -> circle radius will be 0px
          [{zoom: 0, value: 0}, 0],
    
          // zoom is 0 and "rating" is 5 -> circle radius will be 5px
          [{zoom: 0, value: 5}, 5],
    
          // zoom is 20 and "rating" is 0 -> circle radius will be 0px
          [{zoom: 20, value: 0}, 0],
    
          // zoom is 20 and "rating" is 5 -> circle radius will be 20px
          [{zoom: 20, value: 5}, 20]
    
        ]
      }
    }

### [Filter][Glyphs] ###

过滤器从图层中选择特定的要素。过滤器是由以下形式的过滤条件构成的数组：

存在与否过滤条件

`["has", key]` feature\[key\] 存在

`["!has", key]` feature\[key\] 不存在

比较过滤条件

`["==", key, value]` 等于：feature\[key\] = value

`["!=", key, value]` 不等于：feature\[key\] ≠ value

`[">", key, value]` 大于：feature\[key\] > value

`[">=", key, value]` 大于等于：feature\[key\] ≥ value

`["<", key, value]` 小于：feature\[key\] < value

`["<=", key, value]` 小于等于：feature\[key\] ≤ value

集合隶属过滤条件

`["in", key, v0, ..., vn]` 包含：feature\[key\] ∈ \{v0, ..., vn\}

`["!in", key, v0, ..., vn]` 不包含：feature\[key\] ∉ \{v0, ..., vn\}

复合过滤条件

`["all", f0, ..., fn]` 逻辑`与`: f0 ∧ ... ∧ fn

`["any", f0, ..., fn]` 逻辑`或`: f0 ∨ ... ∨ fn

`["none", f0, ..., fn]` 逻辑`非`: ¬f0 ∧ ... ∧ ¬fn

过滤器的 key 必须是表示要素字段的字符串，或者是表示要素类型的特殊字符 `"$type"`。value（和集合 v0, ..., vn）必须是 [string][Glyphs]、[number][Glyphs]、或 [boolean][Glyphs]，并且与字段值类型一致。对于 `"$type"`，其值必须是 `"Point"`、`"LineString"`、`"Polygon"`其中之一。

集合隶属过滤条件是一个紧凑和高效的方式，来测试字段值是否在值列表中。

比较和集合隶属过滤条件进行的是严格类型比较。例如，这些比较都会返回 false：`0 < "1"`、`2 == "2"`、`"true" in [true, false]`。

`"all"`、`"any"`、和 `"none"` 过滤操作符用来生成复合过滤条件。其值必须是 f0, ..., fn 过滤条件本身。

["==", "$type", "LineString"]

以下过滤条件要求要素的 `class` 字段的值是 "street\_major"、"street\_minor"、或 "street\_limited"。

["in", "class", "street_major", "street_minor", "street_limited"]

以下复合过滤条件 "all" 包含三条其他过滤条件，并要求选中的要素同时满足这些条件：要素的 `class` 必须等于 "street\_limited"，它的 `admin_level` 必须大于等于 3，并且几何类型不能是 Polygon。你可以将复合条件改为 "any" ，用来选择满足任意条件的要素——如类型为 Polygon，但 `class` 字段的值不同。

[
      "all",
      ["==", "class", "street_limited"],
      [">=", "admin_level", 3],
      ["!in", "$type", "Polygon"]
    ]

<table> 
 <thead> 
  <tr> 
   <th>SDK 支持</th> 
   <td>Mapbox GL JS</td> 
   <td>iOS SDK</td> 
   <td>Android SDK</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基础功能</td> 
   <td>&gt;= 0.10.0</td> 
   <td>&gt;= 2.0.0</td> 
   <td>&gt;= 2.0.1</td> 
  </tr> 
  <tr> 
   <td><code>has</code>/<code>!has</code></td> 
   <td>&gt;= 0.19.0</td> 
   <td>&gt;= 3.3.0</td> 
   <td>&gt;= 4.1.0</td> 
  </tr> 
 </tbody> 
</table>

[Mapbox]: http://www.mapbox.cn/mapbox-gl-js/api/
[Mapbox Studio]: https://www.mapbox.com/studio
[Mapbox GL JS]: https://www.mapbox.com/mapbox-gl-js/
[iOS]: https://www.mapbox.com/ios-sdk/
[Android]: https://www.mapbox.com/android-sdk/
[TileJSON]: https://github.com/mapbox/tilejson-spec
[Mapbox Vector Tile]: https://www.mapbox.com/developers/vector-tiles/
[GeoJSON]: http://geojson.org/
[CORS]: http://enable-cors.org/
[spritezero-cli]: https://github.com/mapbox/spritezero-cli
[Glyphs]: http://www.mapbox.cn/
[enum]: https://jingsam.github.io/mapbox-gl-style-spec/#types-enum