添加 CSS2D 广告牌

loading

添加 CSS2D 图标，与 20.添加图标类似，只不过将精灵换成了 CSS2DObject

关于添加 CSS2D 对象，见：https://threejs.org/docs/?q=css#examples/zh/renderers/CSS2DRenderer

TIP

相比添加精灵图标，CSS2D 通过在地图中添加 HTML 标签方式增加地图元素，拾取、悬停等操作更加简单，但缺点是速度较慢，特别是需要添加大量标签时尤为明显。

// 添加CSS2D渲染器
const cssRendererDiv = document.getElementById("cssrenderer");
const css2dRenderer = new CSS2DRenderer({ element: cssRendererDiv });
viewer.addEventListener("update", () => {
  css2dRenderer.render(viewer.scene, viewer.camera);
});

// 添加CSS2D图标
function addIcon(map, lonlat) {
  const position = map.geo2map(lonlat);
  const label = document.createElement("div");
  label.className = "billboard";
  label.title = `经纬度: ${lonlat.x.toFixed(2)}, ${lonlat.y.toFixed(2)}`;
  const labelObject = new CSS2DObject(label);
  labelObject.center.set(0.5, 1);
  labelObject.position.copy(position);
  map.add(labelObject);
}