1.效果

---

2.实现

  2.1 分级色彩

       分级色彩是在GIS制图中，通过不同颜色等级来表示数据量级差异的符号化方法，帮助用户直观识别和比较数据的大小。

---

  2.2 分级方法 

       在GIS中进行分级色彩制图时，可以选择不同的分级方法来表示数据的分布和变化，常见的分级方法如相等间隔、标准差、自然间断点等；

       本章节主要采用自然间断点法进行分级色彩制图，该分级方法的优势在于当数据分布不均匀时，可以更好地显示数据的分布特征。

     为了让大家好理解，我使用ArcMap软件加载图层，采用自然间断点分级法，对图层进行符号化；在上图中可以看到，系统自动计算了每个分级的数值范围，且被分为5级，每个值范围被分配不同的颜色。接下里我们将在前端中渲染地图，实现该专题制图效果。

---

  2.3 simple-statistics 库

simple-statistics 是一个用JavaScript实现的统计方法库，它提供了描述性统计、回归分析和推断统计等功能。这个库设计简洁，易于理解和使用，适合在各种项目中进行数据分析，尤其是在前端开发和数据可视化中。simple-statistics 可以帮助开发者和统计学家快速计算基本的统计量，如平均值、中位数、众数、方差、标准偏差等，并且可以集成到现代浏览器和Node.js环境中

    2.3.1 安装

     npm：

npm install --save simple-statistics

      cdn：

https://unpkg.com/simple-statistics@7.8.3/dist/simple-statistics.min.js

    2.3.2 文档 

官方文档http://simple-statistics.github.io/docs/

    2.3.3 计算自然间断点

    以下示例为vue框架引入simple-statistics库，使用 jenks方法计算自然间断点，且分为五级。其中， jenks方法接受两个参数，第一个参数接受一个数组，数组为待分类的值，第二个参数接受一个Number，表示要分几级。

// vue 引入JS
import * as ss from "simple-statistics";

// 计算自然间断点
const breaks = ss.jenks(data, 5);

    为了让大家好理解，我把 data 和计算结果 breaks 截图给大家展示一下：

    2.3.4 补充一点

       看到这里大家应该会有一个疑惑，data是咋得到的，我来将一个大致思路，同时贴出部分源码截图。这里不讲解如何使用arcgis api，有需要的可以查看相关文章。

       当地图数据准备好时，先添加进地图中，接下来使用queryFeatures方法对图层进行查询，目的是查询图层中的属性，因为分级渲染是根据图层中的某个属性值进行渲染的。将图层中的目标值通过循环遍历添加入data数组中。

---

  2.4 分级渲染

关于在arcgis api4.x中采用renderer对图层进行分级渲染的方法，我也发布过相关文章，下面贴出了链接；接下来就只需要拿出计算后的字段间断点，依次作为每一种颜色渲染的条件(minValue—maxValue内都渲染成预定颜色)。

分级色彩渲染https://blog.csdn.net/no_money000/article/details/141332038

---

（有不懂的欢迎评论区讨论，如果文章对你有帮助，可以点个赞鼓励下博主噢！）