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.进行地图叠加

相关推荐
用户0333074139512 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey12 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒13 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员13 小时前
iOS冷启动监控Demo
前端
光影少年13 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱14 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO14 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天14 小时前
趋势过滤:避免被“假突破“反复打脸
前端
8年区块链老兵14 小时前
一篇文章教会你:用区块高度读懂比特币链上的每一笔交易
前端
xixichensh15 小时前
前端转做AI程序员第一步——开发一个AI流式对话Demo
前端