mapbox-gl | 2.2 多级渲染和属性渲染

简述

上一节讲述的是唯一值渲染，本节讲述的是多级渲染，这两者在代码上其实区别不大，只是在GIS专业学科里，会特意把这两类提出来，作为制图中常见的两种表达方式。

多级渲染，如果你有一批环境监测指数数据，指数范围是100到0，现在想把这些指数数据按优（80~100）、良（80 ~60）、差（60 ~0）进行不同展示，这便是多级渲染。

示例

代码

先看示例，然后进行讲解

function multiLevel(map) {
  // 数据
  const data = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {
          id: 1,
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.38585567474364, 39.92099342895789],
              [116.38615608215332, 39.91622086779371],
              [116.39057636260985, 39.91655002062137],
              [116.39049053192137, 39.921125081103234],
              [116.38585567474364, 39.92099342895789],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          id: 2,
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.39104843139647, 39.92102634201797],
              [116.39117717742919, 39.91655002062137],
              [116.39503955841063, 39.91684625681369],
              [116.39469623565674, 39.920960515882015],
              [116.39104843139647, 39.92102634201797],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          id: 3,
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.38628482818604, 39.91576005117727],
              [116.38662815093993, 39.91227091046905],
              [116.39044761657713, 39.91243549657234],
              [116.39049053192137, 39.91618795242394],
              [116.38628482818604, 39.91576005117727],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          id: 4,
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.39139175415039, 39.91612212163695],
              [116.39147758483887, 39.91240257938332],
              [116.39516830444335, 39.91266591645252],
              [116.39486789703369, 39.91628669848582],
              [116.39139175415039, 39.91612212163695],
            ],
          ],
        },
      },
    ],
  };
  // 添加数据源
  map.addSource("polygon", {
    type: "geojson",
    data: data,
  });
  // 添加图层
  map.addLayer({
    id: "uniquePolygon",
    type: "fill",
    source: "polygon",
    paint: {
      "fill-color": [
        "case",
        // 通过字段name进行唯一值渲染
        // 属性值为1的颜色为rgb(255,0,0),红色
        ["<=", ["get", "id"], 2],
        "rgb(255,0,0)",
        ["<=", ["get", "id"], 3],
        "rgb(255,255,0)",
        // 没有被指定颜色的属性值，默认为该颜色
        "rgb(0,255,255)",
      ],
    },
    layout: {},
  });
}

解析

可以直接将代码复制到你的测试工程中，调用该方法并传入map对象即可。

代码与上一节一样，先定义了一个FeatureCollection，里面有四个Feature,都有name属性，作为唯一值渲染的字段，之后创建Source,最后通过addLayer添加图层。

与唯一值渲染类似，使用case结构表示式设置 fill-color 。

  "fill-color": [
    "case",
    // 通过字段name进行唯一值渲染
    // 属性值为1的颜色为rgb(255,0,0),红色
    ["<=", ["get", "id"], 2],
    "rgb(255,0,0)",
    ["<=", ["get", "id"], 3],
    "rgb(255,255,0)",
    // 没有被指定颜色的属性值，默认为该颜色
    "rgb(0,255,255)",
  ],

["case",[判断,["get",属性名称],值]，效果值，... ，默认效果值]

case可以理解为一个写法定式，[“get”,属性名称]的效果是获取Feature的属性，在示例中，是获取为name的属性值。
为了方便理解，我将它转换为js代码

if(["get",属性名称] 判断 值1){
    return 效果值;
}else if(["get",属性名称] 判断 值2){
    return 效果值2;
} else {
    return 默认效果值;
}
// 示例js逻辑
if(["get","id"]<=2){
  return "rgb(255,0,0)"
} else if(["get","id"]<=3){
  return "rgb(255,255,0)"
} else {
  return "rgb(0,255,255)"
}

在这个示例中，属性名称为name,属性值为小于等于2的为红色，小于等于3的为黄色，其他默认为青色。

属性渲染

在唯一值熏染和多级渲染中，我们多次用到 [“get”，属性名称] 获取Feature中的属性，然后使用这个值进行判断，以此返回不同的效果值，实际上，我们也可以直接用于渲染

在上述示例中，数据中每一个Feature只有一个属性 id，我们可以再添加一个属性

color: 'rgb(255,0,0)' // css能支持的颜色值都可以

给四个Feature添加不同颜色值，然后更改一下 fill-color中的写法

"fill-color": ["get","color"]

将属性值作为效果值，也是一种常用的方法。常见用于对fill-extrusion图层的高度设置，等等。

总结

多级渲染在代码上和唯一值区别不大，属性渲染也是常用的方法，下节讲述热力图