Debianでka-MapのメモプラスOpenLayers とGeoExt: Leaflet 1.3

4-9 WMS and TMS

How to integrate with WMS and TMS services from professional GIS software.

プロフェッショナル GIS ソフトウェアから WMS と TMS サービスを統合する方法

WMS, short for web map service, is a popular way of publishing maps by professional GIS software (and seldomly used by non-GISers). This format is similar to map tiles, but more generic and not so well optimized for use in web maps. A WMS image is defined by the coordinates of its corners - a calculation that Leaflet does under the hood.

web map service（ウェブマップサービス）の略である WMS は、プロフェッショナル GIS ソフトウェアマップを編集する一般的な方法です（そして、GIS使用者でないとめったに使われません）。このフォーマットはマップタイルに似ていますが、もっと一般的で、そして、ウェッブマップで使用するためにとてもよく最適化されているとは言えません。WMS 画像はその隅の座標 - Leaflet が見えないところでしている計算 - によって定義されます。

TMS stands for tiled map service, and is a map tiling standard more focused on web maps, very similar to the map tiles that Leaflet expects in a L.TileLayer.

TMS は、タイル（化された）マップサービスを表し、ウェッブマップにさらに焦点を当てたマップタイル基準であり、Leaflet が L.TileLayer で要求するマップタイルにとても似ています。

WMS in Leaflet

When somebody publishes a WMS service, most likely they link to something called a GetCapabilities document. For this tutorial, we’ll use the demo map services from GeoServer, at https://demo.boundlessgeo.com/geoserver/web/. As you can see in that page, “WMS” links to the following URL:

誰かが WMS サービスを編集するとき、おそらく GetCapabilities ドキュメントを呼び出すものにリンクします。このチュートリアルで、https://demo.boundlessgeo.com/geoserver/web/　の GeoServer からマップサービスを使います。このページに見られるように、「WMS」は次の URL でリンクします：

https://demo.boundlessgeo.com/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities

Leaflet does not understand WMS GetCapabilities documents. Instead, you have to create a L.TileLayer.WMS layer, provide the base WMS URL, and specify whatever WMS options you need.

Leaflet は、WMS GetCapabilities ドキュメントを理解しません。かわりに、L.TileLayer.WMS layer を作成し、ベース WMS URL を提供し、必要な WMS オプションを何でも指定しなければなりません。 The base WMS URL is simply the GetCapabilities URL, without any parameters, like so: ベース WMS URL は、単純な GetCapabilities URL で、パラメータはなく、このようになります：

https://demo.boundlessgeo.com/geoserver/ows?

And the way to use that in a Leaflet map is simply:

Leaflet でマップ（map）を使用する方法は簡単です：

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

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', wmsOptions).addTo(map);

An instance of L.TileLayer.WMS needs at least one option: layers. Be careful, as the concept of “layer” in Leaflet is different from the concept of “layer” in WMS!

L.TileLayer.WMS の例では、少なくとも１つ option: layers が必要です。Leaflet での「layer」の概念は WMS での「layer」の概念と違うので、注意してください。

WMS servers define a set of layers in the service. These are defined in the GetCapabilities XML document, which most times is tedious and difficult to understand. Usually it’s a good idea to use software such as QGIS to see what layers are available in a WMS server to see the layer names available:

WMS サーバはサービスでレイヤ一式を定義します。これらは GetCapabilities XML ドキュメントで定義され、大抵の場合は大量の単語で理解が困難です。通常は、使えるレイヤ名を調べるために、WMS サービスでどのレイヤが有効か確認するため QGIS のようなソフトウェアを使用することは良い考えです：

We can see that the OpenGeo demo WMS has a WMS layer named ne:ne with a basemap. Let’s see how it looks:

OpenGeo demo WMS は、basemap で ne:ne と名付けられた WMS レイヤがあることを確認できます。それがどのように見えるか確認しましょう：

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
 layers: 'ne:ne'
}).addTo(map);

Or we can try the nasa:bluemarble WMS layer:

または、nasa:bluemarble WMS レイヤを試すことができます。

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
 layers: 'nasa:bluemarble'
}).addTo(map);

The layers option is a comma-separated list of layers. If a WMS service has defined several layers, then a request for a map image can refer to more than one layer.

layers オプションは、レイヤのカンマで区切られたリストです。もし WMS サーバがいくつかのレイヤで定義されているなら、マップ画像のリクエストは一つ以上のレイヤを参照できます。

