在pothree中添加点和自定义样式
我们常常使用three来实现点云,当数据量很少时three的实现效果很好,当点云文件过大时,three的表现就比较差强人意了。所以我们采用了poThree来实现点云,本文我们讲一下在pothree中添加自定义点的实现方法。
1.实现一个name标签:效果图:
实现步骤
let aRoot = potreeViewer.scene.annotations; let aCA13 = new Potree.Annotation({ title: "Whale Rock Reservoir", // title的名称 position: [675036.45, 3850315.78, 65076.70], //title的位置 cameraPosition: [675036.45, 3850315.78, 65076.70],// 点击后摄像机的位置 cameraTarget: [692869.03, 3925774.14, 1581.51],//点击后摄像机指向的位置 }); aRoot.add(aCA13);
点击点位后视角会跳转到目标位置,不需要的话就删除最后两个配置
2.实现带图片的自定义点,并监听属性,效果图:
实现步骤
let aRoot = potreeViewer.scene.annotations; // 自定义样式title
let elTitle = $(`
这是我的测试点位
测试样式属性
`);
// title点击事件监听
elTitle.find("img[name=action_return_number]").click(() => {
console.log(99999999999)
event.stopPropagation(); // 阻断,默认事件,包括视角调整
});
let aTreeReturns = new Potree.Annotation({
title: elTitle,
position: [675756.75, 3937590.94, 80.21],
cameraPosition: [693073.32, 3922354.02, 2154.17],
cameraTarget: [692845.46, 3925528.53, 140.91],
});
aRoot.add(aTreeReturns);