---
title: 地图图层
source: https://vjmap.com/guide/mapLayers.html
---

# 地图图层

## 概述

---

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

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

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

## 图层规格

---

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

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


字段定义说明如下：

**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\]

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

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


**2、比较过滤：**

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

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

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


**3、成员过滤：**

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

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

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


**4、匹配过滤：**

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

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

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

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

```



**5、组合过滤：**

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

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


更多的表达式语法请查看文档 [样式表达式](/guide/expression.html)


### 图层样式操作

---

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

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

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


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

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


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

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


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

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


**设置图层的缩放区间：**

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


**获取图层的过滤器：**

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


**设置图层的过滤器：**

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

## 增加图层的三种写法

::: tip 提示
以下三种写法效果一样，只是封装程度不同
:::
**以增加线图层为例**

线数据示例如下

```js
var geoLines = {
  "type": "LineString",
  "properties":{
      "prop0": "value0"
  },
  "coordinates": [
      [
          10,
          30
      ],
      [
          50,
          30
      ],
      [
          110,
          40
      ]
  ]
};
```
### 写法一
::: tip 提示
属性用基于`kebab-case`写法
:::

```js
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 //透明度
}})
```

### 写法二
::: tip 提示
属性用驼峰式大小写，不用区分`layout`还是`paint`属性，更详细的写法参考[数据源和图层](/guide/sourcelayer.html)
:::

```js

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 //透明度
})
```
### 写法三
::: tip 提示
更进一步简化，封装省了传递sourceID和layerID
:::

```js
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);
```