添加图标
loading
添加图标,就是在地图上放一个图片精灵,步骤:
- 监听鼠标点击事件
- 取得鼠标点击位置的经纬度和高度
- 创建精灵
- 设置精灵位置
- 添加精灵
ts
// 添加图标
function addIcon(map, lonlat) {
const icon = new THREE.Sprite(
new THREE.SpriteMaterial({
map: new THREE.TextureLoader().load("../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);
}
});