turf.js 的 web worker 多线程

WangShan010

已于 2022-06-24 14:03:32 修改

阅读量329

点赞数 1

分类专栏：个人作品文章标签： git webgl javascript

于 2022-06-24 13:54:19 首次发布

本文链接：https://blog.csdn.net/qq_38956940/article/details/125443997

版权

个人作品专栏收录该内容

4 篇文章 0 订阅

订阅专栏

turf-async

turfAsync 使 Turf 可以在 Web Worker 中运行，避免计算量较大时造成页面阻塞卡死。

Turf 仓库：https://github.com/Turfjs/turf
turf-async 仓库：https://github.com/WangShan010/turf-async

如果觉得对您有帮助或启发，请给我的 turf-async 点一个 star 非常感谢！！

1、适用场景

本项目将 Turf 的全部运算函数封装到了 多线程 中，全局使用 async/await 进行调用，如果计算错误，则返回 null 。

引入 turfAsync 的同时，也会在全局 windows 引入 turf (V6.5.0)。
turfAsync 的 API 与 turf 完全一致，例如 turf. distance() 与 turfAsync.distance() 相同。
可以将计算量较大的计算单元使用 turfAsync 替代 turf，运算耗时相差无几。

示例：对 2.2MB 的中国边界进行缓冲区分析时，turf 会造成页面卡死无响应近 7秒，用户体验极差。换成 turfAsync ，可完美解决这个问题。
在线演示：
- 中国边界缓冲区分析：大计算量

注意：

在项目使用中，turfAsync 应按需使用，不建议完全替换 Turf。

众所周知，多线程的通信是存在性能损耗的（虽然单次通信的延迟 1ms 都不到）。但如果单个计算单元的运算量非常小，而过于频繁调用多线程通讯，反而会造成耗时增加。

示例：例如遍历求算 10000 次多段线的长度求和，turf.js 耗时 15ms，turfAsync 耗时 1131ms。
在线演示：
- 一万次线要素长度求和：多线程通信性能损耗

2、使用方式

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./turf-async/index.js"></script>
</head>
<body>
<script>
    async function main() {
        // 第一次使用时，需要初始化多线程，这一步是必要的！
        await turfAsync.init();
        let point = await turfAsync.point([-75.343, 39.984]);
        console.log(point);
    }
    main();
</script>
</body>
</html>