For the example WMS server we’re using, there is a ne:ne_10m_admin_0_countries WMS layer showing country landmasses and country names, and a ne:ne_10m_admin_0_boundary_lines_land WMS layer showing country boundaries. The WMS server will compose both layers in one image if we request both, separated with a comma:

私達が使用している example WMS server のために、国土と国名を表示する ne:ne_10m_admin_0_countries WMS レイヤ、および、国境を表示する ne:ne_10m_admin_0_boundary_lines_land WMS レイヤがあります。WMS サーバは、もしカンマで区切られた両方リクエストするなら、両方のレイヤを一つの画像で構成します：

var countriesAndBoundaries = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
 layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}).addTo(map);

Note this will request one image to the WMS server. This is different than creating a L.TileLayer.WMS for the countries, another one for the boundaries, and adding them both to the map. In the first case, there is one image request and it’s the WMS server who decides how to compose (put on top of each other) the image. In the second case, there would be two image requests and it’s the Leaflet code running in the web browser who decides how to compose them.

これは WMS サーバに一つの画像をリクエストしていることに注意してください。これは、国ともう一つの国境のために L.TileLayer.WMS を作成し、それらを両方マップに追加するのとは違います。最初のケースは、１つの画像リクエストがあり、画像を構成（お互いを前面に配置）する方法を決定するのは WMS サーバです。２番めのケースは、２つの画像リクエストがあり、それらを構成する方法を決定するのはウェッブブラウザで実行する Leaflet コードです。

If we combine this with the layers control, then we can build a simple map to see the difference:

もし layers control（レイヤコントロール）でこれを組み合わせるなら、相違を確認するために単純なマップを構築できます：

var basemaps = {

 Countries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {

  layers: 'ne:ne_10m_admin_0_countries'
 }),

 Boundaries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {

  layers: 'ne:ne_10m_admin_0_boundary_lines_land'
 }),

 'Countries, then boundaries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {

  layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
 }),

 'Boundaries, then countries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {

  layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
 })
};

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

basemaps.Countries.addTo(map);

Change to the “Countries, then boundaries” option, so you can see the boundaries “on top” of the landmasses, but the WMS server is clever enough to display building labels on top of that. It’s up to the WMS server how to compose layers when asked for many.

「Countries、それから boundaries」オプションを変えると、国土の前面に国境を確認できますが、WMS は、その前面に構築するラベルを表示するほど優秀です。たくさん尋ねられたとき、レイヤを構成する方法を WMS が決定します。

Notes to GIS users of WMS services
WMS サーバの GIS ユーザへの注意事項

From a GIS point of view, WMS handling in Leaflet is quite basic. There’s no GetCapabilities support, no legend support, and no GetFeatureInfo support.

GIS の観点から、Leaflet であつかう WMS は全く基本的です。GetCapabilities サポートと legend（凡例）サポート、GetFeatureInfo サポートはありません。

L.TileLayer.WMS has extra options, which can be found in Leaflet’s API documentation. Any option not described there will be passed to the WMS server in the getImage URLs.

L.TileLayer.WMS は、特別なオプションがあり、 Leaflet API ドキュメントで見つけられます。そこの記述がないいくつかのオプションは、getImage URLs で WMS に渡されます。

Also note that Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 and CRS:4326 (See the documentation for L.CRS). If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet. Other than that, just use the right CRS when initializing your map, and any WMS layers added will use it:

Leaflet はとても僅かな座標系システム：CRS:3857、CRS:3395、CRS:4326（L.CRS ドキュメントを参照）しかサポートしていないことに注意してください。もし WMS サービスがそれらの座標系システムで画像を供給しない場合、Leaflet で異なる座標系システムを使用するために Proj4Leaflet を使う必要があります。それ以外は、マップを初期化するとき正しい CRS を使うだけで、追加されたWMS レイヤはそれを使います。

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

var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
 layers: 'nasa:bluemarble'
}).addTo(map);

TMS in Leaflet

Leaflet doesn’t have explicit support for TMS services, but the tile naming structure is so similar to the common L.TileLayer naming scheme, that displaying a TMS service is almost trivial.

Leaflet は、TMS サービスの明示的なサポートはありませんが、タイルネーミング構造は、ごく普通の TMS サービスを表示する、通常の L.TileLayer ネーミングスキーム（体系）にとても似ています。

Using the same OpenGeo WMS/TMS server demo, we can see there’s a TMS endpoint at:

同じ OpenGeo WMS/TMS サーバデモを使用するとき、終点があることを確認できます：

