globe-gl

Globe.GL スキル

ワークフロー

1. 環境（プレーンな HTML、フレームワーク、React バインディング）と必要なデータレイヤーを確認します。
2. 最小限のクイックスタートスニペットと、レイヤー固有のフィールドを提示します。
3. リクエストがあった場合にのみ、インタラクションや追加のレイヤーを加えます。
4. コンテナーのサイズ設定とパフォーマンスに関する考慮事項を伝えます。

クイックスタート（ESM）

<script type="module">
  import Globe from 'globe.gl';

  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

クイックスタート（script タグ）

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

よく使われるレイヤー

• ポイント
• アーク
• ポリゴン
• パス
• ヒートマップとヘックスビン
• ラベルまたは HTML 要素
• 3D オブジェクトとカスタムレイヤー

実用的なヒント

• CSS でコンテナーのサイズを設定します。地球儀は親要素いっぱいに表示されます。
• モバイルでのパフォーマンスを高めるには、ポイントの数やサイズを減らします。
• ネオンスタイルのデータオーバーレイには、暗めの地球儀テクスチャを使用します。

仕様が不足している場合に尋ねる質問

• どのレイヤー（ポイント、アーク、ポリゴン、ラベル）が必要ですか？
• デスクトップとモバイルで、地球儀のサイズはどの程度にしますか？
• ドラッグ／回転のインタラクションを付けますか、それとも地球儀を静止させますか？
• プレーンな HTML、React（react-globe.gl）、それとも別のフレームワークを使いますか？