← チュートリアル

WMS（Web Map Service の略）は、プロフェッショナルな GIS ソフトウェアによって地図を公開する一般的な方法です（GIS 関係者以外が使用することはまれです）。この形式は地図タイルに似ていますが、より汎用的であり、ウェブマップでの使用には最適化されていません。WMS 画像は、その角の座標によって定義されます。これは Leaflet が内部で計算します。

TMS は Tiled Map Service の略で、ウェブマップに特化した地図タイルの標準であり、Leaflet が L.TileLayer で期待する地図タイルと非常によく似ています。

WMTS（Web Map Tile Service の略）は、地図タイルの標準プロトコルであり、L.TileLayer で直接使用できる地図タイルを提供します。

Leaflet における WMS

WMS サービスを公開する場合、ほとんどの場合、GetCapabilities ドキュメントと呼ばれるものへのリンクが含まれています。このチュートリアルでは、Mundialis が http://ows.mundialis.de/services/service? で提供する WMS を使用します。サービスの機能は、次の URL で説明されています。

http://ows.mundialis.de/services/service?request=GetCapabilities

Leaflet は、WMS の GetCapabilities ドキュメントを理解しません。代わりに、L.TileLayer.WMS レイヤーを作成し、ベースとなる WMS URL を提供し、必要な WMS オプションを指定する必要があります。

ベースとなる WMS URL は、次のように、GetCapabilities URL からパラメーターを取り除いたものです。

http://ows.mundialis.de/services/service?

そして、Leaflet マップでそれを使用する方法は次のとおりです。

var map = L.map(mapDiv, mapOptions);

var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', wmsOptions).addTo(map);

L.TileLayer.WMS のインスタンスには、少なくとも 1 つのオプション layers が必要です。Leaflet における「レイヤー」の概念は、WMS における「レイヤー」の概念とは異なるため注意してください！

WMS サーバーは、サービス内で一連の *レイヤー* を定義します。これらは GetCapabilities XML ドキュメントで定義されており、ほとんどの場合、理解するのが面倒で困難です。通常、QGIS などのソフトウェアを使用して、WMS サーバーで利用可能なレイヤーを確認すると、利用可能なレイヤー名を確認するのに便利です。

Mundialis WMS には、ベースマップを持つ TOPO-OSM-WMS という名前の WMS レイヤーがあることがわかります。どのように見えるか見てみましょう。

var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
	layers: 'TOPO-OSM-WMS'
}).addTo(map);

または、SRTM30-Colored-Hillshade WMS レイヤーを試すこともできます。

var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
	layers: 'SRTM30-Colored-Hillshade'
}).addTo(map);

layers オプションは、レイヤーのカンマ区切りリストです。WMS サービスで複数のレイヤーが定義されている場合、地図画像のリクエストは複数のレイヤーを参照できます。

使用しているサンプル WMS サーバーには、世界の地形を示す TOPO-WMS WMS レイヤーと、場所の名前を示す OSM-Overlay-WMS WMS レイヤーがあります。両方のレイヤーをカンマで区切ってリクエストすると、WMS サーバーは両方のレイヤーを 1 つの画像に合成します。

var topographyAndPlaces = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
	layers: 'TOPO-WMS,OSM-Overlay-WMS'
}).addTo(map);

これは、WMS サーバーに *1 つ* の画像のリクエストを行うことに注意してください。これは、地形用の L.TileLayer.WMS を作成し、場所用にもう 1 つ作成し、両方をマップに追加するのとは異なります。最初の場合、1 つの画像リクエストが行われ、画像をどのように構成するか (重ねて表示するか) を決定するのは WMS サーバーです。2 番目の場合、2 つの画像リクエストが行われ、それらをどのように構成するかを決定するのは、Web ブラウザーで実行される Leaflet コードです。

レイヤーコントロールと組み合わせると、違いを確認するための簡単なマップを構築できます。

var basemaps = {
	Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
		layers: 'TOPO-WMS'
	}),

	Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
		layers: 'OSM-Overlay-WMS'
	}),

	'Topography, then places': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
		layers: 'TOPO-WMS,OSM-Overlay-WMS'
	}),

	'Places, then topography': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
		layers: 'OSM-Overlay-WMS,TOPO-WMS'
	})
};

L.control.layers(basemaps).addTo(map);

basemaps.Topography.addTo(map);

「地形、次に場所」オプションに変更すると、地形の「上」に場所が表示されますが、WMS サーバーは建物のラベルをその上に表示するほど賢いです。複数のレイヤーを要求されたときにレイヤーをどのように構成するかは、WMS サーバー次第です。

WMS サービスの GIS ユーザーへの注意事項

GIS の観点からすると、Leaflet での WMS の処理は非常に基本的なものです。GetCapabilities のサポート、凡例のサポート、GetFeatureInfo のサポートはありません。

L.TileLayer.WMS には追加のオプションがあり、Leaflet の API ドキュメントに記載されています。そこに記述されていないオプションはすべて、getImage URL で WMS サーバーに渡されます。

また、Leaflet がサポートする 座標系 は、CRS:3857、CRS:3395、CRS:4326 ( L.CRS のドキュメントを参照) のごくわずかであることに注意してください。WMS サービスがこれらの座標系で画像を配信しない場合は、Proj4Leaflet を使用して、Leaflet で別の座標系を使用する必要があるかもしれません。それ以外の場合は、マップを初期化するときに適切な CRS を使用するだけで、追加されたすべての WMS レイヤーがそれを使用します。

var map = L.map('map', {
	crs: L.CRS.EPSG4326
});

var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
	layers: 'TOPO-OSM-WMS'
}).addTo(map);

Leaflet における TMS

Leaflet は TMS サービスを明示的にサポートしていませんが、タイル命名構造は一般的な L.TileLayer 命名スキームと非常に似ているため、TMS サービスを表示することはほぼ簡単です。

次のエンドポイントを持つ TMS サーバーを検討してみましょう。

http://base_url/tms/1.0.0

TMS に関する MapCache ヘルプとTMS 仕様を確認すると、TMS の地図タイルの URL は次のようになることがわかります。

http://base_url/tms/1.0.0/ {tileset} / {z} / {x} / {y} .png

TMS サービスを L.TileLayer として使用するには、機能ドキュメント (ベースエンドポイントと同じ、この場合は http://base_url/tms/1.0.0) を確認して、利用可能な tileset を確認し、ベース URL を構築できます。

http://base_url/tms/1.0.0/{example_layer}@png/{z}/{x}/{y}.png

そして、次のようにレイヤーをインスタンス化するときに tms:true オプションを使用します。

var tms_example = L.tileLayer('http://base_url/tms/1.0.0/example_layer@png/{z}/{x}/{y}.png', {
	tms: true
}).addTo(map);

Leaflet 1.0 の新機能は、tms: true オプションの代わりに URL で {-y} を使用できる機能です。例：

var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');

tms: true オプション (Leaflet 0.7) または {-y} (Leaflet 1.0) が必要な理由は、標準の L.TileLayer の座標の原点が左上隅であるため、Y 座標が *下* に移動するためです。TMS では、座標の原点が *左下* 隅であるため、Y 座標が *上* に移動します。

y 座標の違いとタイルセットの検出を除けば、TMS サービスは L.TileLayer が期待するとおりにタイルを提供します。