Mapbox Web GL JS编程学习—— 风格规范Style Specification(二)——关于Source和Light

Mapbox Web GL JS编程学习—— 风格规范Style Specification(二)——关于Light和Source

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

写在前面：一些专有名词的翻译：
tile 瓦片 geojson pdf 地图的瓦片数据 lng longitude经度
lat latitude维度 coordinates 坐标
cluster 集群 pitch 螺距

本篇博客主要讲根属性中的Source和Light，对基础语法功能进行学习。
一：Source
源说明地图应该显示哪些数据。指定源的类型。"type"属性，该属性必须是

vector, raster, raster-dem, geojson, image, video
（矢量, 光栅, 光栅-DEM, geojson, 图片, 视频）

添加源不足以使数据出现在地图上，因为源不包含颜色或宽度等样式细节。层引用一个源，并给它一个可视化的表示。这样就有可能以不同的方式对相同的源进行样式设计，比如区分公路层中的道路类型。

1.vector 矢量
对于Mapbox承载的向量块，"url"值应为形式mapbox://tilesetid.
矢量瓦片的所有几何坐标必须在-1 * extent和(extent * 2) - 1包括在内。所有使用矢量源的层都必须指定"source-layer"值。

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

有以下属性：
（1）attribution 属性：包含向用户显示地图时要显示的属性。
bounds 界 ：一个数组，默认为 [-180,-85.051129,180,85.051129]。包含源边界框的西南角和东北角的经度和纬度，顺序如下：[sw.lng, sw.lat, ne.lng, ne.lat]。当此属性包含在源中时，MapboxGL将不请求在给定边界之外的瓷砖。
（2）url ：TileJSON资源的URL。支持的协议是http:, https:，和mapbox://.
（3）tiles 瓦片：一个或多个平铺源URL的数组，如TileJSON规范中的那样。
（4）maxzoom 最大倍数
（5）minzoom最小倍数
（6）promoteId 用作特征id的属性(用于功能状态)。属性名称或窗体的对象。{: }。如果指定为向量平铺源的字符串，则在其所有源层使用相同的属性。
（7）scheme 方案：影响瓷砖坐标的y方向,默认xyz。“xyz”:滑动地图倾斜名方案。“tms”:OSGeo规范方案。

2.raster 光栅
对于Mapbox托管的光栅瓷砖，"url"值应为形式mapbox://tilesetid.

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

有以下属性：
attribution bounds maxzoom minzoom scheme tiles url（与vector相同）以及
tileSize:单位pixels 默认为 512。显示此层的瓦片的最小可视大小。只为光栅层配置。
3.raster DEM 光栅DEM
光栅DEM的来源。只支持Mapbox地形RGB (mapbox://mapbox.terrain-rgb):

"mapbox-terrain-rgb": {
    "type": "raster-dem",
    "url": "mapbox://mapbox.terrain-rgb"
}

有以下属性：（同raster属性）以及
encoding 编码:“terrarium”, “mapbox”. 默认为 “mapbox”，此源使用的编码。默认情况下使用Mapbox地形rgb。
“terrarium”:
水族馆格式PNG瓷砖。https://aws.amazon.com/es/public-datasets/terrain/了解更多信息。
“mapbox”:
Mapbox地形RGB瓷砖。https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb了解更多信息。

4.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"
        }
    }
}

有以下属性：
buffer 缓冲器：0和512 . 默认为 128.每边（此处原文：each side）瓦片缓冲器的大小。值为0不会产生缓冲区。值512会产生与瓷砖本身一样宽的缓冲区。较大的值产生较少的绘制工件附近的瓦片边缘和较慢的性能。
cluster 集群:boolean类型，默认false。果数据是点特性的集合，则将其设置为按半径将点按半径聚为组。集群化Point具有附加属性的源中的特性：

cluster是true如果重点是一个集群
cluster_id一起使用的集群的unqiue id。
point_count分组的原始点数
point_count_abbreviated缩写点数

clusterMaxZoom
clusterProperties
clusterRadius
data
…

5.image
这个"url"值包含图像来源。这个"coordinates"数组包含[longitude, latitude]按顺时针顺序排列的图像角对：左上角，右上角，右下角，左下角。

"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]//左下
    ]
}

6.video
这个"urls"值是一个数组。对于数组中的每个URL，一个视频元素来源将被创造。为了支持跨浏览器的视频，提供多种格式的URL。
这个"coordinates"数组包含[longitude, latitude]按顺时针顺序排列的视频角对：左上角，右上角，右下角，左下角。

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

二：Light 灯光：
一种风格light属性为该样式提供全局光源。

"light": {
  "anchor": "viewport",
  "color": "white",
  "intensity": 0.4
}

1.anchor锚：
“map”, "viewport"二选一. 默认为 “viewport”.
挤压后的几何图形是否与地图或视图相对应。
“map”:光源的位置与地图的旋转对齐。
“viewport”:光源的位置与视口的旋转对齐。

"anchor": "map"

2.color颜色:
任选 颜色. 默认为 “#ffffff”.用于照明挤压几何图形的颜色。

3.intensity强度：
任选 数 ，介于0和1 . 默认为 0.5.
照明强度(从0到1)。更高的数字将表现为更极端的对比。

4.position位置（要求低时，优先度低，后掌握）:
任选 列阵 的 数s. 默认为 [1.15,210,30].
即：光源相对于发光(挤压)几何图形的位置，在[r (径向坐标)，a (方位角)，p(极角)]。其中r表示物体底部中心到光的距离，a表示光相对于0°(0°时)的位置。light.anchor设置为viewport对应于视图的顶部，或0°时light.anchor设置为map对应于正北，并按顺时针方向进行)，p表示光的高度(从0°，直接高于，到180°，正下方)。

"position": [
  1.5,
  90,
  80
]