deck.gl HeatmapLayer 入门实战基于 React 与 MapLibre 构建 Uber 出行热力图【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl本指南以仓库中的最小独立示例 examples/website/heatmap 为核心完整讲解如何在 React Vite 项目中用deck.gl/aggregation-layers的HeatmapLayer渲染空间分布热力图从工程搭建、数据格式、图层参数调优到 GPU 聚合的底层原理与平台限制。读完本文你将能够独立复制该示例、替换自己的数据集并针对radiusPixels、intensity、threshold、colorDomain等关键参数做出符合场景的取舍。示例概览一个最小可运行的 HeatmapLayer 应用examples/website/heatmap是 deck.gl 官网上 HeatmapLayer 示例的最小独立版本README 首句即说明 This is a minimal standalone version of the HeatmapLayer example。整个示例只包含 5 个文件文件作用app.tsxReact 组件组装DeckGL、HeatmapLayer与底图index.htmlHTML 入口挂载#app根节点并加载 MapLibre CSSpackage.json依赖与启动脚本vitetsconfig.jsonTypeScript 编译配置README.md用法说明本文所依据的主文档示例展示的是纽约市 Uber 打车点位的空间分布热力图数据来源为 FiveThirtyEight 的公开响应数据底图由 CARTO 免费底图服务提供。它演示了 heatmap 场景中最典型的组合方式聚合图层HeatmapLayer 矢量底图MapLibre GL React 集成deck.gl/react。快速运行三步启动示例按照 README.md 的指引将该文件夹内容复制到你的项目中然后执行# 安装依赖 npm install # 或使用 yarn yarn # 使用 vite 打包并启动开发服务器 npm startnpm start实际执行的是vite --open见 package.json启动后会自动打开浏览器加载应用。Vite 自带热更新修改app.tsx后页面会即时刷新非常适合边调参数边看效果。项目还提供了两个额外脚本npm run start-local # 使用仓库根目录的 vite.config.local.mjs便于在 monorepo 内调试本地源码 npm run build # 执行 vite build产出生产构建依赖清单package.json 中声明的核心依赖如下版本以当前仓库为准deck.gl^9.0.0聚合包其中包含deck.gl/aggregation-layersdeck.gl/react随 deck.gl 9.x 提供React 绑定提供DeckGL组件react/react-dom^18.0.0React 运行时react-map-gl^8.0.0React 版 MapLibre/Mapbox 封装maplibre-gl^5.0.0MapLibre GL 引擎typescript^4.6.0与vite^7.3.3开发与构建工具注意仓库为 monorepo 结构若想直接引用本地源码进行调试可运行npm run start-local它会读取仓库根目录下的 vite.config.local.mjs 完成模块别名解析。数据格式position weight 的点集HeatmapLayer的输入是带权重的空间点集合。每个数据对象只需提供两个信息位置position由getPosition访问器返回通常为[经度, 经度]的经纬度数组权重weight由getWeight访问器返回表示该点对热力值的贡献量默认为1。示例使用远程 JSON 数据见 app.tsxconst DATA_URL https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/uber-pickup-locations.json;示例中还通过 TypeScript 类型明确了数据形态app.tsxtype DataPoint [longitude: number, latitude: number, count: number];即每个元素是一个三元组[经度, 纬度, 上车点数量]其中第三个值正是热力图的权重来源。接入你自己的数据更换数据只需做两件事替换dataApp组件的data属性既可接收 URL 字符串内部自动加载也可直接传入DataPoint[]数组见 app.tsx 的类型定义对齐访问器根据你的数据字段改写getPosition与getWeight例如const layers [ new HeatmapLayerMyRecord({ data: myRecords, getPosition: (d: MyRecord) d.coordinates, // 返回 [lng, lat] getWeight: (d: MyRecord) d.value, // 返回数值权重 radiusPixels: 30, intensity: 1, threshold: 0.03 }) ];关于 HeatmapLayer 全部属性与数据访问器的权威说明可查阅 docs/api-reference/aggregation-layers/heatmap-layer.md。核心实现剖析从入口到图层配置app.tsx 是示例的完整实现整体结构如下const INITIAL_VIEW_STATE: MapViewState { longitude: -73.75, // 纽约市中心 latitude: 40.73, zoom: 9, maxZoom: 16, pitch: 0, bearing: 0 }; const MAP_STYLE https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json; export default function App({ device, data DATA_URL, intensity 1, threshold 0.03, radiusPixels 30, mapStyle MAP_STYLE }) { const layers [ new HeatmapLayerDataPoint({ data, id: heatmap-layer, pickable: false, getPosition: d [d[0], d[1]], getWeight: d d[2], radiusPixels, intensity, threshold }) ]; return ( DeckGL device{device} initialViewState{INITIAL_VIEW_STATE} controller{true} layers{layers} Map reuseMaps mapStyle{mapStyle} / /DeckGL ); }几个值得注意的要点DeckGL组件来自deck.gl/react通过initialViewState设定初始相机controller{true}开启平移/缩放交互layers传入图层实例Map子组件来自react-map-gl/maplibrereuseMaps允许 DeckGL 与 MapLibre 共享同一 canvas 渲染管线mapStyle指定 CARTO 的 dark-matter 无标签样式device属性luma.gl/core的Device类型可选传入用于在宿主应用中共享 GPU 设备示例index.html的挂载脚本会调用renderToDOM完成渲染见 index.html。图层属性精讲把热力图调到恰到好处示例将radiusPixels、intensity、threshold暴露为组件的可调参数下面结合 heatmap-layer.md 与 heatmap-layer.ts 的默认值逐一说明。radiusPixels热力晕圈半径默认值30文档源码默认50示例传 30含义单个数据点权重所分布到的圆形区域的像素半径。半径越大热力点越晕开反之越尖锐。源码约束{type: number, min: 1, max: 100, value: 50}即合法范围 1–100。intensity强度缩放默认值1含义与像素处总权重相乘得到最终权重的乘数。大于 1 会把输出颜色向色谱高端更热偏移小于 1 则向低端偏移。适合场景数据整体权重偏低或偏高时用intensity做全局亮度补偿示例默认取1。threshold边缘淡出阈值默认值0.05示例取 0.03含义低权重像素透明度的削减比例。定义为淡出权重与最大权重的比值0–1例如0.1表示影响所有权重低于最大值 10% 的像素。threshold越大色块边界越平滑但低权重像素因 alpha 过低更难看清。注意当指定了colorDomain时threshold会被忽略。colorDomain颜色映射域默认值null自动含义[minValue, maxValue]二元组控制权重如何映射到colorRange。minValue对应colorRange的第一个颜色maxValue对应最后一个颜色中间线性插值低于minValue的像素逐渐淡出至全透明表示 0高于maxValue的被截断到最后一个颜色。聚合模式差异aggregation: SUM时colorDomain按每平方米权重解释MEAN时按权重解释。为何要手动指定未指定时最大值由当前视口自动决定域为[maxValue * threshold, maxValue]因此同一位置的颜色会随视口内其他数据点变化。如需稳定的颜色映射例如展示图例必须提供自定义colorDomain。aggregation聚合操作默认值SUM可选SUM/MEAN非法值回退为SUM含义决定像素颜色值的聚合方式。每个数据点的权重被分配到以该点为中心的圆形区域像素接收的权重与到中心的距离成反比SUM落入多个圆圈的像素权重为所有来源之和MEAN落入多个圆圈的像素权重为所有邻近点的加权平均。源码实现AGGREGATION_MODE {SUM: 0, MEAN: 1}heatmap-layer.ts在子图层渲染时经aggregationMode传入着色器heatmap-layer.ts。colorRange色带默认值ColorBrewer 的6-class YlOrRd黄-橙-红渐变含义热力图使用的调色板形如[color1, color2, ...]每个颜色为[r, g, b, [a]]通道值 0–255a缺省为 255。颜色数量即色带采样数中间颜色按权重线性插值。weightsTextureSize权重纹理尺寸性能关键默认值2048合法范围 128–2048含义权重纹理的大小。纹理越小渲染性能越好官方文档给出的实测参考是 2048×2048 纹理计算最大权重约需 50–100 ms而 512×512 仅需 5–7 ms代价是可见的像素化。源码细节实际纹理尺寸还会被设备上限裁剪Math.min(weightsTextureSize, device.limits.maxTextureDimension2D)heatmap-layer.ts。debounceTimeout交互防抖默认值500毫秒合法范围 0–1000含义视口变化后延迟触发重新聚合的间隔。大数据集配合大radiusPixels时交互过程中的聚合更新容易造成卡顿设置正数debounceTimeout可推迟聚合、避免冻结副作用是交互结束后需要等待片刻才能看到更新结果。源码实现_debouncedUpdateWeightmap在 zoom 变化时用setTimeout延迟debounceTimeout后强制更新权重图heatmap-layer.ts。数据访问器getPosition 与 getWeightgetPosition默认object object.position返回每个点的位置经纬度数组。getWeight默认1返回每个点的权重。不提供时所有点权重相同热力值只反映点密度。在示例中getPosition: d [d[0], d[1]]从三元组取经纬度getWeight: d d[2]取上车点数量最终热力值即某区域的上车密度。底层原理GPU 上的高斯核密度估计HeatmapLayer 与普通图层最大的不同在于聚合发生在 GPU 上。从 heatmap-layer.ts 的源码可以梳理出完整渲染管线权重图生成weights pass_createWeightsTransform创建TextureTransform把每个数据点按其radiusPixels与getWeight通过weights-vs.glsl/weights-fs.glslWebGPU 下为weights.wgsl绘制到一张权重纹理上混合模式为加法混合blendColorOperation: add从而天然实现多圆叠加求和heatmap-layer.ts最大权重归约max passmaxWeightTransform把权重纹理归约为 1×1 的 max 纹理采用blendColorOperation: max得到当前视口内的最大权重heatmap-layer.ts颜色映射triangle passTriangleLayer渲染一个覆盖视口的四边形片元着色器中结合权重纹理、max 纹理与colorTexture由colorRange生成的一维纹理见_updateColorTexture按intensity、threshold、colorDomain计算最终颜色并叠加到底图上。视口驱动的优化也体现在源码中_updateBounds会把当前屏幕四个角unproject成世界坐标计算出需要处理的可视世界边界仅对可视范围做聚合heatmap-layer.ts这正是colorDomain未指定时颜色随视口变化的原因。说明官方文档将 HeatmapLayer 描述为内部实现高斯核密度估计Gaussian Kernel Density Estimation来渲染热力图上述源码路径可以印证其 GPU 三趟weights → max → triangle的实现结构。平台限制与 WebGPU 支持HeatmapLayer 依赖 GPU 浮点纹理渲染并非所有平台都完整支持。官方文档 heatmap-layer.md 明确列出WebGPU使用实例化四边形与 16 位浮点渲染目标无需依赖 WebGL 点精灵即可保留高斯核密度估计精度源码中对应rgba16float格式与实例化属性布局heatmap-layer.ts。WebGL在主流桌面浏览器evergreen上完整支持但在iOS Safari上WebGL 上下文不支持渲染到浮点纹理图层回退到 8 位低精度模式——此时权重必须是整数且任意像素累积权重不能超过 255。判定逻辑源码通过FLOAT_TARGET_FEATURESfloat32-renderable-webgl与texture-blend-float-webgl探测能力不支持时把纹理格式降级为rgba8unorm并输出警告日志heatmap-layer.ts。因此如果你的目标平台包含 iOS 移动端需要留意权重数值范围或考虑改用 CPU 聚合的图层方案。更换底图服务示例默认使用 CARTO 免费底图服务https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json。如需替换直接修改App组件的mapStyle属性传入任意 MapLibre Style JSON 的 URL 或内联对象更完整的备选方案Mapbox、MapTiler、自定义瓦片服务等可参考仓库文档 docs/get-started/using-with-map.md 中关于其他底图服务的说明。延伸阅读完整 API 参考HeatmapLayer 官方文档图层源码modules/aggregation-layers/src/heatmap-layer/heatmap-layer.ts含 weights/max/triangle 三个 GPU pass 的 GLSL/WGSL 着色器与工具函数聚合图层总览docs/api-reference/aggregation-layers/overview.md更多同风格示例仓库 examples/website 目录下还有 screen-grid、contour、hexagon 等聚合类图层的独立示例可与本文的 HeatmapLayer 实现相互对照。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
deck.gl HeatmapLayer 入门实战：基于 React 与 MapLibre 构建 Uber 出行热力图
deck.gl HeatmapLayer 入门实战基于 React 与 MapLibre 构建 Uber 出行热力图【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl本指南以仓库中的最小独立示例 examples/website/heatmap 为核心完整讲解如何在 React Vite 项目中用deck.gl/aggregation-layers的HeatmapLayer渲染空间分布热力图从工程搭建、数据格式、图层参数调优到 GPU 聚合的底层原理与平台限制。读完本文你将能够独立复制该示例、替换自己的数据集并针对radiusPixels、intensity、threshold、colorDomain等关键参数做出符合场景的取舍。示例概览一个最小可运行的 HeatmapLayer 应用examples/website/heatmap是 deck.gl 官网上 HeatmapLayer 示例的最小独立版本README 首句即说明 This is a minimal standalone version of the HeatmapLayer example。整个示例只包含 5 个文件文件作用app.tsxReact 组件组装DeckGL、HeatmapLayer与底图index.htmlHTML 入口挂载#app根节点并加载 MapLibre CSSpackage.json依赖与启动脚本vitetsconfig.jsonTypeScript 编译配置README.md用法说明本文所依据的主文档示例展示的是纽约市 Uber 打车点位的空间分布热力图数据来源为 FiveThirtyEight 的公开响应数据底图由 CARTO 免费底图服务提供。它演示了 heatmap 场景中最典型的组合方式聚合图层HeatmapLayer 矢量底图MapLibre GL React 集成deck.gl/react。快速运行三步启动示例按照 README.md 的指引将该文件夹内容复制到你的项目中然后执行# 安装依赖 npm install # 或使用 yarn yarn # 使用 vite 打包并启动开发服务器 npm startnpm start实际执行的是vite --open见 package.json启动后会自动打开浏览器加载应用。Vite 自带热更新修改app.tsx后页面会即时刷新非常适合边调参数边看效果。项目还提供了两个额外脚本npm run start-local # 使用仓库根目录的 vite.config.local.mjs便于在 monorepo 内调试本地源码 npm run build # 执行 vite build产出生产构建依赖清单package.json 中声明的核心依赖如下版本以当前仓库为准deck.gl^9.0.0聚合包其中包含deck.gl/aggregation-layersdeck.gl/react随 deck.gl 9.x 提供React 绑定提供DeckGL组件react/react-dom^18.0.0React 运行时react-map-gl^8.0.0React 版 MapLibre/Mapbox 封装maplibre-gl^5.0.0MapLibre GL 引擎typescript^4.6.0与vite^7.3.3开发与构建工具注意仓库为 monorepo 结构若想直接引用本地源码进行调试可运行npm run start-local它会读取仓库根目录下的 vite.config.local.mjs 完成模块别名解析。数据格式position weight 的点集HeatmapLayer的输入是带权重的空间点集合。每个数据对象只需提供两个信息位置position由getPosition访问器返回通常为[经度, 经度]的经纬度数组权重weight由getWeight访问器返回表示该点对热力值的贡献量默认为1。示例使用远程 JSON 数据见 app.tsxconst DATA_URL https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/screen-grid/uber-pickup-locations.json;示例中还通过 TypeScript 类型明确了数据形态app.tsxtype DataPoint [longitude: number, latitude: number, count: number];即每个元素是一个三元组[经度, 纬度, 上车点数量]其中第三个值正是热力图的权重来源。接入你自己的数据更换数据只需做两件事替换dataApp组件的data属性既可接收 URL 字符串内部自动加载也可直接传入DataPoint[]数组见 app.tsx 的类型定义对齐访问器根据你的数据字段改写getPosition与getWeight例如const layers [ new HeatmapLayerMyRecord({ data: myRecords, getPosition: (d: MyRecord) d.coordinates, // 返回 [lng, lat] getWeight: (d: MyRecord) d.value, // 返回数值权重 radiusPixels: 30, intensity: 1, threshold: 0.03 }) ];关于 HeatmapLayer 全部属性与数据访问器的权威说明可查阅 docs/api-reference/aggregation-layers/heatmap-layer.md。核心实现剖析从入口到图层配置app.tsx 是示例的完整实现整体结构如下const INITIAL_VIEW_STATE: MapViewState { longitude: -73.75, // 纽约市中心 latitude: 40.73, zoom: 9, maxZoom: 16, pitch: 0, bearing: 0 }; const MAP_STYLE https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json; export default function App({ device, data DATA_URL, intensity 1, threshold 0.03, radiusPixels 30, mapStyle MAP_STYLE }) { const layers [ new HeatmapLayerDataPoint({ data, id: heatmap-layer, pickable: false, getPosition: d [d[0], d[1]], getWeight: d d[2], radiusPixels, intensity, threshold }) ]; return ( DeckGL device{device} initialViewState{INITIAL_VIEW_STATE} controller{true} layers{layers} Map reuseMaps mapStyle{mapStyle} / /DeckGL ); }几个值得注意的要点DeckGL组件来自deck.gl/react通过initialViewState设定初始相机controller{true}开启平移/缩放交互layers传入图层实例Map子组件来自react-map-gl/maplibrereuseMaps允许 DeckGL 与 MapLibre 共享同一 canvas 渲染管线mapStyle指定 CARTO 的 dark-matter 无标签样式device属性luma.gl/core的Device类型可选传入用于在宿主应用中共享 GPU 设备示例index.html的挂载脚本会调用renderToDOM完成渲染见 index.html。图层属性精讲把热力图调到恰到好处示例将radiusPixels、intensity、threshold暴露为组件的可调参数下面结合 heatmap-layer.md 与 heatmap-layer.ts 的默认值逐一说明。radiusPixels热力晕圈半径默认值30文档源码默认50示例传 30含义单个数据点权重所分布到的圆形区域的像素半径。半径越大热力点越晕开反之越尖锐。源码约束{type: number, min: 1, max: 100, value: 50}即合法范围 1–100。intensity强度缩放默认值1含义与像素处总权重相乘得到最终权重的乘数。大于 1 会把输出颜色向色谱高端更热偏移小于 1 则向低端偏移。适合场景数据整体权重偏低或偏高时用intensity做全局亮度补偿示例默认取1。threshold边缘淡出阈值默认值0.05示例取 0.03含义低权重像素透明度的削减比例。定义为淡出权重与最大权重的比值0–1例如0.1表示影响所有权重低于最大值 10% 的像素。threshold越大色块边界越平滑但低权重像素因 alpha 过低更难看清。注意当指定了colorDomain时threshold会被忽略。colorDomain颜色映射域默认值null自动含义[minValue, maxValue]二元组控制权重如何映射到colorRange。minValue对应colorRange的第一个颜色maxValue对应最后一个颜色中间线性插值低于minValue的像素逐渐淡出至全透明表示 0高于maxValue的被截断到最后一个颜色。聚合模式差异aggregation: SUM时colorDomain按每平方米权重解释MEAN时按权重解释。为何要手动指定未指定时最大值由当前视口自动决定域为[maxValue * threshold, maxValue]因此同一位置的颜色会随视口内其他数据点变化。如需稳定的颜色映射例如展示图例必须提供自定义colorDomain。aggregation聚合操作默认值SUM可选SUM/MEAN非法值回退为SUM含义决定像素颜色值的聚合方式。每个数据点的权重被分配到以该点为中心的圆形区域像素接收的权重与到中心的距离成反比SUM落入多个圆圈的像素权重为所有来源之和MEAN落入多个圆圈的像素权重为所有邻近点的加权平均。源码实现AGGREGATION_MODE {SUM: 0, MEAN: 1}heatmap-layer.ts在子图层渲染时经aggregationMode传入着色器heatmap-layer.ts。colorRange色带默认值ColorBrewer 的6-class YlOrRd黄-橙-红渐变含义热力图使用的调色板形如[color1, color2, ...]每个颜色为[r, g, b, [a]]通道值 0–255a缺省为 255。颜色数量即色带采样数中间颜色按权重线性插值。weightsTextureSize权重纹理尺寸性能关键默认值2048合法范围 128–2048含义权重纹理的大小。纹理越小渲染性能越好官方文档给出的实测参考是 2048×2048 纹理计算最大权重约需 50–100 ms而 512×512 仅需 5–7 ms代价是可见的像素化。源码细节实际纹理尺寸还会被设备上限裁剪Math.min(weightsTextureSize, device.limits.maxTextureDimension2D)heatmap-layer.ts。debounceTimeout交互防抖默认值500毫秒合法范围 0–1000含义视口变化后延迟触发重新聚合的间隔。大数据集配合大radiusPixels时交互过程中的聚合更新容易造成卡顿设置正数debounceTimeout可推迟聚合、避免冻结副作用是交互结束后需要等待片刻才能看到更新结果。源码实现_debouncedUpdateWeightmap在 zoom 变化时用setTimeout延迟debounceTimeout后强制更新权重图heatmap-layer.ts。数据访问器getPosition 与 getWeightgetPosition默认object object.position返回每个点的位置经纬度数组。getWeight默认1返回每个点的权重。不提供时所有点权重相同热力值只反映点密度。在示例中getPosition: d [d[0], d[1]]从三元组取经纬度getWeight: d d[2]取上车点数量最终热力值即某区域的上车密度。底层原理GPU 上的高斯核密度估计HeatmapLayer 与普通图层最大的不同在于聚合发生在 GPU 上。从 heatmap-layer.ts 的源码可以梳理出完整渲染管线权重图生成weights pass_createWeightsTransform创建TextureTransform把每个数据点按其radiusPixels与getWeight通过weights-vs.glsl/weights-fs.glslWebGPU 下为weights.wgsl绘制到一张权重纹理上混合模式为加法混合blendColorOperation: add从而天然实现多圆叠加求和heatmap-layer.ts最大权重归约max passmaxWeightTransform把权重纹理归约为 1×1 的 max 纹理采用blendColorOperation: max得到当前视口内的最大权重heatmap-layer.ts颜色映射triangle passTriangleLayer渲染一个覆盖视口的四边形片元着色器中结合权重纹理、max 纹理与colorTexture由colorRange生成的一维纹理见_updateColorTexture按intensity、threshold、colorDomain计算最终颜色并叠加到底图上。视口驱动的优化也体现在源码中_updateBounds会把当前屏幕四个角unproject成世界坐标计算出需要处理的可视世界边界仅对可视范围做聚合heatmap-layer.ts这正是colorDomain未指定时颜色随视口变化的原因。说明官方文档将 HeatmapLayer 描述为内部实现高斯核密度估计Gaussian Kernel Density Estimation来渲染热力图上述源码路径可以印证其 GPU 三趟weights → max → triangle的实现结构。平台限制与 WebGPU 支持HeatmapLayer 依赖 GPU 浮点纹理渲染并非所有平台都完整支持。官方文档 heatmap-layer.md 明确列出WebGPU使用实例化四边形与 16 位浮点渲染目标无需依赖 WebGL 点精灵即可保留高斯核密度估计精度源码中对应rgba16float格式与实例化属性布局heatmap-layer.ts。WebGL在主流桌面浏览器evergreen上完整支持但在iOS Safari上WebGL 上下文不支持渲染到浮点纹理图层回退到 8 位低精度模式——此时权重必须是整数且任意像素累积权重不能超过 255。判定逻辑源码通过FLOAT_TARGET_FEATURESfloat32-renderable-webgl与texture-blend-float-webgl探测能力不支持时把纹理格式降级为rgba8unorm并输出警告日志heatmap-layer.ts。因此如果你的目标平台包含 iOS 移动端需要留意权重数值范围或考虑改用 CPU 聚合的图层方案。更换底图服务示例默认使用 CARTO 免费底图服务https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json。如需替换直接修改App组件的mapStyle属性传入任意 MapLibre Style JSON 的 URL 或内联对象更完整的备选方案Mapbox、MapTiler、自定义瓦片服务等可参考仓库文档 docs/get-started/using-with-map.md 中关于其他底图服务的说明。延伸阅读完整 API 参考HeatmapLayer 官方文档图层源码modules/aggregation-layers/src/heatmap-layer/heatmap-layer.ts含 weights/max/triangle 三个 GPU pass 的 GLSL/WGSL 着色器与工具函数聚合图层总览docs/api-reference/aggregation-layers/overview.md更多同风格示例仓库 examples/website 目录下还有 screen-grid、contour、hexagon 等聚合类图层的独立示例可与本文的 HeatmapLayer 实现相互对照。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
