_this.clickPoint = intersects[0].object.attr;如何改写成常驻显示而不是点击显示呢
时间: 2024-09-12 20:16:02 浏览: 31
如果你想让某个点的信息常驻显示,而不只是在点击时才显示,可以考虑将获取信息的部分独立出来,并将其放在元素初始化的时候设置好。这里有一个修改后的示例,假设`intersects`数组始终存在且包含所需的数据:
```javascript
// 假设你的dom元素已经绑定了"data-point"的引用
const pointElement = document.getElementById('data-point');
// 当元素加载完成后,直接设置点的信息
pointElement.innerHTML = `
<div>
<!-- 填充点的相关信息 -->
<p>Point Info: ${intersects[0].object.attr}</p>
</div>
`;
// 如果需要更新点的信息,可以直接替换innerHTML,而不需要监听点击事件
// 更新点信息:
// pointElement.innerHTML = `新的点信息: ${newAttr}`;
```
这样,信息就会在页面加载时就显示出来了,除非手动改变内容,否则不会因为点击事件而消失。
相关问题
如何将点击事件_this.clickpoint改为每个点上方框图显示该点的信息呢
为了实现在每个点上点击时显示对应点的信息,你需要修改`bindPointClick`函数,使其利用`THREE.Object3D`的`addEventListener`方法来监听每个点对象(`_this.points[i].object`)的点击事件。当你点击一个点时,你可以从它的`attr`属性中获取所需的信息,然后显示在一个弹出框或者UI元素中。以下是一个简单的实现步骤:
1. 确保你已经有一个可以显示信息的UI元素,比如一个模态框、提示层或者DOM元素。
```javascript
// 创建一个HTML模板或者React组件来展示点的信息
function createInfoDisplay(pointAttr) {
let displayElement = document.createElement('div');
displayElement.textContent = `点位信息:${JSON.stringify(pointAttr)}`;
return displayElement;
}
// 更新bindPointClick函数
bindPointClick() {
// ...其他代码...
for (let i = 0; i < _this.points.length; i++) {
_this.points[i].object.addEventListener('click', function(event) {
// 获取被点击点的信息
const clickedPointAttr = this.getAttribute('attr');
// 创建并显示信息
const infoDisplay = createInfoDisplay(clickedPointAttr);
showPopup(infoDisplay); // 这里假设showPopup是你用来显示信息的函数
// 清除已有的点击标记,如果需要
if (_this.clickPoint) {
_this.clickPoint.style.display = 'none'; // 或者其他隐藏的方式
}
// 更新当前点击的点
_this.clickPoint = this;
// 显示新点击的点的信息
infoDisplay.style.display = 'block';
});
}
}
```
请确保`this.getAttribute('attr')`能正确地从`_this.points[i].object`获取到预期的数据,并根据你的UI需求调整`showPopup`函数。
如何不要点击事件_this.clickpoint,改为每个点上方框图常驻显示,显示该点的信息呢
如果你想避免直接通过`_this.clickpoint`触发点击事件,并让每个点上方始终显示对应信息,你可以采用以下几种方法:
1. **悬停提示** (mouseover): 使用JavaScript或者库如Vue.js、React等的内置API,在鼠标悬停在某个点上时显示信息。当鼠标离开时,隐藏信息。例如在Vue中可以这样做:
```html
<template>
<div>
<circle :class="{'active': hovered}" v-for="(point, index) in points" :key="index" :cx="point.x" :cy="point.y" @mouseenter="showInfo(index)" @mouseleave="hideInfo(index)">
<span v-if="hovered[index]" class="tooltip">{{ point.info }}</span>
</circle>
</div>
</template>
<script>
export default {
data() {
return {
points: [...], // 点的数据数组
hovered: new Array(points.length).fill(false), // 初始化 hover 状态
};
},
methods: {
showInfo(index) {
this.hovered[index] = true;
},
hideInfo(index) {
this.hovered[index] = false;
},
}
}
</script>
```
这里的`hovered`数组用于跟踪哪些点当前被悬停。
2. **弹出框** (popover): 当用户点击某个点时,打开一个弹出框显示详细信息。可以利用第三方UI库(如Ant Design Vue或Element Plus)提供的工具创建这个功能。
3. **自定义图标** 或 **光标提示**:在每个点上添加一个图标,当鼠标移到图标上时显示信息。这通常需要CSS和一些交互设计技巧。