如何在Autodesk Forge Viewer中通过Handling Sprite Events为Sprite显示Tooltip

一、onSensorClicked函数的作用 #

onSensorClicked是APS IoT扩展中自定义的回调函数，并非Viewer原生API。当用户点击扩展生成的Sprite（传感器图标）时，该函数会被触发，核心作用是作为点击事件的业务处理入口——你可以在里面编写逻辑，比如获取Sprite绑定的传感器数据、触发数据弹窗、更新页面UI，或者实现你需要的Tooltip显示逻辑。

原示例代码里的这个函数，是扩展开发者为了统一处理传感器Sprite点击行为封装的，本质就是把Sprite的点击事件和业务逻辑做了绑定。

二、Sprite点击后显示Tooltip的实现方案 #

1. 准备Tooltip DOM元素 #

在页面中添加一个隐藏的tooltip容器，自定义样式：

<div id="sprite-tooltip" style="position: absolute; display: none; background: #2c3e50; color: white; padding: 8px 12px; border-radius: 4px; pointer-events: none; z-index: 9999; font-size: 14px;"></div>

2. 绑定Sprite点击事件并控制Tooltip #

不管是用原生Dataviz创建的Sprite，还是IoT扩展生成的，都可以通过监听点击事件触发Tooltip：

// 假设你已通过Dataviz模块创建了sprite实例
const sprite = new Autodesk.DataVisualization.Core.Sprite(/* 参数略 */);
// 给Sprite绑定点击事件
sprite.on('click', (event) => {
  const tooltip = document.getElementById('sprite-tooltip');
  // 从Sprite的自定义数据中获取展示内容（创建Sprite时可通过data属性绑定）
  const sensorInfo = event.target.data;
  tooltip.textContent = `${sensorInfo.name}: ${sensorInfo.value} ${sensorInfo.unit}`;
  
  // 根据鼠标位置定位Tooltip
  tooltip.style.left = `${event.clientX + 15}px`;
  tooltip.style.top = `${event.clientY + 15}px`;
  tooltip.style.display = 'block';

  // 可选：防止Tooltip超出视口
  const tooltipRect = tooltip.getBoundingClientRect();
  if (tooltipRect.right > window.innerWidth) {
    tooltip.style.left = `${event.clientX - tooltipRect.width - 15}px`;
  }
  if (tooltipRect.bottom > window.innerHeight) {
    tooltip.style.top = `${event.clientY - tooltipRect.height - 15}px`;
  }
});

// 点击页面其他区域隐藏Tooltip
viewer.container.addEventListener('click', (e) => {
  if (!e.target.closest('.adsk-sprite')) {
    document.getElementById('sprite-tooltip').style.display = 'none';
  }
});

3. 适配IoT扩展的onSensorClicked #

如果是用IoT扩展的onSensorClicked，可以把Tooltip逻辑整合进去：

function onSensorClicked(sensorId) {
  // 根据sensorId从数据源中获取对应传感器信息
  const targetSensor = yourSensorList.find(s => s.id === sensorId);
  if (!targetSensor) return;
  
  const tooltip = document.getElementById('sprite-tooltip');
  tooltip.textContent = `${targetSensor.name}: ${targetSensor.reading} ${targetSensor.unit}`;
  
  // 获取当前鼠标位置（通过Viewer鼠标事件获取）
  const mousePos = viewer.clientToViewport(viewer.getEventPoint(event));
  tooltip.style.left = `${mousePos.x + 15}px`;
  tooltip.style.top = `${mousePos.y + 15}px`;
  tooltip.style.display = 'block';
}

内容的提问来源于stack exchange，提问作者sercanduyar