三维热力图插值 - Rust + WASM 实现

这个项目将 Python 的三维插值功能转换为 Rust 实现，并编译为 WebAssembly (WASM) 模块，可以在浏览器中高性能运行。

项目特性

• 🚀 高性能：使用 Rust 实现，比 Python 版本更快
• 🌐 浏览器兼容：编译为 WASM，可在任何现代浏览器中运行
• 📊 三维插值：使用反距离加权插值 (IDW) 算法
• 💾 JSON 接口：简单的 JSON 输入/输出格式
• 🔄 实时计算：支持实时插值计算和结果展示

项目结构

heatmap-points-wasm/
├── src/
│   ├── lib.rs              # WASM 库入口和导出函数
│   ├── main.rs             # Rust 可执行文件入口
│   └── interpolation.rs    # 核心插值算法实现
├── pkg/                    # WASM 编译输出目录
│   ├── heatmap_points_wasm.js
│   ├── heatmap_points_wasm_bg.wasm
│   └── *.d.ts              # TypeScript 类型定义
├── Cargo.toml              # Rust 项目配置
├── test.html               # 浏览器测试页面
├── main.py                 # 原始 Python 实现（参考）
└── README.md               # 项目文档

环境要求

基础要求

• Rust >= 1.70.0
• Node.js >= 14 (用于运行 HTTP 服务器)

安装 Rust

# 安装 Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env

# 添加 WASM 编译目标
rustup target add wasm32-unknown-unknown

# 安装 wasm-bindgen CLI 工具
cargo install wasm-bindgen-cli

构建项目

1. 构建 Rust 可执行文件

# 编译并运行本地版本
cargo run --bin main

这将：

• 执行三维插值计算
• 输出插值结果统计信息
• 生成 interpolated_point_cloud.json 文件

2. 构建 WASM 模块

# 编译为 WASM
cargo build --target wasm32-unknown-unknown --release

# 生成 JavaScript 绑定
wasm-bindgen --out-dir pkg --web target/wasm32-unknown-unknown/release/heatmap_points_wasm.wasm

# 打npm包
wasm-pack build

# 发布
cd pkg
npm publish --access public --registry https://registry.npmjs.org

使用方法

方法一：浏览器测试

1. 启动本地 HTTP 服务器：

# 使用 Node.js
npx http-server -p 8000

# 或使用 Python
python -m http.server 8000

2. 打开浏览器访问：http://localhost:8000/test.html

3. 在测试页面中：

   • 左侧输入 JSON 格式的三维点数据
   • 点击"执行三维插值"按钮
   • 查看右侧的插值结果和统计信息

方法二：JavaScript 集成

import init, { interpolate_wasm } from './pkg/heatmap_points_wasm.js';

async function runInterpolation() {
    // 初始化 WASM 模块
    await init();
    
    // 准备输入数据
    const inputData = [
        {"x": 117.224793, "y": 31.826156, "z": 146.9, "value": 10},
        {"x": 117.225075, "y": 31.826087, "z": 146.7, "value": 20},
        // ... 更多数据点
    ];
    
    // 执行插值
    const result = interpolate_wasm(JSON.stringify(inputData));
    const interpolatedData = JSON.parse(result);
    
    console.log(`插值点数: ${interpolatedData.length}`);
    console.log('插值结果:', interpolatedData);
}

runInterpolation();

数据格式

输入格式

[
    {
        "x": 117.224793,    // X 坐标
        "y": 31.826156,     // Y 坐标  
        "z": 146.9,         // Z 坐标
        "value": 10         // 插值
    }
    // ... 更多数据点
]

输出格式

[
    {
        "x": 117.224726,    // X 坐标
        "y": 31.826087,     // Y 坐标  
        "z": 52.0,          // Z 坐标
        "value": 10.0       // 插值后的值
    },
    {
        "x": 117.224750,
        "y": 31.826091,
        "z": 52.327,
        "value": 15.2
    }
    // ... 更多插值点
]

算法说明

项目使用反距离加权插值 (Inverse Distance Weighting, IDW) 算法：

• 网格生成：在输入数据的边界范围内生成 30×30×30 的规则网格
• 距离计算：计算每个网格点到所有输入点的欧氏距离
• 权重计算：使用 weight = 1 / distance² 公式计算权重
• 值插值：根据权重对邻近点的值进行加权平均

性能对比

| 实现方式 | 输入点数 | 输出点数 | 处理时间 | 内存使用 | |---------|---------|---------|---------|---------| | Python (SciPy) | 15 | ~8,000 | ~100ms | ~50MB | | Rust (本地) | 15 | 27,000 | ~10ms | ~5MB | | WASM (浏览器) | 15 | 27,000 | ~20ms | ~3MB |

故障排除

常见问题

1. WASM 模块加载失败

   • 确保通过 HTTP 服务器访问，不能直接打开 HTML 文件
   • 检查浏览器控制台的 CORS 错误

2. wasm-bindgen 命令找不到

   cargo install wasm-bindgen-cli

3. 编译错误

   # 更新 Rust 和依赖
   rustup update
   cargo update

开发调试

启用详细日志：

import init, { interpolate_wasm } from './pkg/heatmap_points_wasm.js';

async function debug() {
    await init();
    
    // 浏览器控制台会显示详细的计算过程
    const result = interpolate_wasm('[]'); // 测试空输入
}

扩展功能

自定义插值参数

可以修改 src/interpolation.rs 中的参数：

• grid_size: 网格密度 (默认 30)
• power: IDW 幂参数 (默认 2.0)

添加其他插值算法

在 interpolation.rs 中可以添加：

• 线性插值
• 样条插值
• 克里金插值

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！