添加 sprite 广告牌

loading

在地图上放一个图片精灵，步骤：

1. 监听鼠标点击事件
2. 取得鼠标点击位置的经纬度和高度
3. 创建精灵
4. 设置精灵位置
5. 添加精灵

// 添加图标
function addIcon(map, lonlat) {
    const icon = new THREE.Sprite(
        new THREE.SpriteMaterial({
            map: new THREE.TextureLoader().load("../images/gis.png"),
            sizeAttenuation: false,
            transparent: true,
        })
    );
    icon.renderOrder = 999;
    icon.center.set(0.5, 0);
    icon.scale.setScalar(0.08);
    const position = map.geo2map(lonlat);
    icon.position.copy(position);
    map.add(icon);
}
// 鼠标点击事件添加图标
viewer.container?.addEventListener("pointerdown", (evt) => {
    const info = plugin.getLocalFromMouse(evt, map, viewer.camera);
    console.log(info);
    if (info) {
        addIcon(map, info);
    }
});

TIP

如果需要在广告牌上显示文字，精灵的纹理使用 CanvasTexture，在 Canvas 上绘制文字或其它图案。

TIP

如果需要对广告牌进行拾取操作，需要使用 threejs 的射线法进行拾取。