如何在WorldWind的GeographicText中添加可点击链接？

首先得明确：GeographicText是基于OpenGL渲染的矢量图形，不是浏览器DOM元素，所以它根本不支持解析HTML标签——你之前尝试的HTML链接代码只会被当成普通文本显示，这是预期行为。

要实现点击文本跳转的功能，我们需要换个思路：用WorldWind的**拾取检测（Pick Detection）**来监听鼠标点击事件，判断用户是否点击了目标文本，然后手动触发链接跳转。下面是一步一步的简易解决方案：

1. 重构数据结构，分离显示文本和链接 #

先把原来混在一起的HTML内容拆成两个字段，这样代码更清晰，也避免转义问题：

var temps = [ 
  { 
    'displayName': 'Tokyo JP', // 显示在地球表面的文本
    'url': 'http://www.example.com', // 要跳转的链接
    'elevation': 10000, 
    'latitude': 35.685, 
    'longitude': 139.751389 
  } 
];

2. 保留原文本渲染代码，关联数据到文本对象 #

创建GeographicText的时候，用displayName作为显示内容，同时把对应的temp数据绑定到文本对象上（方便后续点击检测时获取链接）：

var text, textAttributes = new WorldWind.TextAttributes(null), 
    textLayer = new WorldWind.RenderableLayer("World Temperatures");

// 设置文本属性
textAttributes.color = WorldWind.Color.CYAN;
textAttributes.depthTest = false;
// 可选：给可点击文本加下划线，提示用户这是可交互的
textAttributes.textDecoration = WorldWind.TextDecoration.UNDERLINE;

for (var i = 0, len = temps.length; i < len; i++) {
  var temp = temps[i], 
      tempPosition = new WorldWind.Position(temp.latitude, temp.longitude, temp.elevation);
  
  text = new WorldWind.GeographicText(tempPosition, temp.displayName);
  text.attributes = textAttributes;
  // 关键：把temp数据绑定到文本对象上，后续点击时能拿到链接
  text.tempData = temp;
  
  textLayer.addRenderable(text);
}

wwd.addLayer(textLayer);

3. 添加点击事件监听，实现跳转逻辑 #

通过监听WorldWindow的click事件，执行拾取检测，判断用户是否点击了带有链接的文本，然后打开对应URL：

// 监听鼠标点击事件
wwd.addEventListener('click', function(event) {
  // 获取鼠标在画布上的位置
  var mousePos = new WorldWind.Vec2(event.clientX, event.clientY);
  // 执行拾取操作，获取点击位置下的所有渲染对象
  var pickResults = wwd.pick(mousePos);
  
  // 遍历拾取结果，找到我们的GeographicText
  for (var i = 0; i < pickResults.objects.length; i++) {
    var pickedItem = pickResults.objects[i];
    // 检查是否是我们的文本，并且该文本有对应的链接数据
    if (pickedItem.userObject instanceof WorldWind.GeographicText && pickedItem.userObject.tempData?.url) {
      // 打开链接（_blank表示在新标签页打开）
      window.open(pickedItem.userObject.tempData.url, '_blank');
      // 找到目标后跳出循环，避免重复处理
      break;
    }
  }
});

4. 可选：添加鼠标悬停提示 #

为了让用户更清楚这是可点击的文本，可以监听mousemove事件，当鼠标悬停在文本上时，把鼠标指针改成手型：

wwd.addEventListener('mousemove', function(event) {
  var mousePos = new WorldWind.Vec2(event.clientX, event.clientY);
  var pickResults = wwd.pick(mousePos);
  var isOverClickableText = false;
  
  // 检查是否悬停在带链接的文本上
  for (var i = 0; i < pickResults.objects.length; i++) {
    var item = pickResults.objects[i];
    if (item.userObject instanceof WorldWind.GeographicText && item.userObject.tempData?.url) {
      isOverClickableText = true;
      break;
    }
  }
  
  // 设置鼠标样式
  wwd.canvas.style.cursor = isOverClickableText ? 'pointer' : 'default';
});

这个方案完全基于WorldWind的原生API，不需要引入额外库，也符合你想要的“简易解决方案”需求——核心就是利用WorldWind的拾取系统来实现交互，因为OpenGL渲染的图形本来就和DOM无关，没法直接用HTML链接。

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