# 样式规范

样式规范是定义地图视觉外观的文档:绘制哪些数据,绘制顺序以及绘制数据时如何设置数据样式。

一个样式有以下根属性:

  • 描述信息:version, metadata
  • 地图状态:center, bearing, pitch
  • 地图要素:sources, layers
  • 其他:sprite, glyphs, light, transition
{
  'version': number, // 版本号
  'name': 'string', // 样式名称
  'sprite': 'string', // 雪碧图
  'glyphs': '***/{fontstack}/{range}.pbf', // 字体
  'sources': {}, // 数据源
  'layers': [] // 图层
}
1
2
3
4
5
6
7
8

# 数据源

sources

数据源类型由 type 指定,并且必须是 vector, raster, raster-dem, geojson, image, video 之一。

提示

另外,还有一个 canvas 类型,是 image 的扩展:CanvasSource

# vector

使用 vector 数据源的图层必须指定 source-layer

'sources': {
  '{source-id}': {
    'type': 'vector',
    'tiles': [
      'http://a.example.com/tiles/{z}/{x}/{y}.pbf'
    ],
    'bounds': [-180, -85.051129, 180, 85.051129]
  },
  '{source-id}': {
    'type': 'vector',
    'url': 'http://api.example.com/tilejson.json'
  },
  '{source-id}', {
    'type': 'vector',
    'url': 'xxx'
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# raster

'sources': {
  '{source-id}': {
    'type': 'raster',
    'tiles': [
      'http://xxx&x={x}&y={y}&l={z}&tk={key}',
      'http://xxx&x={x}&y={y}&l={z}&tk={key}'
    ],
    'tileSize': 256
  },
}
1
2
3
4
5
6
7
8
9
10

# raster-dem

栅格 DEM 数据源,可使用 rio-rgbify (opens new window) 生成。

# fill no data
gdalwarp -t_srs EPSG:3857 -dstnodata None -co TILED=YES -co COMPRESS=DEFLATE -co BIGTIFF=IF_NEEDED E:\xxx.tif  E:\xxxx.tif

# conver to rgb
rio rgbify -b -10000 -i 0.1 E:\xxxx.tif E:\test\xxx.tif
1
2
3
4
5

# geojson

GeoJSON 数据源,必须提供 data 属性。可设置 clusterfilter 等。

'sources': {
  // inline GeoJSON
  'geojson-marker': {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-77.0323, 38.9131]
      },
      'properties': {
        'title': 'xxx',
        'marker-symbol': 'monument'
      }
    }
  },
  // url
  'geojson-lines': {
    'type': 'geojson',
    'data': './lines.geojson'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# image & video

数据/栅格

# GeoServer

提示

建议使用 tmswmts。对于矢量数据,使用 application/vnd.mapbox-vector-tile 格式,栅格数据使用 image/png 格式。

# TMS

标准:Tile Map Service (opens new window)

Tile Map Service(瓦片地图服务),简称 TMS。TMS 的切片坐标系统和组织方式可参考下图:

在加载 TMS 服务时,需要设置 scheme 属性为 tmsscheme 属性影响瓦片坐标 y 轴的方向。scheme 有两个值可选:xyz(默认)和 tms。其中 xyz 代表常用的切片规则,即 OGC 标准,切片源点在左上角。tmsOSGeo 标准,切片源点是左下角。

加载示例:

// 矢量
'source-id': {
  'type': 'vector',
  'tiles': [
    'https://xxx@pbf/{z}/{x}/{y}.pbf'
  ],
  'scheme': 'tms'
}
// 栅格
'source-id': {
  'type': 'raster',
  'tiles': [
    'https://xxx@png/{z}/{x}/{y}.png'
  ],
  'tileSize': 256,
  'scheme': 'tms'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# WMS

标准:Web Map Service (opens new window)

Web Map Service(Web 地图服务),简称 WMS。WMS 标准定义了允许用户通过 HTTP 对空间数据进行渲染出图等操作。WMS 服务中包括以下3个操作:

  1. GetCapabilities(获取服务中的要素类及支持的操作)
  2. GetMap(获取地图)
  3. GetFeatureInfo(根据地图上的像素点获取更详细的要素信息,类似Identify功能)

利用 GetMap 操作和指定地图边框范围(bbox)和输出格式(format)即可使用。

加载示例(image/png 格式):

'source-id': {
  'type': 'raster',
  'tiles': [
    'https://xxx?service=WMS&version=1.3.0&request=GetMap&layers=china:bj&bbox={bbox-epsg-3857}&width=512&height=512&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'
  ]
}
1
2
3
4
5
6

注意url中的 bbox 参数值 "{bbox-epsg-3857}"。地图会自动计算地图范围替换该值,获取地图。这也是与下面WMTS同样用栅格格式,WMS不会模糊的原因。

# WMTS

标准:Web Map Tile Service (opens new window)

Web Map Tile Service(Web地图瓦片服务),简称 WMTS。WMTS 标准定义了一些操作允许用户访问瓦片地图。WMTS 服务中包括以下 3 个操作:

  1. GetCapabilities(获取服务的元信息)
  2. GetTile(获取切片)
  3. GetFeatureInfo(可选,获取点选的要素信息)

WMTS的切片坐标系统和组织方式可参考下图:

利用 GetTile 操作和指定输出格式即可在中使用。

加载示例(image/png格式):

'source-id': {
  'type': 'raster',
  'tiles': [
    'https://xxx/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=buildings:Chongqing&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=image/png&TILECOL={x}&TILEROW={y}'
    // 或 geoserver rest 服务
    // 'https:/xxx/wmts/rest/buildings:Chongqing/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/png'
  ]
}
1
2
3
4
5
6
7
8

注意

这种方式请求栅格格式(如 image/png)数据会有些模糊,设置 'tileSize': 256 会好很多。但是实际 WMTS 请求返回的图片格式是清晰的。模糊的原因是地图的缩放是无极缩放,也就是 zoom 可以是小数,而 WMTS 的 z 值是整数,在渲染过程中有缩放,所以模糊了。

前面提到加载 wms 也不会模糊,但是 wms 实际上是根据请求范围实时渲染,加载速度不如瓦片服务。

加载示例(application/vnd.mapbox-vector-tile格式)

'source-id': {
  'type': 'vector',
  'tiles': [
    'https://xxx/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=buildings:Chongqing&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'
    // 或 geoserver rest 服务
    // 'https://xxx/wmts/rest/buildings:Chongqing/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile'
  ]
}
1
2
3
4
5
6
7
8

# WFS

标准:Web Feature Service (opens new window)

Web Feature Service(Web 要素服务),简称 WFS。WFS 标准定义了一些操作允许用户通过 HTTP 对空间数据进行查询、编辑等操作。WFS 服务中常用的操作包括:

  1. GetCapabilities(获取服务中的要素类及支持的操作)
  2. DescribeFeatureType(描述要素类的信息)
  3. GetFeature(获取要素)
  4. Transaction(创建、更新、删除数据的事务操作)

利用 GetFeature 操作和指定输出格式即可在使用。

加载示例(application/json 格式):

'source-id': {
  'type': 'geojson',
  'data': `https://xxx?service=WFS&version=2.0.0&request=GetFeature&typeName=buildings:cq_point&outputFormat=application/json`
}
1
2
3
4

提示

# 图层

layers

图层属性配置如下:

属性 类型 必须 描述
id string 图层唯一标识
type string 图层类型
source string 数据源名称,图层类型除 background 外必须
source-layer string 图层名,矢量瓦片源(vector)必须,其他类型不可用
minzoom number 图层最小缩放级别
maxzoom number 图层最大缩放级别
filter expression 过滤器
layout object 图层布局属性
paint object 图层绘制属性
metadata any 任意属性,对跟踪图层很有用,不影响渲染

图层示例:

'layers': [
  {
    'id': 'road',
    'type': 'line',
    'source': 'your source',
    'source-layer': 'road',
    'minzoom': 7,
    'maxzoom': 18,
    'layout': {
      'visibility': 'visible'
    },
    'paint': {
      'line-color': 'hsl(55, 1%, 20%)'
    },
    'filter': ['==', '$type', 'LineString']
    'metadata': {
      'type': 'base'
    }
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

提示

  • "type" 属性必须是 background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade 之一。
  • background 外的图层都需要引用一个源(source),图层从源获取数据、过滤要素和渲染。
  • layout 属性都有 visibility 属性,可设置 "visible"(默认) 和 "none"
  • 颜色支持 十六进制, RGB, RGBA, HSL, HSLA, HTML 预定义颜色名称 格式。

# 表达式

更详细的介绍请参考:expressions

任何 layout 属性、paint 属性或 filter 的值都可以是表达式。示例:

{
  "circle-radius": [
    "interpolate", ["linear"], ["zoom"],
    // when zoom is 0, set each feature's circle radius to the value of its "rating" property
    0, ["get", "rating"],
    // when zoom is 10, set each feature's circle radius to four times the value of its "rating" property
    10, ["*", 4, ["get", "rating"]]
  ]
}
1
2
3
4
5
6
7
8
9

注意

在表达式中, layout 属性和 paint 属性有一个很重要的区别。paint 属性,只要缩放级别发生变化,都会重新计算 paint 属性,即使是小数变化,比如在 4.1 - 4.6 之间。而 layout 属性只在整数缩放级别时计算,在 4.1 - 4.6 之间不会发生变化,只有在高于 5 或小于 4 时计算。

# Types

表达式拥有强大的类型系统,并支持转换和检测。比如,表达式的输入和输出数据类型需和样式规范中的类型一致,在计算表达式时会自动检测,如果检测到错误,会在控制台输出错误提示。

# Feature data

  • feature-state:要素状态,要素状态不是数据的某一属性,需要对通过要素 id 设置,如给要素设置 hover 状态:map.setFeatureState({source: 'states', id: hoveredStateId}, {hover: false}),然后在表达式中即可使用:['feature-state', 'hover']

# Lookup

  • get:获取要素属性,如获取 name 属性:['get', 'name']

# Decision

在表达式中,可使用常用的条件逻辑,比如:"if/then/else" 的逻辑可使用 'case' 表达式,如需将输入的特定值映射不同的输出,可使用 'match' 表达式。

# Ramps, scales, curves

  • interpolate:插值,支持 linearexponentialcubic-bezier
  • step:分段

# Variable binding

  • let 绑定变量
  • var 引用 let 绑定的变量

# String

  • downcase
  • upcase

# Color

  • rgb
  • rgba

# Math

支持基本的数学运算,如

['/', ['get', 'gdp'], 1000]
1

# Zoom

获取当前缩放级别,仅用于 stepinterpolate 表达式的输入。

['zoom']: number 
1

# Heatmap

获取热力图图层中像素的核密度估计,只能用于 heatmap-color 属性。

['heatmap-density']: number
1

更详细的介绍请样式表达式请参考:expressions