leaftjs+turfjs+idw纯前端实现等值面绘图

最近有个绘制等值面图的需求。我们一般的实现路径是:

1.后台绘图,用surfer绘制好,给前端调用叠加到地图。

2.后台用python绘图,绘制好给前端调用,叠加到地图。

3.后台进行插值计算、地图裁剪、最终生成geojson文件或kml给地图,前端做叠加操作。

4.数据查出来全扔给前端利用canvas绘等值面图,叠加到地图。

5.前端用turf绘制等值面。

6.直接后端计算好发布图层服务,或者直接将等值面图做成瓦片服务。

目前从效果来看,6效果最好,但实现难度较大;1和2绘制完成后前端叠加地图不能完全重合,可能也更坐标系有关,放大后锯齿感明显;3是比较兼顾的做法,4在前端做克里金或idw简直要命,感觉电脑都能跑报废了。下面是idw插值0.5度的效果。勉强3s以内可以出来。要做10*10公里基本就卡死了。

下面说一下实现步骤:

1.获取数据

2.清洗成格点数据。

3.进行插值计算、参数训练

4.等值面绘制

5.获取边界数据

6.进行边界裁剪

7.进行地图叠加

相关推荐
浩瀚之水_csdn1 天前
python字符串解析
前端·数据库·python
全栈小51 天前
【前端】在JavaScript中,=、==和===是三种不同的操作符,用途和含义完全不同,一起瞧瞧
开发语言·前端·javascript
如果你好1 天前
Vue createRenderer 自定义渲染器从入门到实战
前端·javascript·vue.js
温宇飞1 天前
Web 图形合成技术:Blending 与 Porter-Duff Compositing
前端
小高0071 天前
读懂 Tailwind v4:为什么它是现代前端项目的必选项?
前端·javascript·vue.js
我的golang之路果然有问题1 天前
python中 unicorn 热重启问题和 debug 的 json
java·服务器·前端·python·json
SpringLament1 天前
从零打造AI智能博客:一个项目带你入门全栈与大模型应用开发
前端·aigc
晴虹1 天前
lecen:一个更好的开源可视化系统搭建项目--数据、请求、寄连对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
前端·后端·低代码
MOON404☾1 天前
004.漏洞分析与利用
前端·网络·网络安全·系统安全·firefox
kylezhao20191 天前
C#根据时间加密和防止反编译
java·前端·c#