OpenLayers5 Tutorials - 1b Building an OpenLayers Application

Initial steps
最初の手順

Create a new empty directory for your project and navigate to it by running mkdir new-project && cd new-project. Initialize your project using npm init and answer the questions asked.

プロジェクト用に新しい空のディレクトリを作成し、mkdir new-project && cd new-project を実行して、そのディレクトリに移動します。npm init を使用してプロジェクトを初期化し、質問に回答します。

Add OpenLayers as dependency to your application with

OpenLayers を依存関係としてアプリケーションに追加します

npm install ol

At this point you can ask NPM to add required development dependencies by running

この時点で、実行によって必要とされる開発依存関係を追加するよう NPM に尋ねることができます。

npm install --save-dev parcel-bundler

■□ Debian9 で試します■□
mkdir new-project && cd new-project を実行します。

user@deb9-vmw:~$ mkdir new-project && cd new-project

プロジェクトディレクトリ new-project の依存関係を管理するために、npm init で package.json を作成します。

user@deb9-vmw:~/new-project$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (new-project) [以下すべて空欄でEnterキーを押す]
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/nob61/new-project/package.json:

{
  "name": "new-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

│   Update available 5.6.0 → 6.3.0    │
│     Run npm i -g npm to update      │

npm のアップデートを支持されたので実行します。

user@deb9-vmw:~/new-project$ ls
package.json
user@deb9-vmw:~/new-project$ npm -v
5.6.0
user@deb9-vmw:~/new-project$ su
パスワード:
root@deb9-vmw:/home/nob61/new-project# npm i -g npm
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.3.0
added 283 packages, removed 363 packages and updated 41
packages in 13.391s
root@deb9-vmw:/home/nob61/new-project# exit
exit
user@deb9-vmw:~/new-project$ npm -v
6.3.0

npm install ol を実行します。

user@deb9-vmw:~/new-project$ npm install ol npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN new-project@1.0.0 No description
npm WARN new-project@1.0.0 No repository field.

+ ol@5.1.3
added 8 packages from 6 contributors and audited 8 packages in 3.083s
found 0 vulnerabilities

npm install --save-dev parcel-bundler を実行します。

user@deb9-vmw:~/new-project$ npm install --save-dev parcel-bundler
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> deasync@0.1.13 install /home/nob61/new-project/node_modules/deasync
> node ./build.js

`linux-x64-node-8` exists; testing
Binary is fine; exiting

> parcel-bundler@1.9.7 postinstall /home/nob61/new-project/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
> https://opencollective.com/parcel/donate
npm WARN new-project@1.0.0 No description
npm WARN new-project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ parcel-bundler@1.9.7
added 680 packages from 534 contributors and audited 7354 packages in 47.215s
found 0 vulnerabilities
user@deb9-vmw:~/new-project$ ls
node_modules package-lock.json package.json

■□ここまで■□

Application code and index.html
アプリケーション コードと index.html

Place your application code in index.js. Here is a simple

starting point:index.js にアプリケーション コードを配置します。ここに簡単な出発点があります。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
 target: 'map',
 layers: [
  new TileLayer({
   source: new OSM()
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 0
 })
});

You will also need an ìndex.html file that will use your bundle. Here is a simple example:

バンドルを使用する ìndex.html ファイルも必要です。ここには簡単な例があります。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Parcel with OpenLayers</title>
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="./index.js"></script>
 <body>
</html>

■□ Debian9 で試します■□
次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
 target: 'map',
 layers: [
  new TileLayer({
   source: new OSM()
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 0
 })
});

次の内容で index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Parcel with OpenLayers</title>
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="./index.js"></script>
 <body>
</html>

 ■□ここまで■□

Creating a bundle
バンドルの作成

With simple scripts you can introduce the commands npm run build and npm start to manually build your bundle and watch for changes, respectively. Add the following to the script section in package.json:

簡単なスクリプトで、バンドルと変更の監視を、それぞれ、手動でビルドするために、npm run build と npm start コマンドを導入することができます。package.json の script[スクリプト]セクションに次のものを追加します

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "parcel index.html",
 "build": "parcel build --public-url . index.html"
}

That's it. Now to run your application, enter

これで終わりです。アプリケーションを実行するために、直ちに、

npm start

in your console. To test your application, open http://localhost:1234/ in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.

とコンソールに入力します。アプリケーションをテストするために、ブラウザで http://localhost:1234/ を開きます。何かを変更するといつでも、変更の結果を表示するために、ページは自動的にリロードします。

Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.

アプリケーションコードすべてとアプリケーションに使用されるすべての依存関係が一緒の単体の JavaScript ファイルが作成されることに注意してください。OpenLayers パッケージから、必要とされるコンポーネントだけ含まれます。

To create a production bundle of your application, simply type

アプリケーションの本番のバンドルを作成するために、単に

npm run build

and copy the dist/ folder to your production server.

とタイプし、本番サーバに dist/ ホルダをコピーます。

■□ Debian9 で試します■□
package.json に script セクションを次のように追加します。

user@deb9-vmw:~/public_html/new-project$ vim package.json

{
  "name": "browserify_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ol": "^5.1.3"
  },
    "parcel-bundler": "^1.9.7"
  }
}

npm start と npm run build を実行します。

user@deb9-vmw:~/new-project$ npm start

> new-project@1.0.0 start /home/user/new-project
> parcel index.html

Server running at http://localhost:1234
✨ Built in 14.58s.

Webブラウザのアドレス欄に

http://localhost/:1234

と入力して Enter キーを押します。

index.js を編集（例えば、"zoom: 1" に修正）して index.html を再読込するとマップが拡大されます。

サーバを停止（Ctrl + c）して npm run build を実行します。

^Cuser@deb9-vmw:~/new-project$ user@deb9-vmw:~/new-project$ npm run build

> new-project@1.0.0 build /home/uer/new-project
> parcel build --public-url . index.html

✨  Built in 33.24s.

dist/new-project.72267420.map    ⚠️  2.38 MB     374ms
dist/new-project.72267420.js      608.47 KB    27.94s
dist/new-project.3e5e72c1.css        3.6 KB     6.87s
dist/index.html                       296 B     4.81s
user@deb9-vmw:~/new-project$ ls
dist  index.html  index.js  node_modules  package-lock.json  package.json
user@deb9-vmw:~/new-project$ ls -l dist/
合計 7804
-rw-r--r-- 1 user user     339  8月 16 11:09 index.html
-rw-r--r-- 1 user user    3688  8月 16 11:02 new-project.3e5e72c1.css
-rw-r--r-- 1 user user  623078  8月 16 11:02 new-project.72267420.js
-rw-r--r-- 1 user user 2497278  8月 16 11:02 new-project.72267420.map
-rw-r--r-- 1 user user    4478  8月 16 11:09 new-project.890281e4.css
-rw-r--r-- 1 user user 1907618  8月 16 11:20 new-project.890281e4.js
-rw-r--r-- 1 user user 2940632  8月 16 11:20 new-project.890281e4.map

■□ここまで■□