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 相似,但在写法上更为简洁
...