Mapbox Web GL JS编程学习—— 风格规范Style Specification(一)——简介和Root根属性

Mapbox Web GL JS编程学习—— 风格规范Style Specification(一)——关于Root根属性

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

本篇博客主要讲两个方面:一是风格规范的概念,二是讲Root根属性的类别,简单介绍一些属性的用法。此系列后续内容如Source、Layers等等为具体用法。

一:风格规范简介:
Mapbox样式是定义地图视觉外观的文档:要绘制什么数据、绘制它的顺序以及绘制数据时如何样式。样式文档是杰森具有特定根级别和嵌套属性的。本规范定义并描述了这些属性。

Mapbox样式由一组根特性,其中一些描述单个全局属性,有些则包含嵌套属性。一些根属性,如version, name,和metadata,对地图的外观或行为没有任何影响,但提供与地图相关的重要描述性信息。其他人,比如layers和sources,确定哪些地图功能将出现在您的地图上,以及它们将是什么样子。一些属性,比如center, zoom, pitch,和bearing,为地图呈现器提供一组默认设置,以便在最初显示地图时使用。

二:Root
Mapbox样式的根级属性指定映射的层、瓦片源和其他资源,以及未在其他地方指定的初始摄像机位置的默认值。

{
    "version": 8,
    "name": "Mapbox Streets",
    "sprite": "mapbox://sprites/mapbox/streets-v8",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "sources": {...},
    "layers": [...]
}

1.bearing 轴承:默认方位,以度为单位。方位是“向上”的罗盘方向;例如,90°的方位使地图向东向上。只有在地图尚未通过其他方法定位(例如地图选项或用户交互)时,才会使用此值。

bearing:90 //使地图向东向上

2.center 中心:默认地图中心在经度和纬度。

center: [112.9476, 28.185] //视图中心为桃子湖(即开始位置)

3.glyphs
一种URL模板,用于加载PBF格式的符号距离字段字形集.URL必须包括{fontstack}和{range}代币。如果任何层使用text-field布局属性URL必须是绝对的,包含方案、权限和路径组件.

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

4.layers 层:
层的所需要的数组,层将按此数组的顺序绘制。

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

5.light 灯光
The global light source.(全局灯源/)

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

6.metadata 元数据
用于跟踪样式表的任意属性,但不影响呈现。属性应该加上前缀以避免冲突,比如“Mapbox:”。

7.name 名字
样式的可读的名称。

"name": "Bright"

8.pitch 螺距:
单位度. 默认为 0.
以度为单位。零是垂直于表面,直接向下看地图,而一个更大的值,比如60,看在前方的地平线上。只有当地图没有通过其他方式定位(例如地图选项或用户交互)时,才会使用样式音调。

"pitch": 50

9.source 数据源:
数据源规范。

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

10.sprite 子画面?:
检索sprite映像和元数据的基本URL。扩展.png, .json规模因素@2x.png将自动附加。如果任何层使用background-pattern, fill-pattern, line-pattern, fill-extrusion-pattern,或icon-image财产。URL必须是绝对的,包含方案、权限和路径组件.

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

11.transition 过渡:
任选 过渡.
一个全局转换定义,用作跨属性的默认转换,用于在没有设置特定于属性的转换时在一个值和下一个值之间进行定时转换。基于冲突的符号衰落是独立于样式控制的。

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

12.version 版本:
样式规范版本号。一定是8。

"version": 8

13.zoom变焦:
默认缩放级别。只有在地图尚未通过其他方式定位(例如地图选项或用户交互)时,才会使用样式缩放。

"zoom": 12.5
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值