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

1 Basics
Now that we have set up our development environment, let's get started by creating a simple web page with an OpenLayers map, and add some animation and interactivity to it.

開発環境を設定したので、OpenLayers マップを使った簡単なウェブページの作成で始めて、それにアニメーションとインタラクティブをいくつか追加します。

● Creating a map
● Zooming to your location

● マップを作成
● 現在の位置にズーム

1.1 Creating a map
マップの作成

In OpenLayers, a map is a collection of layers that get rendered to a web page. To create a map, you need some markup (HTML) that creates the map viewport (e.g. a

element), a bit of style to give the map viewport the appropriate dimensions on your page, and map initialization code.

OpenLayers では、マップは、ウェブページに描画されるレイヤのコレクションです。マップの作成のために、マップビューポート（map viewport）を作成するいくつかのマークアップ（例えば、<div> エレメント）、ページのマップビューポートにおおよそのディメンジョンを与えるための少しのスタイル、マップの初期化コードを必要とします。

Working example
動作例

Make sure you've completed the setup instructions to install dependencies and get the development server running.

依存関係をインストールするために setup instructions を完了し、開発サーバを動作させていることを確認します。

Now let's create a fully working example of an OpenLayers map. At a minimum, we need some markup with a container element for a map, and an OpenLayers Map instance which we configure with a layer and a view.

OpenLayers マップの完全に動作する例を作成しましょう。map のためのコンテナエレメント（container element）を伴ういくつかのマークアップ、および、レイヤ（layer）とビュー（view）を伴うが OpenLayers Map インスタンスが必要です。

The markup
マークアップ

First, we create an index.html file in the root of the workshop directory:

最初に、ワークショップディレクトリのルートに 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>

Note that we do not need to include any <script> for our application. Our webpack setup takes care of that. Our <style> makes the map container fill the whole page, and we will use the container <div> with the map-container id as target for the map.

アプリケーションに <script> を含む必要がないことに注意してください。ウェブパックのセットアップは、それを処理します。<style> は、マップコンテナ（map container）でページ全体を満たし、マップのターゲットとしてマップコンテナ id（map-container id）と一緒にコンテナ（container）<div> を使います。

The application
アプリケーション

To work with OpenLayers, we install the ol package from npm. This was already done in the previous npm install step. If you were starting from scratch on a new application, you would run this in the terminal:

OpenLayers で作業するために、npm から ol パッケージをインストールします。これは、前述の npm install のステップで済んでいます。新しいアプリケーションで最初から始めている場合は、これを端末で実行します：

npm install ol@beta

（訳注：実際には 'npm install ol' だと思います。'npm install ol@beta' とするとその時点での前バージョンのベータ版がインストールされます。）

As entry point of the application, we create a main.js file, and also save it in the root of the workshop directory:

アプリケーションの導入ポイントとして、main.js を作成し、ワークショップディレクトリのルートに保存もします：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';

new Map({
 target: 'map-container',
 layers: [
  new TileLayer({
   source: new XYZSource({
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
   })
  })
 ],

 view: new View({
  center: [0, 0],
  zoom: 2
 })
});

At the top, we import the required modules from the ol package. Note the 'ol/ol.css' import, which adds the styles that OpenLayers requires for its basic UI components. With everything we need imported, we create move on and create a Map. The target points to the container

we have in our markup. We configure the map with a tiled image layer (TileLayer) and an XYZSource. Finally, the View defines the initial center and zoom.

最初の部分で、ol パッケージから必要とされるモジュールをインポートします。OpenLayers が基本的な UI コンポーネントに必要とするスタイル（style）を追加する、'ol/ol.css' インポートに注意してください。インポートされた必要なすべてのもので進めて、Map を作成します。ターゲットは、マークアップ内のコンテナ <div> を指します。タイルイメージレイヤ（TileLayer）と XYZSource でマップを設定します。最後に、View（ビュー）は、center（中心）と zoom（ズーム）を定義します。

Viewing the map
マップを眺める

Now our application is ready for testing. Let's open the working map in a web browser: http://localhost:3000/. This is how it should look:

これでアプリケーションは、テストの準備ができました。http://localhost:3000/ とブラウザで演習マップを開きましょう。このように見えます：

In the final chapter of the workshop, we will learn how create a production build of the application for deployment.

ワークショップの最終章で、開発用のアプリケーションの本番ビルドを作成する方法を演習します。

■□ Debian9 で試します■□
ワークショップディレクトリのルートに index.html ファイルを作成します。元の index.html ファイルは改名しておきます。

user@deb9-vmw:~/openlayers-workshop-en$ mv index.html index.html_org 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>

npm から ol package をインストールします。ワークショップのルートディレクトリで 'npm install ol' を実行します。（このワークショップの執筆時は ol5.0.0 のベータ版のインストールを想定していると思われます。'npm install ol@beta' とするとその時点での前バージョンのベータ版がインストールされました。）

user@deb9-vmw:~/openlayers-workshop-en$ npm install ol

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ ol@5.0.0-beta.14
updated 3 packages and audited 14484 packages in 27.194s
found 7 vulnerabilities (4 low, 2 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

最後の行に７個の脆弱性が発見と修正方法が出力されました。

found 7 vulnerabilities (4 low, 2 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details

`npm audit fix` を実行します。

user@deb9-vmw:~/openlayers-workshop-en$ npm audit fix

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ webpack-dev-server@3.1.6
added 17 packages from 22 contributors, removed 21 packages, updated 20 packages and moved 33 packages in 26.184s
fixed 5 of 7 vulnerabilities in 14484 scanned packages
  1 package update for 2 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

最後の行に、さらに修正方法が出力されました。

use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually

`npm audit fix --force` を実行します。

user@deb9-vmw:~/openlayers-workshop-en$ npm audit fix --force

npm WARN using --force I sure hope you know what you are doing.

> fsevents@1.2.3 install /home/nob61/openlayers-workshop-en/node_modules/fsevents
> node install

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.0
added 76 packages from 42 contributors, removed 342 packages and updated 8 packages in 16.333s
fixed 2 of 2 vulnerabilities in 14408 scanned packages
  1 package update for 2 vulns involved breaking changes
  (installed due to `--force` option)

ワークショップディレクトリのルートに main.js ファイルを作成します。元の main.js ファイルは改名しておきます。

user@deb9-vmw:~/openlayers-workshop-en$ mv main.js main.js_org user@deb9-vmw:~/openlayers-workshop-en$ vim main.js

import 'ol/ol.css'; 
import Map from 'ol/Map'; 
import View from 'ol/View'; 
import TileLayer from 'ol/layer/Tile'; 
import XYZSource from 'ol/source/XYZ';

new Map({ 
 target: 'map-container', 
 layers: [ 
  new TileLayer({ 
   source: new XYZSource({ 
    url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg' 
   }) 
  }) 
 ],

 view: new View({ 
  center: [0, 0], 
  zoom: 2 
 }) 
});

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

■□ここまで■□

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

ブログアーカイブ

自己紹介

2018年9月26日水曜日

OpenLayers5 Workshop - 1.1 Creating a Map

0 件のコメント:

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

ブログ アーカイブ