Mapbox Sources - izudon/izudon.github.io GitHub Wiki

Source とは

  • 地図に表示する情報の「源（みなもと）」です。
  • ベクトルタイル、ラスタタイル、GeoJSON、オーバレイする画像、動画など、 Leaflet では必ずしもそうでなかったものも含めたあらゆるものが、 Mapbox では Source として扱われます。
Leaflet Mapbox
タイル -> Source ラスタタイル（type: raster）
- -> Source ベクトルタイル（type: vector）
- -> Source 標高タイル（type: raster-dem）
GeoJSON -> Source GeoJSON（type: geojson）
（オーバレイ）画像 -> Source 画像（type: image）
（オーバレイ）動画 -> Source 動画（type: video）

Source の追加

  1. スタイルファイルに記述し、スタイルファイルが読み込まれる。
    スタイルファイルの例（抜粋）： 
    "sources": {
    "openmaptiles": {
    "type": "vector",
    "tiles": ["https://hfu.github.io/jp1710_{z}/{x}/{y}.mvt"],
    "attribution": "(c) OpenStreetMap contributors (c) OpenMapTiles",
    "maxzoom": 14
},
  2. JavaScript の中で、動的に追加される。
    JavaScript の例（抜粋）： 
    map.addSource( 'kansai-cinema', {
    type: 'geojson',
    data: '/assets/map/kansai-cinema.geojson'
});
  3. JavaScript の中で、Layer とともに、動的に追加される。
    JavaScript の例（抜粋）： 
    map.addLayer({
    'id': 'points',
    'type': 'symbol',
    'source': {
 	   'type': 'geojson',
 	   'data': {
 		   'type': 'FeatureCollection',
 		   'features': [
 			   {
 				   'type': 'Feature',
 				   'geometry': {
 					   'type': 'Point',
 					   'coordinates': [0, 0]
 				   }
 			   }
 		   }
 	   }
 	}
 });

Source の中身（プロパティ）

  • Source オブジェクトは id: type: のほか、
    data: url: coordinates: など様々なプロパティを持つが、
    そのバリエーションが type ごとに変わってくる。
  • バリエーションの類似ごとに type: をグループ分けすると、
    下記のようになる。
    • vector raster raster-dem
    • geojson
    • image video
  • Mapbox GL JS | Stype specification | Sources の項には、
    サイドバーにこの type ごとに節が切ってあって、
    どの type でどのプロパティが必要とされるかを
    記述するという書き方をとっている。

以上で、このページで言いたいことは大体言い終わって、 あとは「ドキュメント見てください」でいいと思うのだが。

ドキュメントは英語なのでちょっとだけ要約を載せておきます。

type 別 Source のプロパティ

共通

  • id
    • あとで Layer などから Source を指定するときなどに
      識別子として用いる。
  • type
    • Source のタイプ（型）を指定する。

vector raster raster-dem グループ

共通

  • attribution
    • 出典（情報の出元）、権利関係などの注釈。
  • minzoom
    • データが有効となるズームレベル
  • maxzoom
    • データが無効となるズームレベル
  • bounds
    • データが存在する緯度経度範囲
  • scheme
    • xyz または tms
  • tiles
    • TileJSON 形式に則ったタイルの配列。
    • 負荷分散・可用性向上目的で複数書く（配列）ことができる。
  • url
    • TileJSON の URL に記載するような URL 。
    • TileJSON を tiles: に記載せずとも URL だけでも動かせる。

vector

raster raster-dem

  • tileSize
    • 世の多くのタイルは 256px x 256px だが、
      Mapbox のタイルは 512px x 512px 。
    • こういうケースのためにタイルサイズ（ピクセル）を
      オプション指定できる。

raster-dem

  • encoding
    • 標高をコード化してある方式を記述する。
    • terrarium or mapbox default mapbox

geojson グループ

  • attribution
    • 出典（情報の出元）、権利関係などの注釈。
  • data
    • GeoJSON のデータそのもの。
    • GeoJSON のパス（URL）、または GeoJSON オブジェクト。
      • GeoJSON パスの例
      map.addSource( 'kansai-cinema', {
    type: 'geojson',
	data: '/assets/map/kansai-cinema.geojson'
});
      • GeoJSON オブジェクトの例
      map.addSource( 'kansai-cinema', {
	'type': 'geojson',
	'data': {
		'type': 'FeatureCollection',
		'features': [
			{
				'type': 'Feature',
				'geometry': {
					'type': 'Point',
					'coordinates': [0, 0]
				}
			}
		}
	}
});
    • パスで指定する場合は、同一ドメイン内か、
      CORS された（信頼性担保された）サイトのものでなければならない。
  • buffer
  • generateId
  • lineMetrics
  • maxzoom
  • promoteId
  • tolerance

クラスタ機能

  • 高いズームレベルでは別々に表示させていた「点」を、
    低いズームレベルではまとめて１個の「点」として表示する機能がある。
    • cluster （ブドウの）房、集める、集まる、群がる。
  • 以下の４プロパティはこれを実現するためのもの。
    • cluster : true ならこの機能を使う。
    • clusterRaduis : この半径以内に近づいた点同士は集約表示（多分）。
    • clusterMaxzoom : このズームレベル以降は個別表示。
    • clusterProperties : クラスタ化で集計に使える変数フィールド。

きっとどこかまた別のところで言及します。

メモ：

  1. ブログ記事
  2. GitHub 上での質疑応答
  3. Mapbox 公式に上がっている作例

image video グループ

共通

  • coordinates
    • オーバレイする矩形の四隅の緯度経度を
      左上から順に時計回りに書いていく。

image

  • url
    • 画像のパス

video

  • urls
    • 動画のパスの配列。
    • image と違って配列なのは、ブラウザの互換性のため、
      異なる動画フォーマットのもの一連を登録できるように。

以上！

お疲れ様でした。