等值线图以及色斑图实现方式综述

JavaScript014

等值线图以及色斑图实现方式综述,第1张

修改于2021/1/10

通用的方式是基于Java + Geotools + wContour在服务端处理数据,适用业务如下:

服务器端负责上色、出图,前端负责叠加图片展示。气象数据需要通过鼠标坐标值在服务器端获取或者通过图片像素点颜色与颜色表映射得到。缺点是不利于客户端颜色表动态设置与数据过滤。

服务器端负责生成灰度图,前端根据颜色表上色,鼠标移动可通过灰度值直接读取气象数据。方便客户端颜色表动态设置与数据过滤。

服务器端负责生成GeoJSON格式数据,前端生成对应的几何图形,并根据颜色表进行颜色渲染,可通过矢量数据的属性获取气象数据。方便客户端颜色表动态设置与数据过滤。

通用的方式是前端插值处理数据,生成网格数据,再进行等值线或等值面的生成,适用业务如下:

完全使用turf.js内置函数通过离散点插值、等值面绘制、裁剪,生成矢量数据然后绘制数据。实现简便且显示效果好,但存在以下问题:

参考文档

使用kriging.js内置的函数,离散点生成网格数据然后网格渲染。实现简便且插值效果好,但性能上存在问题:

参考文档

结合turf.js和kriging.js两者的优点,提升交互性能、插值效果和显示效果。具体实现步骤如下:

    在不同纬度的地区使用等面积、等形状的六边形地理单元可以减少指标和特征 normalization的成本。另一方面,在常用的地理范围查询中,基于矩形的查询方法,存在 8 邻域到中心网格的距离不相等的问题,四边形存在两类长度不等的距离,而六边形的周围邻居到中心网格的距离却是有且仅有一个,从形状上来说更加接近于圆形。

所以,基于 hexagon 的地理单元已经成为各大厂家的首选,比如 Uber 和 Didi 的峰时定价服务。

    使用turf.js计算一个500m的近似圆,然后取出圆的坐标,使用H3填充几何体

    通过已知的六边形H3字符串搜索周边的六边形

    有时我们会觉得产生的六边形太多,可以使用压缩,这样能大大减少六边形数量,本例中H3索引数量压缩前2110,但是压缩后只有208

    合并h3索引集返回geojson的ring

https://zhuanlan.zhihu.com/p/60861179

https://blog.csdn.net/allenlu2008/article/details/103029132

https://www.sohu.com/a/294377304_326074

https://github.com/uber/h3-js

http://lihuia.com/h3%ef%bc%9a%e4%bc%98%e6%ad%a5%e7%9a%84%e5%85%ad%e8%be%b9%e5%bd%a2%e5%b1%82%e7%ba%a7%e7%a9%ba%e9%97%b4%e7%b4%a2%e5%bc%95/

https://cosx.org/2019/01/deck-gl-and-h3/

    最近维护老项目,有个路径回放的功能,写的比较复杂,现在只要比较简单就能做好,只要使用turf.js的lineChunk就可以了,愉快的结束本篇水文.

    以下都是水字数

    生成线段,使用turf.lineChunk跟据turf.length来分割成定长线段,计算线段的范围好缩放至线段附近

    使用定时器来j进行数据修改,通过不停的修改几何数据,当开始是绘制一个线段,后面修改几何插入新的线段,让人有种动画的感觉.

ArcGIS JS API 4.18

ArcGIS JS API 3.35

参考资料:

https://turfjs.fenxianglu.cn/category/misc/lineChunk.html