Mapbox Web GL JS编程学习——风格规范Style Specification(四)——Layers（层）

Mapbox Web GL JS编程学习(四)Layers（层）

注：本系列均翻译自官方开发文档，主要供自我学习使用，经供参考，如果你也正在学习Mapbox，可以在评论中留下你的看法。 持续学习中…

本篇博客主要讲根属性中的Layers,应该是最复杂的根属性了。由于时间原因，只翻译到fill，后续有需求时再进行翻译。

一种风格layers属性列出以该样式可用的所有层。层的类型由"type"属性，并且必须是"fill", “line”, “symbol”, “circle”, “heatmap”, “fill-extrusion”, “raster”, “hillshade”, "background"九种中的一种。

背景类型，每个层都需要引用一个源。层获取从源(可选)筛选特性获得的数据，然后定义这些功能的样式。

background 背景
fill 填充
line 线
symbol 符号
raster 光栅
circle 圆
fill-extrusion 填充挤压
heatmap 热力图
hillshade 山地图

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

一：层里面的属性有：
1.filter过滤器
任选 表达.
指定源特性条件的表达式。只显示与筛选器匹配的功能。筛选器中的缩放表达式仅在整数缩放级别上计算。这个feature-state筛选表达式中不支持表达式。

2.ID
唯一的图层名称。

3.layout布局
任选 布局.
图层的布局属性。

4.maxzoom最大变焦
任选 数 介于0和24
图层的最大缩放级别。在缩放级别等于或大于最大缩放时，图层将被隐藏(暂未理解？)。

5.metadata元数据
任意属性对跟踪层有用，但不影响呈现。属性应该加上前缀以避免冲突，比如“Mapbox：”。

6.minzoom最小变焦
任选 数 介于0和24
图层的最小缩放级别。在缩放级别小于最小缩放时，图层将被隐藏。

7.paint 画画
任选 画画.
此层的默认油漆属性。（应该就是显示的如颜色之类的属性）

8.source来源
要用于此层的源描述的名称。除其他外，所有层类型都需要background.

9.source-layer源层（暂未理解）
图层从矢量瓦片源使用。矢量瓦片源所需；禁止用于所有其他源类型，包括GeoJSON源。

10.Type类型
所需 枚举. “fill”, “line”, “symbol”, “circle”, “heatmap”, “fill-extrusion”, “raster”, “hillshade”, “background”.其中之一 呈现此层的类型。简介如下：

“fill”: 一个填充的多边形，带有可选的笔划边框。

“line”: 划过的线。

“symbol”: 图标或文字标签。

“circle”: 满圈的。

“heatmap”: 热图。

“fill-extrusion”: 挤压的(3D)多边形

“raster”: 光栅地图纹理，如卫星图像。

“hillshade”: 基于DEM数据的客户端坡面可视化。目前，该实现只支持Mapbox地形RGB和Mapzen TerrariumTiles。

“background”: 地图的背景色或图案。

11.层的子属性：
层有两个子属性，它们决定如何呈现来自该层的数据：layout和paint属性。

（1）布局属性出现在图层的"layout"对象。它们在呈现过程的早期应用，并定义了如何将该层的数据传递给GPU。对布局属性的更改需要异步“布局”步骤。

（2）paint属性将在稍后的呈现过程中应用。paint属性出现在该层的"paint"对象。对paint属性的更改很简便，并且是同步（synchronously）发生的。

二：下面具体介绍上述Type类型的用法：
1.background 背景（较为简单）
（1）background-color背景色
任选 颜色. 默认为 “#000000”.。用于绘制背景的颜色。

（2）background-opacity背景不透明
任选 数 介于0和1 ， 默认为 1（即不透明）。绘制背景的不透明度。

（3）background-pattern背景模式（暂未理解）
任选 解析图像. 可转换的。
SPRITE中用于绘制图像背景的图像名称。对于无缝模式，图像宽度和高度必须是2(2，4，8，.，512)的因子。请注意，依赖缩放的表达式将只在整数缩放级别上计算。

（4）visibility能见度
lauout 类型。 任选 枚举. “visible”, "none"其中之一， 默认为 “visible”.
表示是否显示此层。

“visible”:图层显示。 “none”:图层未显示。

2.fill 填充
（1）fill-antialias填反别名
boolean型. 默认为 true。是否应该防止填充。

（2）fill-color填充色
任选 颜色. 默认为 “#000000”. 支座 feature-state和interpolate表情。
该层填充部分的颜色。此颜色可指定为rgba如果使用α分量，则颜色的不透明度不会影响1 px笔画的不透明度。

（3）fill-opacity填充不透明度
介于0和1 ， 默认为 1。
整个填充层的不透明度。与fill-color相比，如果使用stroke(笔画)，此值还将影响填充周围的1px笔画。

（4）fill-outline-color填充-轮廓-颜色
任选 颜色. 要求 填反别名成为 true。
填充的轮廓颜色。如果没有具体说明，fill-outline-color的值与fill-color相同。

（5）fill-pattern填充模式（暂未理解）
任选 解析图像. 可转换的。
SPRITE中用于绘制图像填充的图像名称。对于无缝模式，图像宽度和高度必须是2(2，4，8，.，512)的因子。请注意，依赖缩放的表达式将只在整数缩放级别上计算。

（6）fill-sort-key填充排序键（相当于优先级）
layout 类型 任选 数.
根据此值按升序排序功能。具有较高排序键的功能将出现在具有较低排序键的功能之上。

（7）fill-translate填充翻译
paint属性。 任选 列阵 的 数s. 单位象素. 默认为 [0,0].
几何图形的偏移量。值是[X，Y]底片分别表示左和上。

（8）fill-translate-anchor填充-翻译-锚
paint属性。 “map”, "viewport"其中之一， 默认为 “map”.。控制fill-translate的参考框架。

“map”: 填充是相对于地图翻译的。
“viewport”: 填充是相对于视口翻译的。

（9）visibility能见度
layout属性。其中之一 “visible”, “none”. 默认为 “visible”.
是否显示此层。

“visible”: 图层显示。
“none”: 图层未显示。

3.line 线（暂时跳过）

4.symbol 符号
5.raster 光栅
6.circle 圆
7.fill-extrusion 填充挤压
8.heatmap 热力图
9.hillshade 山地图