# 地图图层

# 概述

图层定义数据源中的数据内容在地图上的展现方式，每个图层都必须有唯一的 ID 标识，不能重复。

每个图层都必须要有指定一个数据源类型，图层类型范围如下：

背景类型：'background'
面几何对应类型：'fill'、'extrusion'
栅格图片对应类型：'raster'
线几何对应类型：'line'
点几何对应类型：'symbol'、'circle'、'heatmap'

1
2
3
4
5

# 图层规格

图层样式设置的结构为 JSON 结构，根级别结构如下：

{
    "id": "road-layer-1",
    "type": "line",
    "source": "RoadSource",
    "source-layer": "Road",
    "layout": {...},
    "paint": {...},
    "minzoom": 6,
    "maxzoom": 17.5,
    "filter": [...]
}

1
2
3
4
5
6
7
8
9
10
11

字段定义说明如下：

id：图层 ID，必填项；说明：（值唯一，不能重复）

type：图层渲染类型，必填项；（值域范围，参考本章「概述」）

source：所使用的数据源 ID，说明：（当图层类型不为 background 时，该值为必填项）

source-layer：所使用的 vector 数据源中的图层标识，说明：（当数据源类型为 vector 时，该值为必填项；其它数据源类型，去除该参数）

layout：布局属性

paint：绘制属性

minzoom：图层可展示的最小缩放等级值，选填项；说明：（值为小数或整数，值域范围[0,24]，不设置该参数则地图允许的最小缩放等级内都可显示）

maxzoom：图层可展示的最大缩放等级值，选填项；说明：（值为小数或整数，值域范围[0,24]，不设置该参数则地图允许的最大缩放等级内都可显示）

filter：所使用数据源的 features 数据的过滤条件，选填项；说明：（当数据源 features 数据信息和 filter 条件匹配时图层才显示）

# filter 规格

fliter 表示从所有图层过滤出特定特征的图层，有以下几种过滤形式：

1、存在过滤：

表达式形式：[way, key]

存在过滤主要有“has”、“!has”两种形式

["has", "count"]，表示过滤出存在属性"count"的所有的feature数据
["!has","count"]，表示过滤出不存在属性"count"的所有的feature数据

1
2
3
4

2、比较过滤：

表达式形式：[way, key, value]

比较过滤有等于“==”、大于“>”、小于“<”、不等于“!=”、大于等于“>=”、小于等于“<=”几种形式

["==", "count", "1000"]，表示过滤出属性"count"值为1000的feature数据，
//  注意此时数据源name存储的值为"1000"而不是1000 过滤时数据类型是严格匹配的

1
2
3
4

3、成员过滤：

计算形式：[way, key, v0,v1，…，vn]

成员过滤主要有"in"、"!in"两种形式

["in", "name", "point", "fill", "line"]，
//  表示过滤出属性"name"值为"point", "fill", "line"其中任一一个的feature数据

1
2
3
4

4、匹配过滤：

选择标签值与输入值匹配的输出，如果找不到匹配项，则选择回退值。输入可以是任何表达式（例如["get", "building_type"]）。每个标签label必须是：

单个文字值；要么文字值数组，其值必须是所有字符串或所有数字（例如[100, 101]或["c", "b"]）。如果数组中的任何值匹配，则输入匹配，类似于不推荐使用的"in"运算符。每个标签必须唯一。如果输入类型与标签类型不匹配，则结果将是后备值。

"circle-color": [
    'match', ['get', 'name'],
    '点1', 'red',
    '点2', 'yellow',
    ['点3','点4'], 'blue',
    '#fff'
],

//获取feature's properties 中的name值，根据name值匹配对应的颜色，默认是(没有匹配到）#fff , ['点3','点4'] 表示是label是可以是数组类型,

1
2
3
4
5
6
7
8
9
10

5、组合过滤：

计算形式：[way, f0,f1，…，fn]

组合过滤主要有等于"all"、"any"、"none"三种形式
"all"表示满足所有过滤条件的数据，"any"表示满足任一一个过滤条件的数据，"none"表示过滤出不满足所有过滤条件的数据
["all", ["<=", "count", 34], ["like", "code", "101"]]
//  表示过滤出属性"count"满足大于等于34，属性"code"值包含101的feature数据

1
2
3
4

更多的表达式语法请查看文档样式表达式

# 图层样式操作

图层样式操作常用方法，说明如下：

获取图层布局的一个具体的样式值：

参数说明：图层id、图层布局参数名称，example：
map.getLayoutProperty('my-layer-id', 'visibility')

1
2

设置图层布局的一个具体的样式值：

参数说明：图层id、图层布局参数名称、布局参数值，example：
map.setLayoutProperty('my-layer-id', 'visibility', 'none')

1
2

获取图层绘制的一个具体的样式值：

参数说明：图层id、图层绘制参数名称，example：
map.getPaintProperty('my-layer-id', 'fill-color')

1
2

设置图层绘制的一个具体的样式值：

参数说明：图层id、图层绘制参数名称、绘制参数值，example：
map.setPaintProperty('my-layer-id', 'fill-color', '#faafee')

1
2

设置图层的缩放区间：

参数说明：图层id、最小缩放级别、最大缩放级别，example：
map.setLayerZoomRange('my-layer-id', 6, 12)

1
2

获取图层的过滤器：

参数说明：图层id，example：
map.getFilter('my-layer-id')

1
2

设置图层的过滤器：

参数说明：图层id、过滤器内容，如果过滤器内容为null或是undefined，将清除图层上所有已有的过滤器，example：
map.setFilter('my-layer-id', ['==', 'name', 'myname'])

1
2

# 增加图层的三种写法

提示

以下三种写法效果一样，只是封装程度不同

以增加线图层为例

线数据示例如下

var geoLines = {
  "type": "LineString",
  "properties":{
      "prop0": "value0"
  },
  "coordinates": [
      [
          10,
          30
      ],
      [
          50,
          30
      ],
      [
          110,
          40
      ]
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 写法一

提示

属性用基于kebab-case写法

map.addSource("lines", {
    type: "geojson",
    data: geoLines
});
map.addLayer({
    id: 'route',
    source: 'lines',
    type: 'line',
    "layout": {
        "line-cap": "square", //butt 尖头，round 圆头，square平头
        "line-join": "round" //bevel平拐，round 圆拐，miter棱拐
    },
    "paint": {
        "line-width": 20, //宽度
        "line-color": "#FF0000", //颜色
        "line-opacity": 0.8 //透明度
}})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 写法二

提示

属性用驼峰式大小写，不用区分layout还是paint属性，更详细的写法参考数据源和图层


map.addGeoJSONSource("lines", geoLines);
map.addLineLayer("route", "lines", {
    lineCap: "square", //butt 尖头，round 圆头，square平头
    lineJoin: "round", //bevel平拐，round 圆拐，miter棱拐
    lineWidth: 20, //宽度
    lineColor: "#FF0000", //颜色
    lineOpacity: 0.8 //透明度
})

1
2
3
4
5
6
7
8
9

# 写法三

提示

更进一步简化，封装省了传递sourceID和layerID

let polylines = new vjmap.Polyline({
    data: geoLines,
    lineCap: "square", //butt 尖头，round 圆头，square平头
    lineJoin: "round", //bevel平拐，round 圆拐，miter棱拐
    lineWidth: 20, //宽度
    lineColor: "#FF0000", //颜色
    lineOpacity: 0.8 //透明度
});
polylines.addTo(map);

1
2
3
4
5
6
7
8
9

← 地图数据源图层样式 →