maptalks.three HeatMap 教程三步生成一张炫酷3D热力图【免费下载链接】maptalks.threeA maptalks layer to render with three.js.项目地址: https://gitcode.com/gh_mirrors/ma/maptalks.threemaptalks.three 是一个基于 maptalks three.js 的 WebGL 地图图层库内置的HeatMap热力图能力可以让你用不到 10 行代码把一批「经纬度 权重」的点数据渲染成一张漂浮在地图上的 3D 热力图 ️。本教程面向新手三步完成安装 → 准备数据 → 一行 toHeatMap 出图最后再分享几个让热力图更炫酷的进阶技巧。上面的效果就是官方示例heatmap的真实截图——深色底图上一张按蓝→绿→黄→红渐变的 3D 热力图还能随手调整海拔高度与纵向拉伸比例。什么是 maptalks.three简单说maptalks.three 把 three.js 的 3D 渲染能力「装」进了 maptalks 地图里。你不需要自己管理相机、坐标转换和渲染循环库会自动把经纬度坐标换算成 3D 场景坐标让热力图、挤出建筑、3D 轨迹等元素跟随地图的缩放、旋转、俯仰无缝联动。核心入口是一个ThreeLayer图层本文用到的热力图就挂在它上面。第一步安装 maptalks.three热力图依赖maptalks、three和maptalks.three三个包用包管理器一次性装好npm i maptalks three maptalks.three 安装细节与版本兼容性说明比如 three.js 建议锁定 ≥138 的版本可参考官方安装文档 docs/start/install.md。装完后引入库并创建地图与 ThreeLayerimport maptalks from maptalks; import maptalksThree from maptalks.three; const map new maptalks.Map(map, { center: [114.0097, 22.5357], zoom: 14, pitch: 60 }); const threeLayer new maptalksThree.ThreeLayer(three-layer); map.addLayer(threeLayer);到这一步3D 渲染的「舞台」就搭好了。第二步准备热力图点数据toHeatMap需要一组点数据每个点长这样const data [ { coordinate: [114.0097, 22.5357], count: 40 }, { coordinate: [114.0101, 22.5361], count: 25 }, { coordinate: [114.0105, 22.5349], count: 70 }, // ... 更多点位 ];两个字段含义很直观coordinate点的经纬度[lng, lat]也兼容lnglat、xy字段名类型定义见 src/type/BaseOption.tscount点的权重/强度数值越大该处的热力越「浓」你的数据通常来自 CSV、GeoJSON 或接口只要统一转换成{ coordinate, count }数组即可几万条数据也完全没问题。第三步一行 toHeatMap 生成 3D 热力图主角登场 调用threeLayer.toHeatMap(data, options, material)创建热力图对象再addMesh挂到图层上就渲染出来了// 热力图材质透明 基础光照即可 const material new THREE.MeshBasicMaterial({ transparent: true }); const heatmap threeLayer.toHeatMap( data, { gridScale: 10, // 网格精细度越大越细腻 size: 4, // 单点热力扩散半径 gradient: { // 颜色渐变从冷色到热色 0.25: rgb(0,1,200), 0.55: rgb(0,255,0), 0.85: yellow, 1.0: rgb(255,0,0) } }, material ); threeLayer.addMesh(heatmap);就是这么简单——三步走完热力图已经躺在地上了内部原理供好奇的同学库先把所有点按权重画到一张灰度 Canvas 上见 src/util/heatmap/HeatMapUtil.ts再按gradient把灰度映射成颜色最后生成一个按顶点着色的平面网格铺在地图坐标上核心逻辑都在 src/HeatMap.ts 中。进阶让热力图更炫酷的 3 个技巧技巧 1调整海拔让热力图「飘」起来toHeatMap支持altitude参数给热力图一个离地高度避免贴地发闷const heatmap threeLayer.toHeatMap(data, { altitude: 100, /* ... */ }, material);技巧 2纵向拉伸制造「热浪」体积感拿到热力图对象后可以直接操作它底层的 three.js 对象把 Z 轴放大几倍热力图立刻有了厚度heatmap.getObject3d().scale.z 2;官方演示里就是这个操作让热力图看起来像一团起伏的热浪配合 60° 俯视角非常出片。技巧 3用 gradient 换一套配色gradient就是一个「0~1 区间 → 颜色」的映射改成暖色系gradient: { 0: rgba(255,200,0,0), 0.5: orange, 1: rgb(255,0,0) }还可以配合min/max参数控制权重映射范围默认 0~100让颜色分布更贴合你的数据量级。遇到问题看官方热力图示例仓库里自带一个完整可交互的热力图示例包含数据加载、实时调节颜色/海拔/拉伸、Stats 帧率面板等强烈建议跑起来对照本文示例页面demo/heatmap.htmlAPI 文档docs/api/threelayer.md搜索toHeatMap小节参数速查表参数默认值作用gridScale0.5网格精细度越大越细腻受 2048 画布上限约束size13单点热力的扩散半径gradient蓝→绿→黄→红权重到颜色的渐变映射min/max0 / 100count 的映射范围altitude0热力图的海拔高度 默认值来源见 src/HeatMap.ts遇到渲染过糊/过锐时优先调gridScale和size这两个参数。小结回顾一下用 maptalks.three 做 3D 热力图只要三步安装npm i maptalks three maptalks.three备数据整理成{ coordinate, count }数组出图threeLayer.toHeatMap(data, options, material)addMesh再配上altitude、scale.z、gradient三个进阶旋钮一张既能跟地图联动、又足够炫酷的 3D 热力图就完成了。接下来可以看看仓库里的其他几何体示例挤出线、挤出面、FatLine 等把 3D 地图玩出更多花样 【免费下载链接】maptalks.threeA maptalks layer to render with three.js.项目地址: https://gitcode.com/gh_mirrors/ma/maptalks.three创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考