Re:Earthでよく使うものメモ

Re:Earthでよく使うものメモ

私が個人的によく使うものをメモ用に残しておきます

クリックした箇所にマーカーを追加する

reearth.on("click", (data) => {
  reearth.layers.add({
    extensionId: "marker",
    isVisible: true,
    title: "マーカー",
    property: {
      default: {
        location: {
          lat: data.lat,
          lng: data.lng,
        },
      },
    },
    tags: [],
  });
});

レイヤーを検索する

reearth.layers.add({
  extensionId: "marker",
  isVisible: true,
  title: "東京スカイツリー",
  property: {
    default: {
      location: {
        lat: 35.71018463504105,
        lng: 139.81071112590806,
      },
    },
  },
  tags: [],
});

const marker = reearth.layers.find(
    layer => layer.type === "marker" && layer.title === "東京スカイツリー"
);

console.log(marker.id)

フォームで入力した緯度経度の位置にマーカーを表示する

const html = `
    <style>
      body {
            margin: 0;
            padding: 10px;
            background-color: #fff;
        }
    </style>
    <div>
      <label for="latitude">緯度:</label>
      <input type="text" id="latitude" placeholder="例: 35.6895" required>
      <br>
      <label for="longitude">経度:</label>
      <input type="text" id="longitude" placeholder="例: 139.6917" required>
      <br>
      <button onclick="addMarker()">マーカーを追加</button>
    </div>
    <script>
      function addMarker() {
        var latitude = document.getElementById('latitude').value;
        var longitude = document.getElementById('longitude').value;
        parent.postMessage({ type: "addMarker", lat: latitude, lng: longitude }, "*");
      }
`;
reearth.ui.show(html);

reearth.on("message", (msg) => {
  if (msg.type === "addMarker") {
    reearth.layers.add({
    extensionId: "marker",
    isVisible: true,
    title: "マーカー",
    property: {
      default: {
        location: {
          lat: msg.lat,
          lng: msg.lng,
        },
      },
    },
    tags: [],
  });
  }
});

CZMLファイルを追加する

const czml_data = [
  // 任意のczmlデータ
];

reearth.layers.add({
  id: "czml",
  extensionId: "resource",
  type: "resource",
  isVisible: true,
  title: "CZML",
  property: {
    default: {
      url: czml_data,
      type: "czml",
      clampToGround: true,
    },
  },
});