乐趣区

关于gis:mapboxgl-地图样式-唯一值渲染

jiezi

mapboxgl 中提供了弱小的地图款式编辑性能，款式表达式是其一大特色。

惟一值渲染是 GIS 中常见的专题图渲染形式，明天咱们来看一下如何用 mapboxgl 中的款式表达式实现这一成果。

在网上找了一份北京市的行政区划图，指标是各个区设置上不同的色彩。成果如下：

形式一：应用 case 表达式

这种做法的益处是能够灵便批改每个区的色彩。

"fill-color":[
    "case",
    ["boolean",["==",["get","name"],"怀柔区"],false],"#FFFFCC",
    ["boolean",["==",["get","name"],"密云区"],false],"#CCFFFF",
    ["boolean",["==",["get","name"],"平谷区"],false],"#FFCCCC",
    ["boolean",["==",["get","name"],"通州区"],false],"#FFFF99",
    ["boolean",["==",["get","name"],"房山区"],false],"#CCCCFF",
    ["boolean",["==",["get","name"],"延庆区"],false],"#FFCC99",
    ["boolean",["==",["get","name"],"门头沟区"],false],"#CCFF99",
    ["boolean",["==",["get","name"],"大兴区"],false],"#66CCFF",
    ["boolean",["==",["get","name"],"顺义区"],false],"#99CCFF",
    ["boolean",["==",["get","name"],"海淀区"],false],"#CCCCCC",
    ["boolean",["==",["get","name"],"西城区"],false],"#CCFFCC",
    ["boolean",["==",["get","name"],"东城区"],false],"#CC99CC",
    ["boolean",["==",["get","name"],"朝阳区"],false],"#99CC99",
    ["boolean",["==",["get","name"],"石景山区"],false],"#CCCC99",
    ["boolean",["==",["get","name"],"昌平区"],false],"#FF9969",
    ["boolean",["==",["get","name"],"丰台区"],false],"#999999",
    "black"
]

下面表达式的意思是，从数据中获取 name 属性的值，判断是哪个区，而后设置相应的色彩。

case 表达式语法，详见官网阐明

mapboxgl 表达式的根本语法：

1、一组中括号 [] 代表一个残缺的表达式，中括号中第一个参数申明表达式的类型，前面是表达式的参数。

2、表达式能够嵌套。

对于表达式的具体介绍，后续会用独自一篇文章来写，这里只做个简略阐明。

下面这段表达式如果翻译成 js 大抵是这样的：

function getColor(feature){    //feature 是 geojosn 格局中的 Feature
    if(feature.properties.name === "怀柔区"){return "#FFFFCC"}
    else if(features[i].name === "密云区"){return "#CCFFFF"}
    ...
    else{return "black"}
}

在线示例，浏览器 F12 能够查看残缺代码。

形式二：应用 match 表达式

match 和 case 相似，但在写法上更为简洁

"fill-color":[
    "match",
    ["get","name"],
    "怀柔区","#FFFFCC",
    "密云区","#CCFFFF",
    "平谷区","#FFCCCC",
    "通州区","#FFFF99",
    "房山区","#CCCCFF",
    "延庆区","#FFCC99",
    "门头沟区","#CCFF99",
    "大兴区","#66CCFF",
    "顺义区","#99CCFF",
    "海淀区","#CCCCCC",
    "西城区","#CCFFCC",
    "东城区","#CC99CC",
    "朝阳区","#99CC99",
    "石景山区","#CCCC99",
    "昌平区","#FF9969",
    "丰台区","#999999",
    "black"
]

翻译成 js 是上面这样：

function getColor(feature){    //feature 是 geojosn 格局的 Feature
    switch(feature.properties.name){//["get","name"]
        case "怀柔区":
            return "#FFFFCC"
        case "密云区":
            return "#CCFFFF"
        ...
        default
            return "black"
    }
}

在线示例

形式三：依据 id 匹配色彩

前两种表达式适宜数据量较小时应用。当数据量较大时，能够通过设置一组色彩，依据数据中的某个 id 字段进行匹配来实现。

"fill-color":[
    "to-color",[
        "at",
        ["%", ["get", "adcode"], 13],
        ["literal",["#00FFCC","#CCFFFF","#FFCCCC","#FFFF99","#CCCCFF","#FFCC99","#CCFF99","#66CCFF","#99CCFF","#CCFFCC","#99CC99","#CCCC99","#FF9969"]]
    ]
]

下面表达式的意思是，会用数据中 adcode 的属性值除以 13 而后取余数，依据余数从色彩数组中取一个色彩。

表达式具体阐明：

  1. ["get", "adcode"] 表达式get 从数据中获取 adcode 属性的值。
  2. ["%", ["get", "adcode"], 13] 表达式 % 将 adcode 的值除以 13 并取余数，这里的 13 代表色彩数组的个数。
  3. ["literal",["#00FFCC",...]] 表达式 literal 用来申明一个色彩数组，因为在这里中括号被默认是表达式，所以想要定义真正的数组就要用 literal 包装一下。
  4. ["at",["%", ["get", "adcode"], 13],["literal","#00FFCC",...]] 表达式 at 是依据求余的值从色彩数组中取色彩。
  5. ["to-color", ["at",["%", ["get", "adcode"], 13],["literal","#00FFCC",...]]] 表达式 to-color 是将字符串转为 mapboxgl 的色彩类型，不然会报错。

翻译成 js 是上面这样：

function getColor(feature){    //feature 是 geojosn 格局的 Feature
    const colors = ["#00FFCC","#CCFFFF","#FFCCCC","#FFFF99","#CCCCFF","#FFCC99","#CCFF99","#66CCFF","#99CCFF","#CCFFCC","#99CC99","#CCCC99","#FF9969"]
    const index = feature.properties.adcode % 13
    return colors[index]
}

在线示例

形式四：从属性中取色彩

这种形式比较简单，就是间接把色彩放到数据中，通过 get 表达式获取进去间接用。毛病就是要去改数据。

下图是在数据中减少色彩数据：

应用表达式间接获取色彩：

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

在线示例

形式五：分图层设置色彩

通过图层的 filter筛选条件实现，每个区设置成一个图层，而后设置每个图层的色彩。

图层款式设置形式：

[
    {
        "id": "beijing-haidian",
        "type": "fill",
        "source": "beijing",
        "paint":{"fill-color":"#FFCC99"},
        "filter":["==",["get","name"], "海淀区"]
    },
    {
        "id": "beijing-chaoyang",
        "type": "fill",
        "source": "beijing",
        "paint":{"fill-color":"#FFCCCC"},
        "filter":["==",["get","name"], "朝阳区"]
    }
    ...
]

这种做法的益处是，能够在 maputnik 中间接选色彩，因为在 maputnik 中，表达式是不反对间接在界面上选色彩的，只能本人编辑。

选色彩成果如下图：

这种形式的毛病也很显著：图层由一个变成了 16 个，style 文件会变的很啰嗦，图层治理不太不便。

在线示例

最初

后续会将表达式作为一个系列更新几篇，敬请关注。

原文地址：http://gisarmory.xyz/blog/index.html?blog=mapboxglStyleUniqueValue

欢送关注《GIS 兵器库》

本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。

退出移动版