mapboxgl 中提供了强大的地图样式编辑功能，样式表达式是其一大特色
唯一值渲染是GIS中常见的专题图渲染方式，今天我们来看一下如何用 mapboxgl 中的样式表达式实现这一效果
mapboxgl 表达式的基本语法：
- 一组中括号[ ]代表一个完整的表达式，中括号中第一个参数声明表达式的类型，后面是表达式的参数。
- 表达式可以嵌套
一：使用 case 表达式
这种做法的好处是可以灵活修改每个区的颜色
"fill-color":[
"case",
["boolean",["==",["get","name"],"One"],false],"#FA2020",
["boolean",["==",["get","name"],"Two"],false],"#CCFFFF",
// 默认
"black"
]
"fill-color":[
"case",
['boolean',['<',["get","population"],50]],"#ffd0a6",
['boolean',['<',["get","population"],100]],"#ffaa7f",
['boolean',['<',["get","population"],150]],"#ff704e",
['boolean',['<',["get","population"],200]],"#f04040",
'#b50a09'
]
上面表达式的意思是，从数据中获取 name 属性的值，判断是哪个区，然后设置相应的颜色
case表达式语法，详见官方说明
翻译成 js
function getColor(feature){ //feature是geojosn格式中的Feature
if(feature.properties.name === "One"){
return "#FFFFCC"
}else if(features[i].name === "Two"){
return "#CCFFFF"
} else{
return "black"
}
}
二、使用 match 表达式
'circle-color': [
'match',
['get', 'color'],
'One',
'#FA2020',
'Two',
'#F4A453',
'Three',
'#FBD940',
'Four',
'#8EC930',
'Five',
'#24D1C6',
/* other */ '#ccc'
],
翻译成js
function getColor(feature){ //feature是geojosn格式的Feature
switch(feature.properties.name){ //["get","name"]
case "One":
return "#FA2020"
case "Two":
return "#F4A453"
default
return "#ccc"
}
}
三、使用step表达式
"fill-color":[
"step",
["get","color"],
"#ffd0a6", 50,
"#ffaa7f", 100,
"#ff704e", 150,
"#f04040", 200,
"#b50a09"
]
上面表达式的意思是:
- get获取属性值color，小于50，颜色是
#ffd0a6 - 大于等于50，但小于100时，颜色是
#ffaa7f - 大于等于100，但小于150时，颜色是
#ff704e - 大于等于150，但小于200时，颜色是
#f04040 - 大于等于200，颜色是
#b50a09
step是起什么作用的
step译为步，一步一步就是分段的意思，它产生阶梯式结果，把一段值归为一类，小于50的是一类 ，大于等于50又小于100是一类，每一类step都会输出一个值
翻译成js是
function getColor(feature){ //feature是geojosn格式中的Feature
if(feature.properties.population<50){
return '#ffd0a6'
} else if(feature.properties.population<100){
return '#ffaa7f'
} else{
return '#b50a09'
}
}
step表达式有5个必需参数
并且不能乱序：表达式的名称、输入值、输出值、判断值，... ...，输出值（省略部分为输出值、判断值，在省略部分里如果出现了，就必须两两出现）。也就是说除了表达式的名称和输入值以外，最少还需要一个输出值、一个判断值、再加一个输出值
//必需参数
"fill-color":[
"step", //表达式的名称
["get","population"], //输入值
"#ffd0a6", //输出值 5
0, //判断值
"#b50a09" //输出值
]
step表达式写起来较为简洁，但需要注意的一点是判断值必须遵循升序规则
四、根据 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然后取余数，根据余数从颜色数组中取一个颜色
详细说明：
["get", "adcode"]表达式get从数据中获取adcode属性的值["%", ["get", "adcode"], 13]表达式%将adcode的值除以13并取余数，这里的13代表颜色数组的个数["literal",["#00FFCC",...]]表达式literal用来声明一个颜色数组，因为在这里中括号被默认是表达式，所以想要定义真正的数组就要用literal包装一下["at",["%", ["get", "adcode"], 13],["literal","#00FFCC",...]]表达式at是根据求余的值从颜色数组中取颜色["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 中，表达式是不支持直接在界面上选颜色的，只能自己编辑
这种方式的缺点也很明显：图层由一个变成了多个，style 对象会很臃肿，图层管理不太方便
