2018年10月31日水曜日

OpenLayers5 Workshop - 3.1 The VectorTile layer

3 Vector Tile

Beautiful maps with vector tiles

In this module we will learn everything about the VectorTile layer in OpenLayers, and bring in the ol-mapbox-style utility to work with Mapbox Style files.

このモジュールでは、OpenLayers の VectorTile レイヤについてすべてを学習し、Mapbox Style ファイルで動作するために ol-mapbox-style ユーティリティを導入します。

● The VectorTile layer
● Interact with VectorTile features
● Styling a VectorTile layer
● Making things look bright

● VectorTile レイヤ
● VectorTile フィーチャを使ってインタラクション
● VectorTile レイヤをスタイルする
● ものを明るく見せる


3.1 The VectorTile layer
VectorTile レイヤ

We now know how to load tiled images, and we have seen different ways to load and render vector data. But what if we could have tiles that are fast to transfer to the browser, and can be styled on the fly? Well, this is what vector tiles were made for. OpenLayers supports vector tiles through the VectorTile layer.

現在、タイル化した画像をロードする方法を知っていて、ベクタデータをロードし描画する違う方法を確認します。しかし、ブラウザに転送するのが速い、そしてスタイルできるタイルがここにあるならどうしますか。ところで、これはベクタタイル向きです。OpenLayers は、VectorTile レイヤを通してベクタタイルをサポートします。

A world map rendered from vector data
ベクタデータから描画された世界地図

We'll start with the same markup in index.html as in the Basics exercise.

Basics 演習と同じ index.html で同じマークアップで始めます。 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>OpenLayers</title>
  <style>
   html, body, #map-container {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
 </body>
</html>
As usual, we save index.html in the root of our workshop folder.

いつもの通り、ワークショップフォルダのルートに index.html を保存します。

For the application, we'll start with a fresh main.js in the root of the workshop folder, and add the required imports:

アプリケーションのために、ワークショップフォルダのルートに新しい main.js で始め、必要とされる import を追加します： 
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
The data source we are going to use requires an access key. Please read the terms at https://openmaptiles.com/hosting/, where you can also get your own key. The code below assigns the key to a constant we're going to use later:

使おうとしているデータソースは、アクセスキーが必要です。自身のキーも取得できる https://openmaptiles.com/hosting/ で項目を読みます。コードの下部にキーをあとで使う定数（const）に割り当てます： 
// See https://openmaptiles.com/hosting/ for terms and access key
const key = '<your-access-key-here>';
The map we're going to create here is the same that we have used in previous exercises:

ここに作成するマップは、前回の演習で使われたのと同じです： 
const map = new Map({
 target: 'map-container',
 view: new  View({
  center: [0, 0],
  zoom: 2
 })
});
The layer type we are going to use now is VectorTileLayer, with a VectorTileSource:

今、使うレイヤタイプは VectorTileLayer で、VectorTileSource と一緒に使います： 
const layer = new VectorTileLayer({
 source: new VectorTileSource({
  attributions: [
   '<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
   '<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>'
  ],
  format: new MVT(),
  url: `https://free-{1-3}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key=${key}`,
  maxZoom: 14
 })
});
map.addLayer(layer);
Our data source provides only zoom levels 0 to 14, so we need to configure custom tile grid. Vector tile layers are usually optimized for a tile size of 512 pixels, which we also configured with the tile grid. The data provider also requires us to display some attributions.

データソースは、ズームレベル 0 から 14 までだけ提供するので、カスタムタイルグリッドを設定する必要があります。ベクタタイルレイヤは、通常、512 ピクセルのタイルサイズに最適化され、タイルグリッドで設定もされます。データプロバイダ（提供者）も出典（attribution）を表示するために必要です。

As you can see, a VectorTileSource is configured with a format and a url, just like a VectorLayer. The MVT format parses Mapbox Vector Tiles.

見た通り、VectorTileSource は、VectorLayer のように、format と url で設定します。

The working example at http://localhost:3000/ shows an unstyled vector map like this:

http://localhost:3000/ で演習例は、このようなスタイルされていないベクタマップを表示します：

A world map without style

■□ Debian9 で試します■□
「The VectorTile layer」の例を表示します。「Vector Data」で使用した index.html のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_vectordata
user@deb9-vmw:~/openlayers-workshop-en$ vim index.html 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>OpenLayers</title>
  <style>
   html, body, #map-container {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
   }
  </style>
 </head>
 <body>
  <div id="map-container"></div>
 </body>
</html>
「Vector Data」で使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_style
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js 
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
// See https://openmaptiles.com/hosting/ for terms and access key
const key = '<your-access-key-here>';
const map = new Map({
 target: 'map-container',
 view: new  View({
  center: [0, 0],
  zoom: 2
 })
});
const layer = new VectorTileLayer({
 source: new VectorTileSource({
  attributions: [
   '<a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
   '<a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>'
  ],
  format: new MVT(),
  url: `https://free-{1-3}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key=${key}`,
  maxZoom: 14
 })
});
map.addLayer(layer);
「MapTiler CLOUD」のアクセスキーを取得するためにホームページ（https://cloud.maptiler.com/）右上の「Sign in」をクリックします。
「Sign in or create account」ページのアカウント作成方法のうち、Google アカウントがあったので、「Sign in with Google」をクリックします。
Google のログインページが表示されるので、ログインします。
「Get started」ページが表示されるので、左側の「Account」をクリックします。
「Account」の「Settings」ページが表示されるので、左側の「key」をクリックして、「Key」を確認します。
const key = '<your-access-key-here>'; に key を入力します。

http://localhost:3000/ とブラウザでマップを開きます。（もし開かなければ、'npm start' を実行してください。



投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)