https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0

Checking the MapCache help about TMS and the TMS specification you can see that the URL for a map tile in TMS looks like:

TMS と TMS 使用について MapCache ヘルプを確かめると、TMS のマップタイルの URL が次のようであることを確認できます：

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

To use the OpenGeo TMS services as a L.TileLayer, we can check the capabilities document (the same as the base endpoint, in our case https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0) to see what tilesets are available, and build our base URLs:

L.TileLayer として OpenGeo TMS サービスを使用するために、タイルセットが有効であることを確認するために capabilities ドキュメント（ベース終了点と同じで、この場合 https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0）を確かめ、ベース URLs を構築できます。

訳注：このリンク先で次のように表示され、penGeo TMS サービスのタイルセットが無効になっていました。

400: Could not locate a layer or layer group with id LayerInfoImpl-27d2b3a0:15c6507c77c:-7ff5 within GeoServer configuration, the GWC configuration seems to be out of synch

https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png

https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg

And use the tms:true option when instantiating the layers, like so:

そして、レイヤのインスタンスを生成するとき、次のように、tms:true オプションを使います：

var tms_ne = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
 tms: true
}).addTo(map);

var tms_bluemarble = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
 tms: true
});

A new feature in Leaflet 1.0 is the ability to use {-y} in the URL instead of a tms: true option, e.g.:

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

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

The tms: true option (in Leaflet 0.7) or {-y} (in Leaflet 1.0) are needed because the origin of coordinates of vanilla L.TileLayers is the top left corner, so the Y coordinate goes down. In TMS, the origin of coordinates is the bottom left corner so the Y coordinate goes up.

普通の L.TileLayers の座標の原点が左上隅なので、（Leaflet 0.7 での）tms: true オプション、または、（Leaflet 1.0 での）{-y} が必要とされ、Y 座標は下に下がります。TMS では、座標の原点は左下隅で、Y 座標は上に上がります。

Besides the difference in the y coordinate and the discovery of tilesets, TMS services serve tiles exactly in the way that L.TileLayer expects.

Y 座標の相違とタイルセットの発見を除いて、TMS サービスは、 L.TileLayer が要求する方法で正確にタイルを供給します。

TMS については、地理院タイルを使用してみました。「地理院タイルを用いたサイト構築サンプル集（http://maps.gsi.go.jp/development/sample.html）」を参考にしました。

コード全体

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="./leaflet13/leaflet.css" />
  <script src="./leaflet13/leaflet.js"></script>

  <title>WMS and TMS</title>
 </head>
 <body>

  <div id="map" style="width: 600px; height: 400px;"></div>

  <script>

   //WMS in Leaflet
   /*
   var map = L.map('map', {
 center: [-17, -67],
 zoom: 3
   });
   */

   /*
   var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
    // layers: 'ne:ne'
    layers: 'nasa:bluemarble'
   }).addTo(map);
   */

   /*
   var basemaps = {
    Countries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
     layers: 'ne:ne_10m_admin_0_countries'
    }),

    Boundaries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
     layers: 'ne:ne_10m_admin_0_boundary_lines_land'
    }),

    'Countries, then boundaries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
     layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
    }),

    'Boundaries, then countries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
     layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
    })
   };

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

   basemaps.Countries.addTo(map);
   */

   //Notes to GIS users of WMS services
   /*
   var map = L.map('map', {
    center: [0, 0],
    zoom: 1,
    crs: L.CRS.EPSG4326
   });

   var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
    layers: 'nasa:bluemarble'
   }).addTo(map);
   */

   //TMS in Leaflet
   /*
   var map = L.map('map', {
    center: [-17, -67],
    zoom: 3
   });

   var tms_ne = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
    tms: true
   }).addTo(map);

   var tms_bluemarble = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
    tms: true
   });

   var basemaps = {
    'Natural Earth': tms_ne,
    'NASA Blue Marble': tms_bluemarble
   };

   L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);

   basemaps.Countries.addTo(map);
   */

   var map = L.map('map', {
    center: [35.3622222, 138.7313889],
    zoom: 5
   });

    var tms_std = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
   }).addTo(map);

   var tms_pale = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
   });

   var basemaps = {
    'Japan STD Map': tms_std,
    'Japan Pale Map': tms_pale
   };

   L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);

   basemaps.Countries.addTo(map);

  </script>
 </body>
</html>

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2018年6月6日水曜日

Leaflet 1.3 - 4-9 WMS and TMS

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