React のための
リアルタイム
3D 地図

• 

  12 700 km 地球儀から平面地図へ 楕円体フォールバック、賢いクラスタリング

• 

  9 km マーカーとクラスタ 再利用される DOM ノード、カテゴリー別に分割

• 

  3 km スカイラインと地平線 傾きがどうであれ、マーカーは画面上の大きさを保つ

• 

  900 m 座標グリッド 地表に沿い、画面上の線幅は一定

• 

  1,7 m 歩行者モード 目線の高さ、重力、衝突判定

• フォトリアル 3D、平面 2D cesiumIonToken Cesium Ion 経由の Google Photorealistic 3D Tiles、トークンがなければ楕円体の地球儀、そして Google または自前の XYZ サーバーから配信される 2D ベースマップ。
• DOM マーカーとクラスタ markersLayer() ネイティブの hover・フォーカス・CSS アニメーションが効く本物の DOM ノード。プールされ、単一の translate3d パスで書き込まれます。動く対象は作り直されるのではなく滑ります。
• 描画エディタ draw 矩形と投げ縄による選択、リサイズと回転のハンドル、ツールごとのスタイル、取り消しとやり直し、GeoJSON の入出力。
• ビューポート連動のライブデータ useLiveData() カメラの移動に合わせたバウンディングボックス単位の再取得と、リアルタイム更新。
• MIL-STD-2525D 記号 動的インポート 9 MB の記号 SDK は必要になったときだけ読み込まれ、記号を表示しないバンドルには決して入りません。
• 型付きテーマとラベル theme · labels ライトとダーク、prefers-reduced-motion に対応、すべて翻訳可能。ハードコードされた文字列も数値もどこにもありません。

• 

  描画と選択リサイズと回転のハンドル、リアルタイムの選択パネル、取り消しとやり直し

• 

  MIL-STD-2525D パレット友軍・敵性・中立・不明 —— SDK は必要時に読み込み

• 

  カタログとデータソースソースを 1 つ有効にすると 252 地点が届き、クラスタが組み直される

• 

  ライトテーマ設定ひとつ —— 地図を含む UI 全体がそれに従う

import { Map, markersLayer, type MarkerData } from '@pasquelin/map3d'

type Alert = { title: string }

const alerts: MarkerData<Alert>[] = [
  { id: 1, type: 'critical', position: { lat: 48.8566, lng: 2.3522 }, title: 'Intrusion', data: { title: 'Intrusion' } },
  { id: 2, type: 'info', position: { lat: 48.8606, lng: 2.3376 }, title: 'Patrol', data: { title: 'Patrol' } },
]

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Map
        center={{ lat: 48.8566, lng: 2.3522 }}
        zoom={13}
        layers={[markersLayer<Alert>({ points: alerts, cluster: { enabled: true } })]}
      />
    </div>
  )
}

任意のプラグイン —— IGN Géoplateforme、Windy、屋内フロアプラン —— は別リポジトリにあり、プラグイン API で自作もできます。