Debianでka-MapのメモプラスOpenLayers とGeoExt: 6月 2018

2018年6月9日土曜日

Leaflet 1.3 - 4-11 Showing video files

4-11 Showing video files

Leaflet can help you display videos somewhere on the map.

Leaflet は、マップ上のどこかのビデオを表示する支援をします。

Video on webpages
ウェブページのビデオ

Video used to be a hard task when building a webpage, until the <video> HTML element was made available.

ビデオは、<video%gt; HTML エレメントが利用されるようになるまで、ウェブページを構築するときかつては困難な仕事でした。

Nowadays, we can use the following HTML code:

今日、次の HTML コードを使用できます：

<video width="500" controls>
 <source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
  <source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
</video>

To display this video:

このビデオを表示：
（訳注：これは画像です）

If a video can be shown in a webpage in this way, then Leaflet can display it inside a map. It is important that the videos are prepared in such a way that they will fit the map: The video should have a “north-up” orientation, and its proportions should fit the map. If not, it will look out of place.

もし、ビデオがこの方法でウェブページに表示できるなら、Leaflet は、マップ内にそれを表示できます。マップにぴったりはめ込むような方法でビデオが準備されることは重要です：ビデオは「北上」方向を保持し、その形状はマップに合わなければなりません。そうでなければ、不適当に見えます。

Bounds of an image overlay

First of all, create a Leaflet map and add a background L.TileLayer in the usual way:

まず最初に、Leaflet マップを作成し、通常の方法で背景の L.TileLayer を追加します：

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
 id: 'mapbox.satellite',
 attribution: ...
}).addTo(map);

Then, we’ll define the geographical bounds that the video will cover. This is an instance of L.LatLngBounds, which is a rectangular shape:

それから、ビデオが覆う地理的境界を定義します。これは L.LatLngBounds インスタンスで、長方形です：

var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

If you want to see the area covered by a LatLngBounds, use a L.Rectangle:

もし、LatLngBounds によって覆われた地域を確認したいのなら、L.Rectangle を使用します：

L.rectangle(bounds).addTo(map);

map.fitBounds(bounds);

Adding the video overlay

Adding a video overlay works very similar to adding a image overlay. For just one image, L.ImageOverlays is used like this:

ビデオオーバレイを追加することは、イメージオーバレイを追加することにとても似ている作業です。ただ一つのイメージには、L.ImageOverlays はこのように使用されます：

var overlay = L.imageOverlay( imageUrl, bounds, options );

For a video overlay, just:
ビデオオーバレイには、ただ：

● Use L.videoOverlay instead of L.imageOverlay
● Instead of the image URL, specify one video URL or an array of video URLs

● L.imageOverlay の代わりに L.videoOverlay を使用
● イメージ URL の代わりに、一つのビデオ URL、または、ビデオ URLs の配列を指定

