Skip to content

添加图标

loading

添加图标,就是在地图上放一个图片精灵,步骤:

  1. 监听鼠标点击事件
  2. 取得鼠标点击位置的经纬度和高度
  3. 创建精灵
  4. 设置精灵位置
  5. 添加精灵
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);
  }
});


Released under the MIT License.