关于mapbox:mapboxgl-地图样式-重分类渲染

上回，咱们在《mapboxgl 地图款式 – 惟一值渲染》中理解到 case、match、get 等表达式，通过表达式来实现了惟一值渲染。

在理论状况下，咱们还常常须要进行重分类渲染，将某范畴的值重分为一类，并将另一个范畴重分为其它类。

明天咱们持续理解新的表达式来实现重分类渲染。

重分类效果图：

形式一：应用 step 表达式

"fill-color":[
    "step",
    ["get","population"],
    "#ffd0a6", 50,
    "#ffaa7f", 100, 
    "#ff704e", 150, 
    "#f04040", 200, 
    "#b50a09"
]

下面表达式的意思是：

• get 获取属性值 population，小于 50，色彩是#ffd0a6
• 大于等于 50，但小于 100 时，色彩是#ffaa7f
• 大于等于 100，但小于 150 时，色彩是#ff704e
• 大于等于 150，但小于 200 时，色彩是#f04040
• 大于等于 200，色彩是#b50a09

看到这里是不是奇怪 step 是起什么作用的？step 译为步，一步一步就是分段的意思，它产生阶梯式后果，把一段值归为一类，小于 50 的是一类，大于等于 50 又小于 100 是一类，每一类 step 都会输入一个值，在效果图中展现为 50 万人口以下地区是一个色彩，大于等于 50 又小于 100 万人口区间的地区为另一个色彩。

咱们在下篇渐变色渲染的文章中将会理解 interpolate 表达式，与 step 表达式产生的阶梯式后果相同，interpolate 表达式将会产生间断后果。

翻译成 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 表达式语法规定：

1. "step"是表达式的名称
2. ["get","adcode"]是输出值，必须为数值类型或者是数值表达式
3. "#ffd0a6"是输入值
4. 50是判断值
5. …（依据理论状况两两呈现的输入值、判断值）
6. "#b50a09"是输入值

step 表达式有 5 个必须参数，并且不能乱序：表达式的名称、输出值、输入值、判断值，… …，输入值（省略局部为 输入值、判断值，在省略局部里如果呈现了，就必须两两呈现）。也就是说除了表达式的名称和输出值以外，起码还须要一个输入值、一个判断值、再加一个输入值。

// 必须参数
"fill-color":[
    "step", // 表达式的名称
    ["get","population"], // 输出值
    "#ffd0a6",  // 输入值
    50, // 判断值
    "#b50a09" // 输入值
]

step 表达式写起来较为简洁，但须要留神的一点是 判断值必须遵循升序规定。

在线示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleReclass2

形式二：应用 case 表达式

case 表达式相似 js 里的 if 判断语句。表达式的实现成果比拟依赖于属性值，通常咱们先应用 get 表达式 去获取属性值，再去判断这个属性值，以此达到在同一图层上实现不同的展现成果。

"fill-color":[
    "case",
    ['boolean',['<',["get","population"],50]],"#ffd0a6",
    ['boolean',['<',["get","population"],100]],"#ffaa7f",
    ['boolean',['<',["get","population"],150]],"#ff704e",
    ['boolean',['<',["get","population"],200]],"#f04040",
    '#b50a09'
]

下面表达式的意思是：

• t 获取属性值 population，小于 50，色彩是#ffd0a6
• 大于等于 50，但小于 100 时，色彩是#ffaa7f
• 大于等于 100，但小于 150 时，色彩是#ff704e
• 大于等于 150，但小于 200 时，色彩是#f04040
• 大于等于 200，色彩是#b50a09

在线示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleReclass1

翻译成 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'}
}

case 表达式写起来较为繁琐，但它对判断值没有升序这种要求，只有是 true 或 false 就行了。

形式三：分图层设置

{
    "id": "beijing200plus",
    "type": "fill",
    "source": "beijing",
    "paint":{"fill-color":"#b50a09"},
    "filter":['>=',["get","population"],200]
},
{
    "id": "beijing200",
    "type": "fill",
    "source": "beijing",
    "paint":{"fill-color":"#f04040"},
    "filter":['all',['<',["get","population"],200],['>=',["get","population"],150]]
},
{
    "id": "beijing150",
    "type": "fill",
    "source": "beijing",
    "paint":{"fill-color":"#ff704e"},
    "filter":['all',['<',["get","population"],150],['>=',["get","population"],100]]
},
{
    "id": "beijing100",
    "type": "fill",
    "source": "beijing",
    "paint":{"fill-color":"#ffaa7f"},
    "filter":['all',['<',["get","population"],100],['>=',["get","population"],50]]
},
{
    "id": "beijing50",
    "type": "fill",
    "source": "beijing",
    "paint":{"fill-color":"#ffd0a6"},
    "filter":['<',["get","population"],50]
}

分图层是应用 filter 筛选实现，下面代码里呈现了新的表达式 all，all 表达式相当于 js 里的&&，当他前面的参数都为 true 就会返回 true，否则返回 false，咱们举个例子：

"filter":['all',['<',["get","population"],200],['>=',["get","population"],150]]

翻译成 js 是：

function getFilter(feature){  //feature 是 geojosn 格局中的 Feature
  if(feature.properties.population<200 && feature.properties.population>=150){return true}else{return false}
}

filter 分图层能够在 maputnik 中间接调色彩，然而图层会变多，不方便管理。

在线示例：http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleReclass3

最初小结：

1. case 和 filter 的长处都是绝对于 step 而言的，而且 case 和 filter 写起来都防止不了繁琐这一点。
2. 仅从“重分类”概念的角度来说，最合适的表达式是 step，它自身产生分段式后果会更符合“重分类”这一概念。
3. case 和 filter 更适宜作为一种“补充”，在某些状况下应用。因为它们并不要求判断值必须升序，更为灵便。
4. 在 mapbox 里重分类更举荐应用 step 表达式，case 表达式和 filter 分图层能够作为补充办法来理解。

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

欢送关注《GIS 兵器库》

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