【数据可视化】Arcgis api 4.x 专题图制作之分级色彩,采用自然间断法(使用simple-statistics JS数学统计库生成自然间断点)

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/[email protected]/dist/simple-statistics.min.js

2.3.2 文档

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

2.3.3 计算自然间断点

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

javascript 复制代码
// vue 引入JS
import * as ss from "simple-statistics";
javascript 复制代码
// 计算自然间断点
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


(有不懂的欢迎评论区讨论,如果文章对你有帮助,可以点个赞鼓励下博主噢!)

相关推荐
阳树阳树1 小时前
signal-新的状态管理模式
前端·javascript
__不想说话__2 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
Mintopia3 小时前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise5203 小时前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖3 小时前
初始化项目前的准备
前端·javascript·vue.js
Mintopia3 小时前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam3 小时前
OpenLayers:封装Overlay的方法
前端·javascript
码视野3 小时前
基于SpringBoot的河道水情大数据可视化分析平台设计与实现(源码+论文+部署讲解等)
spring boot·后端·物联网·信息可视化·论文·本科毕业论文·计算机专业毕业论文
Json_3 小时前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺3 小时前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript