mapbox-gl | 2.1 唯一值渲染

简述

从本节开始，将展开讲述图层样式相关内容，上一章的目的是入门，让大家学会读官方的开发文档，本大章的目的是在熟悉开发文档的同时，进一步了解这些功能的细节。

唯一值渲染，如果你有一批POI点数据，其中有字段标明了类别，项目要求每一个类别（如医院，加油站等）用不同的图标进行展示，这便是唯一值渲染。

示例

代码

首先看一个示例，然后进行讲解

function uniqueValue(map) {
  // 数据
  const data = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {
          name: "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: {
          name: "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: {
          name: "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: {
          name: "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": [
        "match",
        // 通过字段name进行唯一值渲染
        // 属性值为1的颜色为rgb(255,0,0),红色
        ["get", "name"],
        "1",
        "rgb(255,0,0)",
        "2",
        "rgb(255,255,0)",
        "3",
        "rgb(0,255,0)",
        // 没有被指定颜色的属性值，默认为该颜色
        "rgb(0,255,255)",
      ],
    },
    layout: {},
  });
}

解析

可以直接将代码复制到你的测试工程中，调用该方法并传入map对象即可，在天安门看到如下结果：

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

完成唯一值渲染的关键在于 fill-color 如何设置,可以看到我们使用了一个match结构的表达式。关于表达式，我的建议是用到哪个就学会哪个，表达式能够完成很多效果，但也代表着难度的提升。

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

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

match可以理解为一个写法定式，[“get”,属性名称]的效果是获取Feature的属性，在示例中，是获取为name的属性值。
至于后面，属性值和效果值是成对出现的，意味着属性值对应的效果值（颜色），直到最后，是默认的效果值，这么去讲解并不能方便理解，如果我们把它转换为js写法，便十分简单了。

switch(["get",属性名称]){
  case 属性值:
    return 效果值;
  case 属性值2:
    return 效果值2;
  default:
    return 默认效果值;

}

在这个示例中，属性名称为name,属性值为1,2,3，对应的颜色是红蓝黄三种，属性值4是我们未设置的，所以使用默认颜色青色。

总结

本节将GIS中唯一值渲染用mapbox表达式实现，实现比较简单，下一节是多级渲染。