ウェブ地図のためのGeoJSON：ガイド

2026-03-02

geojsonleafletmapboxウェブ地図javascript

GeoJSONは、ウェブにおける地理データ交換の主要なフォーマットです。Leaflet、Mapbox GL JS、OpenLayers、deck.glといった人気のすべての地図ライブラリが、GeoJSONをネイティブにサポートしています。osm2cdr.ruなら、任意のOpenStreetMapの範囲を数秒でGeoJSONにエクスポートできます。

GeoJSONの構造

GeoJSONファイルは、FeatureCollectionタイプのオブジェクトを持つ通常のJSONです。各Featureには、ジオメトリ（点、線、ポリゴン）とプロパティ（properties）が含まれます。プロパティはOpenStreetMapのタグ — 名称、オブジェクトの種類、住所、その他の属性です。

Leafletへの接続方法

ウェブ地図にGeoJSONを表示する最も簡単な方法：

fetch('/data/moscow-buildings.geojson')
  .then(r => r.json())
  .then(data => L.geoJSON(data, {
    style: { color: '#3388ff', weight: 1, fillOpacity: 0.3 }
  }).addTo(map));

プロパティによるスタイリング

osm2cdr.ruのGeoJSONは、OSMのタグ（highway、building、amenity、naturalなど）を保持します。これにより、種類ごとにオブジェクトをスタイリングできます：

L.geoJSON(data, {
  style: function(feature) {
    if (feature.properties.building) return { color: '#e74c3c' };
    if (feature.properties.natural === 'water') return { color: '#3498db' };
    return { color: '#95a5a6' };
  }
});

大規模データの最適化

GeoJSONは、小〜中規模の範囲（最大50 km²）に適しています。大きな領域には：

GeoJSON-Seq — ストリーミングフォーマット。ファイルが行ごとに読み込まれます。
PMTiles — 数百万のオブジェクトを即座に表示できる、クラウドネイティブなタイルフォーマット。
ベクタータイル — 地図のナビゲーションに合わせて随時読み込まれます。

GeoJSONを扱うツール

geojson.io — 表示と編集のためのオンラインエディタ。
Mapshaper — ジオメトリの簡略化と変換。
Turf.js — ブラウザ上で直接行える空間分析。
QGIS — 複雑な処理のための本格的なGIS。