大規模データセットを最適化してレンダリングする

更新日2026年8月4日

このガイドを終えると、パフォーマンスオプションを有効にして大規模な GeoJSON データセットを効率的に読み込めるようになります。このガイドは、レイヤの追加に慣れていることを前提としています（レイヤを追加するを参照）。

座標が何千もある非常に大きな GeoJSON ファイルは、通常の方法で読み込むとレンダリングが遅くなることがあります。Re:Earth Visualizer には useAsResource というパフォーマンスオプションがあり、大規模な GeoJSON データをより効率的に処理できます。フィーチャが約 6,000 を超える GeoJSON にはこのオプションを使用してください。

サンプルコード

この例では、パフォーマンスオプションを有効にして東京エリアの境界を表す大規模な GeoJSON レイヤを追加します。

reearth.yml

id: large-dataset-plugin
name: Large Dataset Plugin
version: 1.0.0
extensions:
  - id: large-dataset
    type: widget
    name: Large Dataset

large-dataset.js

reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/tokyo-boundary.geojson",
    geojson: {
      useAsResource: true,
    },
  },
  polygon: {},
});

reearth.camera.flyTo(
  { lat: 35.68, lng: 139.40, height: 176000 },
  { duration: 2 }
);

結果

GeoJSON の境界データが読み込まれ、東京エリア全体にレンダリングされます。useAsResource が有効になっているため、Visualizer 側からのスタイリングは適用されず、デフォルトの色で表示されます。外観を変更するには、GeoJSON ファイル自体にスタイルを定義してください（下記参照）。

Re Visualizer の地図上にレンダリングされた大規模な GeoJSON 境界レイヤ

地図データ提供：OpenStreetMap

仕組み

パフォーマンスオプションはレイヤの data ブロック内の geojson キーに設定します。

data: {
  type: "geojson",
  url: "https://example.com/large-data.geojson",
  geojson: {
    useAsResource: true,
  },
}

useAsResource: true を設定すると、Re:Earth Visualizer は大規模データセット向けに最適化された方法で GeoJSON をレンダリングします。フィーチャが約 6,000 を超える GeoJSON に推奨されます。

useAsResource が有効な場合、Visualizer 側からレイヤをスタイリングできません（例：polygon、marker、polyline の外観オプション）。代わりに、GeoJSON ファイルの各フィーチャに標準のスタイルプロパティを直接定義してください。例：

"properties": {
  "stroke": "#fb0404",
  "stroke-width": 2,
  "stroke-opacity": 1
}

次のステップ

レイヤを追加する: このガイドの土台となるレイヤの基本
reearth.layers API リファレンス: 完全なレイヤとデータオブジェクト