Function addMarker3D

3D マーカーを追加する — 詳細な使用例

glTF形式の3Dモデルをマーカーとして地図上に配置します。 建物・車・キャラクターなど立体的なアイコン表現に使います。 削除は removeMarker3D で行います。

Warning

• Marker3D は latLng と gltf(JsonObject) が必須です。
• サンプルのようにファイル入力から読み込む場合は FileReader 後に JSON.parse して gltf に渡します。
• 多数の3Dマーカーを表示するとパフォーマンスに影響します。数が多い場合は addGLMarkers を検討してください。
• 同一インスタンスを重複追加した場合の動作は未定義です。
• setInterval でアニメーションさせる場合、破棄時に clearInterval してください。

Example: 3Dモデルを静的に配置する

import * as GIA from '@ntj/gaia';

const gltf = await fetch('/assets/model.gltf').then((r) => r.json());

const marker3D = new GIA.object.Marker3D({
  latLng: new GIA.value.LatLng(35.6895, 139.6917),
  gltf,
  scale: new GIA.value.Point3(30, 30, 30),
});

map.addMarker3D(marker3D);

// 削除
map.removeMarker3D(marker3D);
Copy

Example: ファイル入力の glTF を読み込み、中心座標へ追加する

import * as GIA from '@ntj/gaia';

const fileInput = document.querySelector('input[name="map-marker-3d-file"]') as HTMLInputElement;

const addFromFile = () => {
  const file = fileInput.files?.[0];
  if (!file) {
    return;
  }

  const reader = new FileReader();
  reader.onload = (event) => {
    if (event.target?.readyState !== FileReader.DONE || event.target.error) {
      return;
    }

    const content = event.target.result as string;
    const gltf = JSON.parse(content);

    const marker3D = new GIA.object.Marker3D({
      latLng: map.getCenter(),
      gltf,
      scale: new GIA.value.Point3(30, 30, 30),
    });
    map.addMarker3D(marker3D);
  };

  reader.readAsText(file);
};
Copy

Example: 周回アニメーションしながら回転させる

import * as GIA from '@ntj/gaia';

const RADIAN_TO_DEGREE = 180.0 / Math.PI;
const gltf = await fetch('/assets/model.gltf').then((r) => r.json());

const marker3D = new GIA.object.Marker3D({
  latLng: map.getCenter(),
  gltf,
  scale: new GIA.value.Point3(30, 30, 30),
});
map.addMarker3D(marker3D);

let radian = 0;
const center = map.getCenter();
const timer = setInterval(() => {
  radian += (10 * Math.PI) / 180.0;
  const radius = 0.005;

  const latLng = new GIA.value.LatLng(
    center.lat + radius * Math.cos(radian) - 0.0075,
    center.lng + radius * Math.sin(radian),
  );
  marker3D.setLatLng(latLng);

  const rotation = GIA.value.EulerAngles.builder()
    .rotate('z', (-radian - Math.PI * 0.5) * RADIAN_TO_DEGREE)
    .build();
  marker3D.setRotation(rotation);
}, 100);

// 終了時
const dispose = () => {
  clearInterval(timer);
  map.removeMarker3D(marker3D);
};
Copy

Example: 追加済みの3Dマーカーを一括削除する

import * as GIA from '@ntj/gaia';

const markers: GIA.object.Marker3D[] = [];

const add = (gltf: GIA.types.JsonObject) => {
  const marker = new GIA.object.Marker3D({
    latLng: map.getCenter(),
    gltf,
    scale: new GIA.value.Point3(30, 30, 30),
  });
  markers.push(marker);
  map.addMarker3D(marker);
};

const removeAll = () => {
  for (const marker of markers) {
    map.removeMarker3D(marker);
  }
  markers.length = 0;
};
Copy

See

• addMarker3D
• removeMarker3D