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表達式語法規則：

"step"是表達式的名稱
["get","adcode"]是輸入值，必須為數值類型或者是數值表達式
"#ffd0a6"是輸出值
50是判斷值
...（根據實際情況兩兩出現的輸出值、判斷值）
"#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