Re:Earthでクリックした位置の緯度経度を取得し表示する

結論

最終的なアウトプット

const html = `
    <style>
      body {
            margin: 0;
            padding: 10px;
            background-color: #fff;
        }
    </style>
    <div>
      <p>lat： <span id="lat">-</span></p>
      <p>lng： <span id="lng">-</span></p>
    </div>
    <script>
    // クリックした位置のx軸、y軸を取得
    var targetElement = parent.document.querySelector(".cesium-widget");
    targetElement.addEventListener("click", function(event) {
        var x = event.pageX;
        var y = event.pageY;
        // Re:Earth UI側にx、y軸データを送信
        parent.postMessage({ type: "clickEvent", x: x, y: y }, "*");
    });

    // reearth.ui.postMessageで送信されたデータを処理
    window.addEventListener("message", function (e) {
        if (e.source !== parent) return;
        document.getElementById("lat").textContent = data.lat;
        document.getElementById("lng").textContent = data.lng;
    });
`;
reearth.ui.show(html);

let latLngHeight = {};
reearth.on("message", (msg) => {
  // 受け取ったx,y軸データを元に緯度経度データを取得
  if (msg.type === "clickEvent") {
    latLngHeight = reearth.scene.getLocationFromScreen(msg.x, msg.y);
    reearth.ui.postMessage(latLngHeight);
  }
});

解説

クリックした位置の緯度経度を取得する

• Re:Earth UIの画面がクリックされたら、画面の位置情報を取得する

  • Re:Earth UI画面の地図が表示されている範囲を設定
    var targetElement = parent.document.querySelector(".cesium-widget");
  • clickイベントでカーソルのx,y軸を取得
    targetElement.addEventListener("click", function(event) {...});
  • x,y軸の情報をpostMessageでRe:Earth UI側に送信
    parent.postMessage({ type: "clickEvent", x: x, y: y }, "*");

• 画面の座標から緯度経度を取得する

  • postMessageで送信されたデータを受け取る
    reearth.on("message", (msg) => {...});
  • 受け取ったx,y軸データを元に緯度経度データを取得
    reearth.scene.getLocationFromScreen(msg.x, msg.y);

緯度経度をHTML内に表示する

• reearth.ui.postMessage でHTMLにデータを送信
• データを受信して画面に表示
  window.addEventListener("message", function (e) {表示処理}

参考

🎉Re:Earth v0.13.0 がリリースされました！
プラグインの仕組み