# arcgis-js-heatmap3d-threejs

**Repository Path**: ii-_-uu/arcgis-js-heatmap3d-threejs

## Basic Information

- **Project Name**: arcgis-js-heatmap3d-threejs
- **Description**: 基于arcgis js api 4.x版本与threejs实现的三维热力图
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-05-16
- **Last Updated**: 2023-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ArcGIS-JavaScript-heatmap-3d, heatmap, heatmap-3d

## README

# arcgis-js-heatmap3d-threejs

#### 介绍
基于arcgis js api 4.x版本与threejs实现的三维热力图
![输入图片说明](heatmap.png)

#### 软件架构
地图基于ArcGIS Api for JavaScript 4.22，三维拓展基于js api的拓展接口以及threejs v123。   
（PS: 在我写下这段话的时候, 经由不完全的测试，发现正常运行本程序需要threejs版本为v123, arcgis js api版本为v4.21~4.22, 后续版本情况暂无法确定, 也没有太多时间去测试确认是否真的与版本相关, 也没时间去测试其他更低版本的情况）

#### 整体思路
1.  本着可行性研究的方式，参考了各路大神的代码之后，决定用自定义着色器的方式，以最简单的成本和思路实现三维热力图。   
2.  通过ArcGIS Api for JavaScript的externalRenderers类来自定义三维图层，然后具体的渲染则交由threejs处理。   
3.  三维热力图实现的思路则是通过获取平面的二维热力图以及对应的灰度图，在指定的矩形平面上绘制三维几何图形，然后设置顶点的高程与灰度图的值正相关，设置三维对象的纹理为平面的二维热力图。   
4.  考虑到方便获取第3点的相关平面二维热力图数据，使用了heatmap.js这个第三方库作为创建热力图的库，而没有直接使用ArcGIS Api for JavaScript的热力图渲染。（后续可能会考虑从ArcGIS Api for JavaScript的热力图渲染中获取所需的数据，但是本程序就暂不考虑了）   
5.  自定义的顶点着色器重点是传入转成纹理的灰度图，然后抽取其中的纹理数据，获取其中的透明度，然后将此透明度乘以一个固定的夸大常量，得到顶点的高程。

```
vec4 flgColor = texture2D(u_greyMap, uv);
float height = u_zScale * flgColor.a;
```
   
6.  自定义的片段着色器则只需要传入热力图纹理，然后抽取并使用即可，这里我参考了别人的代码赋予了一个透明度，但是直接用热力图纹理也没啥大问题。

```
gl_FragColor = vec4(u_color, u_opacity) * texture2D(u_heatMap, v_uv);
```


#### 安装教程

1.  保持互联网环境可用，或将index.html中引用的在线资源修改为本地资源。
2.  使用网络容器将代码部署起来，比如tomcat、iis、nginx等。
3.  启动网络容器。

#### 使用说明

1.  根据上述安装教程进行部署。
2.  使用64位的现代浏览器访问系统的部署地址(最新版本的Chrome浏览器体验最佳，IE浏览器给我滚)。
3.  鼠标操作地图查看效果。

#### 注意事项

地理坐标转渲染坐标时，最好使用renderCoordinateTransformAt方法，计算变换的平移、旋转和缩放矩阵，然后分解赋值给threejs的几何对应的这几项属性。   
如果只是简单使用toRenderCoordinates方法则只是能计算平移的最终坐标值，并不包括旋转和缩放的矩阵，这样可能使用的时候达不到预期的结果。