1. 热力图使用文档

1.1. 初始化

热力图

名称	说明	类型	是否必须	默认值
props	初始化参数	object	Y	false
props.viewer3D	viewer3D 实例	object	Y	false

demo 示例

示例名称	示例地址
设置热力图特效	去体验

1.2. 方法

1.2.1. createHeatmap

创建热力图

名称	说明	类型	是否必须	默认值
opt	heatMap config	object	Y	false
opt.data	热力图数据，每个点的辐射半径默认是 1000	object	Y	false
opt.data.min	最低热源的热力	number	Y	false
opt.data.max	最高热源的热力	number	Y	false
opt.data.data	热源点数据	Array.	Y	false
opt.data.data[].point	热源坐标，包含 x、y、z	object	Y	false
opt.data.data[].value	热源的热力值	number	Y	false
opt.data.data[].radius	热源的辐射半径	number	N	false
opt.boundary	热力图边界，包含 x、y、z	Array.	Y	false
opt.quality	热力图质量，建议不要超过 1	number	N	false

返回值说明	类型
创建结果。一定包含 code。如果成功则包含 id，否则包含错误信息	object

1.2.2. createHeatmap3D

创建新的 3D 峰状热力图

名称	说明	类型	是否必须	默认值
opt	heatMap config	object	Y	false
opt.data	热力图数据，每个点的辐射半径默认是 1000	object	Y	false
opt.data.min	最低热源的热力	number	Y	false
opt.data.max	最高热源的热力	number	Y	false
opt.data.data	热源点数据	Array.	Y	false
opt.data.data[].point	热源坐标，包含 x、y、z	object	Y	false
opt.data.data[].value	热源的热力值	number	Y	false
opt.data.data[].radius	热源的辐射半径	number	N	false
opt.boundary	热力图边界，包含 x、y、z	Array.	Y	false

返回值说明	类型
创建结果。一定包含 code。如果成功则包含 id，否则包含错误信息	object

demo 示例

示例名称	示例地址
3D峰状热力图	去体验

1.2.3. createSphereHeatmap

创建普通球状的三维热力图，带动画，球的半径从小到大做动画

名称	说明	类型	是否必须	默认值
opt	heatMap config	object	Y	false
opt.data	热力图数据，每个点的辐射半径默认是 1000	object	Y	false
opt.data.min	最低热源的热力	number	Y	false
opt.data.max	最高热源的热力	number	Y	false
opt.data.data	热源点数据	Array.	Y	false
opt.data.data[].point	热源坐标，包含 x、y、z	object	Y	false
opt.data.data[].value	热源的热力值	number	Y	false
opt.data.data[].radius	热源的辐射半径	number	N	false

返回值说明	类型
创建结果。一定包含 code。如果成功则包含 id，否则包含错误信息	object

demo 示例

示例名称	示例地址
球状三维热力图	去体验

1.2.4. createSphereColorOverrideHeatmap

创建球空间颜色覆盖类型的热力图；这种实现方式要在 shader 中处理，会消耗一定性能，受 GPU 限制，最多支持 150 个热力源，不建议大模型使用；只允许创建一个该类型的热力图，重复创建会覆盖之前的；

名称	说明	类型	是否必须	默认值
opt	heatMap config	object	Y	false
opt.data	热力图数据，每个点的辐射半径默认是 1000	object	Y	false
opt.data.min	最低热源的热力	number	Y	false
opt.data.max	最高热源的热力	number	Y	false
opt.data.data	热源点数据	Array.	Y	false
opt.data.data[].point	热源坐标，包含 x、y、z	object	Y	false
opt.data.data[].value	热源的热力值	number	Y	false
opt.data.data[].radius	热源的辐射半径	number	N	false

返回值说明	类型
创建结果。一定包含 code。如果成功则包含 id，否则包含错误信息	object

demo 示例

示例名称	示例地址
球空间颜色覆盖热力图	去体验

1.2.5. updateHeatmap

更新热力图

名称	说明	类型	是否必须	默认值
opt	heatMap config	object	Y	false
opt.id	热力图 id	string	Y	false
opt.data	热力图数据，每个点的辐射半径默认是 1000。数据内容与创建接口相同	object	Y	false

返回值说明	类型
是否更新成功	boolean

1.2.6. removeHeatmap

移除热力图

名称	说明	类型	是否必须	默认值
id	热力图 id	string	Y	false

返回值说明	类型
是否移除成功	boolean

1.2.7. 完整样例

完整样例

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title>demo</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                position: fixed;
            }
        </style>
        <link href="http://bos3d.bimwinner.com/static/UI/latest/BOS3DUI.min.css" rel="stylesheet" />
    </head>
    <body>
        <div id="viewport" class="viewport"></div>
        <script>
            const html = document.querySelector("html");
            document.querySelector(".viewport").style.width = html.clientWidth + "px";
            document.querySelector(".viewport").style.height = html.clientHeight - 1 + "px";
        </script>
        <script type="application/javascript" src="http://bos3d.bimwinner.com/static/latest/BOS3D.min.js"></script>
        <script type="application/javascript" src="http://bos3d.bimwinner.com/static/UI/latest/BOS3DUI.min.js"></script>
        <script>
            document.body.onload = function () {
                const BOS3D = window.BOS3D;
                const option = {
                    host: "//bos3d.bimwinner.com",
                    viewport: "viewport",
                };
                const viewer3D = new BOS3D.Viewer(option);
                new BOS3DUI({
                    viewer3D: viewer3D,
                    BOS3D: BOS3D,
                });
                viewer3D.addView("M1577676674083", "bos3dalpha");
                viewer3D.registerModelEventListener(BOS3D.EVENTS.ON_LOAD_COMPLETE, (e) => {
                    if (e.modelKey === "M1577676674083") {
                        const h = new BOS3D.Plugins.Heatmap({ viewer3D: viewer3D });
                        const rst = h.createHeatmap({
                            data: {
                                min: 0,
                                max: 1000,
                                data: [
                                    {
                                        point: { x: -3995.8253658393064, y: 1570.6045528759387, z: 10134.577951205827 },
                                        value: 800,
                                        radius: 1000,
                                    },
                                    {
                                        point: { x: -6828.009980967197, y: 2180.024457386804, z: 9860.33899417594 },
                                        value: 1000,
                                        radius: 1000,
                                    },
                                ],
                            },
                            boundary: [
                                { x: -3928.6342761873707, y: -1537.5230442459967, z: 11532.714575715683 },
                                { x: -8226.37413133913, y: 2761.4719768914993, z: 9598.687610398825 },
                                { x: 371.75597137149725, y: 2763, z: 9597.975697604017 },
                            ],
                        });
                        console.info(rst);
                    }
                });
            };
        </script>
    </body>
</html>

热力图使用文档

1. 热力图使用文档

1.1. 初始化

1.2. 方法

1.2.1. createHeatmap

1.2.2. createHeatmap3D

1.2.3. createSphereHeatmap

1.2.4. createSphereColorOverrideHeatmap

1.2.5. updateHeatmap

1.2.6. removeHeatmap

1.2.7. 完整样例

results matching ""

No results matching ""