mapboxgl 地图样式 - 重分类渲染

GIS兵器库

已于 2022-02-14 17:28:35 修改

阅读量1.8k

点赞数

分类专栏： mapboxgl 文章标签： mapboxgl GIS 前端

于 2022-02-09 17:33:12 首次发布

本文链接：https://blog.csdn.net/gisarmory/article/details/122846559

版权

mapboxgl 专栏收录该内容

11 篇文章 15 订阅

订阅专栏

本文介绍了MapboxGL中三种实现重分类渲染的方法：step表达式、case表达式和分图层设置。step表达式通过设定判断值产生阶梯式颜色效果，适合按区间重分类；case表达式类似JavaScript的if判断，灵活性高但较繁琐；分图层设置利用filter筛选，可直接在Maputnik中调色但图层管理不便。推荐使用step表达式进行重分类渲染。

摘要由CSDN通过智能技术生成

上回，我们在《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
  }
}