var videoUrls = [
 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
 'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];

var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

var videoOverlay = L.videoOverlay( videoUrls, bounds, {
 opacity: 0.8
}).addTo(map);

And just like that, you’ll get the video on your map:

そしてこのように、マップ上のビデオを得られます：

Video overlays behave like any other Leaflet layer - you can add and remove them, let the user select from several videos using a layers control, etc.

ビデオオーバレイは、他の Leaflet レイヤのように動作します - それらの追加と削除ができ、ユーザにレイヤコントロールを使用していくつかのビデオから選択させる、などです。

A bit of control over the video

If you read the API documentation, you’ll notice that the L.VideoOverlay class does not have a play() or pause() method.

もし、API ドキュメントを読むなら、L.VideoOverlay クラスは play() または pause() メソッドがないことに注意してください。

For this, the getElement() method of the video overlay is useful. It returns the HTMLVideoElement (which inherits from HTMLMediaElement) for the overlay - and that has methods like play() and pause(), e.g.

このため、ビデオオーバレイの getElement() メソッドは便利です。それはオーバレイに（HTMLMediaElement から継承する）HTMLVideoElement を返します - そして、例えば play() と pause() のようなメッソドを持ちます。

videoOverlay.getElement().pause();

This allows us to build custom interfaces. For example, we can build a small subclass of L.Control to play/pause this video overlay once it’s loaded:

これは、カスタムインターフェイスを構築することを許可します。例えば、ロードするとこのビデオを再生/一時停止するために L.Control の小さいサブクラスを構築できます：

videoOverlay.on('load', function () {

 var MyPauseControl = L.Control.extend({
  onAdd: function() {
   var button = L.DomUtil.create('button');
   button.innerHTML = '⏸';
   L.DomEvent.on(button, 'click', function () {
    videoOverlay.getElement().pause();
   });
   return button;
  }
 });

 var MyPlayControl = L.Control.extend({
  onAdd: function() {
   var button = L.DomUtil.create('button');
   button.innerHTML = '⏵';
   L.DomEvent.on(button, 'click', function () {
    videoOverlay.getElement().play();
   });
   return button;
  }
 });

 var pauseControl = (new MyPauseControl()).addTo(map);
 var playControl = (new MyPlayControl()).addTo(map);
});

コード全体

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

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

  <title>Showing video files</title>
 </head>
 <body>

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

  <script>
   //Bounds of an image overlay
   var map = L.map('map').setView([37.8, -96], 4);

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

   //Adding the video overlay
   var videoUrls = [

    'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
    'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
   ];

   var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

   //L.rectangle(bounds).addTo(map);

   map.fitBounds(bounds);

   //Adding the video overlay
   var videoOverlay = L.videoOverlay( videoUrls, bounds, {
    opacity: 0.8
   }).addTo(map);

   videoOverlay.on('load', function () {
    var MyPauseControl = L.Control.extend({
     onAdd: function() {
      var button = L.DomUtil.create('button');
      button.innerHTML = '⏸';
      L.DomEvent.on(button, 'click', function () {
       videoOverlay.getElement().pause();
      });
      return button;
     }
    });

    var MyPlayControl = L.Control.extend({
     onAdd: function() {
      var button = L.DomUtil.create('button');
      button.innerHTML = '⏵';
      L.DomEvent.on(button, 'click', function () {
       videoOverlay.getElement().play();
      });
      return button;
     }
    });

    var pauseControl = (new MyPauseControl()).addTo(map);
    var playControl = (new MyPlayControl()).addTo(map);
   });

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

2018年6月7日木曜日

Leaflet 1.3 - 4-10 Working with map panes

4-10 Working with map panes

How the default map panes work to display overlays on top of tiles, and how to override that.

デフォルトのマップペインが、タイルの前面にあるオーバレイを表示するために動作する方法とそれを上書きする方法。

What are panes?
ペインとは？

In Leaflet, map panes group layers together implicitly, without the developer knowing about it. This grouping allows web browsers to work with several layers at once in a more efficient way than working with layers individually.

Leaflet では、マップペインはレイヤを暗黙的に一纏めにし、それについて知っている開発者はいません。このグルーピングはウェブブラウザに、個々にレイヤを動作するより、もっと効果的な方法で一度にいくつかのレイヤを動作することを許可します。

Map panes use the z-index CSS property to always show some layers on top of others. The default order is:

マップペインは、いくつかのレイヤを他の前面にいつも表示するために、z-index CSS プロパティを使用します。

● TileLayers and GridLayers
● Paths, like lines, polylines, circles, or GeoJSON layers.
● Marker shadows
● Marker icons
● Popups

This is why, in Leaflet maps, popups always show “on top” of other layers, markers always show on top of tile layers, etc.

これは、Leaflet でポップアップがいつも他のレイヤの前面に表示し、マーカがいつもタイルレイヤの前面に表示されるなど、の理由です。

A new feature of Leaflet 1.0.0 (not present in 0.7.x) is custom map panes, which allows for customization of this order.

（今の 0.7.x ではなく）Leaflet 1.0.0 の新しい機能は、カスタムマップペインで、この命令のカスタマイズ（ユーザ改変）を許可します。

The default is not always right
デフォルトは常に正しくない

In some particular cases, the default order is not the right one for the map. We can demonstrate this with the Carto basemaps and labels:

いくつかの個々のケースで、デフォルトの順序がマップに対する正しいものではありません。これを Carto basemaps とラベルで説明できます：

Basemap tile with no labels
Transparent labels-only tile
Labels on top of basemap

If we create a Leaflet map with these two tile layers, any marker or polygon will show on top of both, but having the labels on top looks much nicer. How can we do that?

Leaflet マップをこれら２つのレイヤで作成する場合、いくつかのマーカまたはポリゴンが両方の前面に表示しますが、ラベルを前面に持ってくると見た目が良くなります。

Custom pane

We can use the defaults for the basemap tiles and some overlays like GeoJSON layers, but we have to define a custom pane for the labels, so they show on top of the GeoJSON data.

ベースマップタイルと GeoJSON レイヤのようないくつかのオーバレイのデフォルトを使用できますが、ラベルのカスタムペインを定義しなければならず、その結果 GeoJSON レイヤの前面に表示されます。

Custom map panes are created on a per-map basis, so first create an instance of L.Map and the pane:

カスタムマップペインは、マップごとの基準で作成され、それで最初に L.Map のインスタンスとペインを作成します。

var map = L.map('map');
map.createPane('labels');

The next step is setting the z-index of the pane. Looking at the defaults, a value of 650 will make the TileLayer with the labels show on top of markers but below pop-ups. By using getPane(), we have a reference to the HTMLElement representing the pane, and change its z-index:

次のステップは、ペインの z-index を設定します。デフォルトを見てみると、650 の値はマーカの前面ですがポップアップの後面に表示するラベルで TileLayer を生成します。getPane() を使うことによって、ペインを表示する HTMLElement を参照し、その z-index を変更します：

map.getPane('labels').style.zIndex = 650;

One of the problems of having image tiles on top of other map layers is that the tiles will capture clicks and touches. If a user clicks anywhere on the map, the web browser will assume she clicked on the labels tiles, and not on the GeoJSON or on the markers. This can be solved using the pointer-events CSS property:

他のマップレイヤの前面にイメージタイルを保持することの問題の一つは、タイルがクリックおよびタッチをキャプチャすることです。ユーザがマップ上のどこかでクリックした場合、GeoJSON 上またはマーカ上ではなく、ウェブブラウザはユーザがラベルタイルをクリックしたと仮定します。これは、pointer-events CSS プロパティを使用することで解決されます：

map.getPane('labels').style.pointerEvents = 'none';

With the pane now ready, we can add the layers, paying attention to use the pane option on the labels tiles:

これでペインを使う準備ができ、ラベルタイル上の pane オプションを使用することに注意を払いながら、レイヤを追加できます：

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
 attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
 attribution: '©OpenStreetMap, ©CartoDB',
 pane: 'labels'
}).addTo(map);

var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

Finally, add some interaction to each feature on the GeoJSON layer:

最後に、GeoJSON 上の各々のフィーチャにいくつかのインタラクションを追加します：

geojson.eachLayer(function (layer) {
 layer.bindPopup(layer.feature.properties.name);
});

map.fitBounds(geojson.getBounds());

Now the example map is complete!

これで、example map は完成です！

今回は、GeoJSON データが取得できなかったためマップの確認ができませんでした。コード全体はexample map で確認してください。

2018年6月6日水曜日

Leaflet 1.3 - 4-9 WMS and TMS

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>

登録: 投稿 (Atom)

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

ブログアーカイブ

自己紹介

2018年6月9日土曜日

Leaflet 1.3 - 4-11 Showing video files

2018年6月7日木曜日

Leaflet 1.3 - 4-10 Working with map panes

2018年6月6日水曜日

Leaflet 1.3 - 4-9 WMS and TMS

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

ブログ アーカイブ

自己紹介

2018年6月9日土曜日

Leaflet 1.3 - 4-11 Showing video files

2018年6月7日木曜日

Leaflet 1.3 - 4-10 Working with map panes

2018年6月6日水曜日

Leaflet 1.3 - 4-9 WMS and TMS

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

ブログアーカイブ