MapLibre GL JS - 背景地図ガイド

OpenStreetMap系

OSM Japan Style

日本語表示に最適化されたOpenStreetMapスタイル

map.setStyle('https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json');

OpenStreetMap Standard

標準的なOpenStreetMapタイル

// Raster Tileとして使用
map.setStyle({
  version: 8,
  sources: {
    osm: {
      type: 'raster',
      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256
    }
  },
  layers: [{
    id: 'osm',
    type: 'raster',
    source: 'osm'
  }]
});

航空写真・衛星写真

ESRI World Imagery

世界的に高品質な衛星・航空写真

map.setStyle({
  version: 8,
  sources: {
    satellite: {
      type: 'raster',
      tiles: [
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
      ],
      tileSize: 256
    }
  },
  layers: [{
    id: 'satellite',
    type: 'raster',
    source: 'satellite'
  }]
});

Sentinel-2 Cloudless (2021)

EOXが提供するクラウドフリーなSentinel-2衛星画像

map.setStyle({
  version: 8,
  sources: {
    sentinel: {
      type: 'raster',
      tiles: [
        'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2021_3857/default/g/{z}/{y}/{x}.jpg'
      ],
      tileSize: 256,
      attribution: '© EOX IT Services GmbH | Contains modified Copernicus Sentinel data 2021'
    }
  },
  layers: [{
    id: 'sentinel-layer',
    type: 'raster',
    source: 'sentinel'
  }]
});

📡 衛星写真の特徴
• Sentinel-2 Cloudless: 10m解像度、雲なし合成画像、無料
• ESRI World Imagery: 商用高品質画像
• 利用用途: 地形把握、建物確認、災害調査、農業監視

地理院地図

地理院地図標準地図

国土地理院が提供する公式地図

map.setStyle({
  version: 8,
  sources: {
    gsi: {
      type: 'raster',
      tiles: [
        'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
      ],
      tileSize: 256,
      attribution: '© 国土地理院'
    }
  },
  layers: [{
    id: 'gsi',
    type: 'raster',
    source: 'gsi'
  }]
});

地理院地図航空写真

国土地理院の航空写真

map.setStyle({
  version: 8,
  sources: {
    gsi_photo: {
      type: 'raster',
      tiles: [
        'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'
      ],
      tileSize: 256,
      attribution: '© 国土地理院'
    }
  },
  layers: [{
    id: 'gsi_photo',
    type: 'raster',
    source: 'gsi_photo'
  }]
});

地理院地図ベクター

国土地理院のベクトルタイル（動作確認済み）

map.setStyle('https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json');

地理院地図色別標高図

標高を色分けした地形図

map.setStyle({
  version: 8,
  sources: {
    relief: {
      type: 'raster',
      tiles: [
        'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png'
      ],
      tileSize: 256,
      attribution: '© 国土地理院'
    }
  },
  layers: [{
    id: 'relief',
    type: 'raster',
    source: 'relief'
  }]
});

🏛️ 地理院地図の特徴
• ベクトルタイル: 高速、スケーラブル、カスタマイズ可能
• ラスタータイル: 既成スタイル、軽量
• 国土地理院が公式提供、測量法に基づく正確性
• 日本国内に特化、無料で利用可能

地図タイプ比較

種類	解像度	更新頻度	費用	用途
OSM	ベクター	リアルタイム	無料	一般的なWeb地図
航空写真	30cm-1m	数ヶ月-数年	有料が多い	現地確認、測量
衛星写真	1m-30m	数日-数ヶ月	有料が多い	広域調査、災害監視
Sentinel-2 Cloudless	10m	年次更新	無料（要帰属）	環境監視、農業
地理院ベクター	ベクター	定期更新	無料	日本の公式地図

🎯 用途別おすすめ
Webアプリ: OSM Japan Style
不動産: 航空写真 + 地理院地図
物流: OSM Standard
防災: 地理院地図 + 衛星写真
観光: OSM + 航空写真

⚠️ 商用利用時の注意
• OSM: 帰属表示が必要
• 航空写真: ライセンス確認必須
• 地理院地図: 利用規約の確認
• アクセス制限・費用の確認

実装のベストプラクティス

複数地図の切り替え

// 地図スタイル切り替え機能
const basemaps = {
  'standard': 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json',
  'satellite': {
    version: 8,
    sources: {
      satellite: {
        type: 'raster',
        tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}']
      }
    },
    layers: [{ id: 'satellite', type: 'raster', source: 'satellite' }]
  }
};

function changeBasemap(type) {
  map.setStyle(basemaps[type]);
}

レイヤー合成

// 衛星写真 + 道路ラベルの合成
map.on('style.load', () => {
  // 衛星写真をベースに
  map.addSource('satellite', { /* 衛星写真ソース */ });
  map.addLayer({ id: 'satellite', type: 'raster', source: 'satellite' });
  
  // 道路・ラベルレイヤーを上に重ねる
  map.addSource('labels', { /* ラベルソース */ });
  map.addLayer({ 
    id: 'roads', 
    type: 'line', 
    source: 'labels',
    paint: { 'line-color': 'yellow' }
  });
});

パフォーマンス最適化

// タイル読み込み最適化
map.setMaxZoom(18);  // 最大ズームレベル制限
map.setMinZoom(5);   // 最小ズームレベル制限

// プリロード設定
map.on('idle', () => {
  // 周辺タイルをプリロード
  map.getSource('basemap').reload();
});

// メモリ使用量制限
map.setMaxTileCacheSize(50); // MB

💡 実装のコツ
• ユーザーの用途に応じた地図選択
• 複数地図の切り替え機能提供
• ハイブリッド表示でより詳細な情報
• 適切な帰属表示の実装
• パフォーマンスの考慮

背景地図の種類