Skip to content

点云渲染

BicMap 基于 WebGL 提供高性能点云渲染,支持二维和三维模式,以及基于高度的渐变色映射。

createPointCloud(map, options)

js
const ctrl = bicMap.createPointCloud(map, options)

options 参数

参数类型必需默认值说明
pointsArray点云数据数组
pointSizenumber2点大小(像素)
pointColorstring'#00ff88'点颜色(单色模式)
pointOpacitynumber1点透明度(0–1)
is3Dbooleanfalse是否启用 3D 模式
useColorMapbooleanfalse是否使用基于高度的渐变色
zRange[number, number]自动高度范围 [min, max]
heightScalenumber1高度缩放系数
heightOffsetnumber0高度偏移量

点数据格式

js
// 二维点云(经纬度)
const points2D = [
  { x: 116.391, y: 39.907 },
  { x: 116.392, y: 39.908 },
  // ...
]

// 三维点云(经纬度 + 高度)
const points3D = [
  { x: 116.391, y: 39.907, z: 1.2 },
  { x: 116.392, y: 39.908, z: 3.5 },
  // ...
]

示例

js
const ctrl = bicMap.createPointCloud(map, {
  points: points2D,
  pointSize: 3,
  pointColor: '#00ff88',
  pointOpacity: 0.85
})
js
const ctrl = bicMap.createPointCloud(map, {
  points: points3D,
  pointSize: 2,
  is3D: true,
  useColorMap: true,
  zRange: [0, 5],         // 高度 0–5 米对应蓝→绿→红渐变
  heightScale: 1.0,
  heightOffset: 0
})

控制器方法

js
ctrl.updatePoints(newPoints)   // 更新点云数据
ctrl.setPointSize(4)           // 修改点大小
ctrl.setOpacity(0.7)           // 修改透明度
ctrl.show()                    // 显示
ctrl.hide()                    // 隐藏
ctrl.remove()                  // 销毁

在线示例

https://bicmap-ex.x-humanoid-cloud.com//indoor/pointCloud 在新窗口中打开 ↗

室外点云示例:

https://bicmap-ex.x-humanoid-cloud.com//outdoor/pointCloud 在新窗口中打开 ↗