添加 CSS2D 广告牌

添加 CSS2D 元素，与示例：20.添加sprite广告牌类似，只不过将精灵换成了 CSS2DObject

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

TIP

相比添加精灵，CSS2D 通过 HTML 标签方式增加地图元素，显示文字、图片等更简单，并且可以直接在 DOM 元素上添加事件监听，拾取、悬停等操作，但缺点是速度较慢，且始 DOM 元素终位于地图顶层，无法被地形遮挡。

// 添加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);
}

添加 CSS2D 广告牌 ​

添加 CSS2D 广告牌