2 Vector Data
Let's make a feature editor!
In this module, we'll create a basic editor for working with vector data. Our goal is to make it so a user can import data, draw new features, modify existing features, and export the result. We'll be working with GeoJSON data in this module, but OpenLayers supports a broad range of vector formats if you're interested in working with other sources.
このモジュールでは、ベクタデータを使って動作するための基本エディタを作成します。データをインポートし、新しいフィーチャを描き、現在あるフィーチャを変形し、結果をエクスポートします。このモジュールでは GeoJSON データで演習しますが、他のソースで演習することに興味があるなら、OpenLayers は広い範囲のベクタフォーマットをサポートします。
● Rendering GeoJSON
● Drag and drop
● Modifying features
● Drawing new features
● Snapping
● Downloading features
● Making it look nice
● GeoJSON を描画
● ドラッグ・アンド・ドロップ
● フィーチャを変形
● 新しいフィーチャを描画
● スナップ
● フィーチャをダウンロード
● 見栄えを良くする
2.1 Rendering GeoJSON
GeoJSON を描画
Before getting into editing, we'll take a look at basic feature rendering with a vector source and layer. The workshop includes a countries.json GeoJSON file in the data directory. We'll start by just loading that data up and rendering it on a map.
編集に入る前に、ベクタソースとレイヤで描画する基本フィーチャをみてみます。ワークショップはデータディレクトリの countries.json GeoJSON ファイルを含みます。そのデータを読み込み、マップにそれを描画するだけで初めます。
First, edit your index.html so we're ready to render a full page map:
最初に、（ページ全体に表示する）フルページマップを描画を準備するために、index.html を編集します：
Now we'll import the three important ingredients for working with vector data:
次に、ベクタデータで動作するために３つの重要な構成要素をインポートします：
● a format for reading and writing serialized data (GeoJSON in this case)
● a vector source for fetching the data and managing a spatial index of features
● a vector layer for rendering the features on the map
● シリアル化されたデータを読み書きするフォーマット（このケースの GeoJSON）
● データを取ってきてフィーチャの空間インデックスを管理するベクタソース
● マップ上にフィーチャを描画するベクタレイヤ
Update your main.js to load and render a local file containing GeoJSON features:
GeoJSON フィーチャを含む（サーバ内の）ローカルファイルをロードし描画するため main.js を更新します：
You should now be able to see a map with country borders at http://localhost:3000/.
http://localhost:3000/ で国境があるマップを見ることができます。
GeoJSON features
Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the ol-hashed package to make this work. Normally we'd install it first (though it should be included with the workshop dependencies already):
ページをよくリロードするので、マップがリロードで残ったた状態なら良いことです。これを動作させるために ol-hashed パッケージを取り入れることができます。（それはすでにワークショップの依存関係と一緒に含まれているので）通常、最初にそれをインストールします：
Then in our main.js we'll import the function exported by the package:
それから main.js にパッケージによってエクスポートされたファンクションをインポートします：
And now we can call this function with our map:
それから、map でこのファンクションを呼び出します：
Now you should see that page reloads keep the map view stable. And the back button works as you might expect.
これで、ページがマップビューを変動のないままリロードすることがわかります。そして、戻るボタンは期待するように動作します。
Let's make a feature editor!
In this module, we'll create a basic editor for working with vector data. Our goal is to make it so a user can import data, draw new features, modify existing features, and export the result. We'll be working with GeoJSON data in this module, but OpenLayers supports a broad range of vector formats if you're interested in working with other sources.
このモジュールでは、ベクタデータを使って動作するための基本エディタを作成します。データをインポートし、新しいフィーチャを描き、現在あるフィーチャを変形し、結果をエクスポートします。このモジュールでは GeoJSON データで演習しますが、他のソースで演習することに興味があるなら、OpenLayers は広い範囲のベクタフォーマットをサポートします。
● Rendering GeoJSON
● Drag and drop
● Modifying features
● Drawing new features
● Snapping
● Downloading features
● Making it look nice
● GeoJSON を描画
● ドラッグ・アンド・ドロップ
● フィーチャを変形
● 新しいフィーチャを描画
● スナップ
● フィーチャをダウンロード
● 見栄えを良くする
2.1 Rendering GeoJSON
GeoJSON を描画
Before getting into editing, we'll take a look at basic feature rendering with a vector source and layer. The workshop includes a countries.json GeoJSON file in the data directory. We'll start by just loading that data up and rendering it on a map.
編集に入る前に、ベクタソースとレイヤで描画する基本フィーチャをみてみます。ワークショップはデータディレクトリの countries.json GeoJSON ファイルを含みます。そのデータを読み込み、マップにそれを描画するだけで初めます。
First, edit your index.html so we're ready to render a full page map:
最初に、（ページ全体に表示する）フルページマップを描画を準備するために、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;
background-color: #04041b;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
次に、ベクタデータで動作するために３つの重要な構成要素をインポートします：
● a format for reading and writing serialized data (GeoJSON in this case)
● a vector source for fetching the data and managing a spatial index of features
● a vector layer for rendering the features on the map
● シリアル化されたデータを読み書きするフォーマット（このケースの GeoJSON）
● データを取ってきてフィーチャの空間インデックスを管理するベクタソース
● マップ上にフィーチャを描画するベクタレイヤ
Update your main.js to load and render a local file containing GeoJSON features:
GeoJSON フィーチャを含む（サーバ内の）ローカルファイルをロードし描画するため main.js を更新します：
import 'ol/ol.css'; import GeoJSON from 'ol/format/GeoJSON'; import Map from 'ol/Map'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import View from 'ol/View';
new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
http://localhost:3000/ で国境があるマップを見ることができます。
GeoJSON features
Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the ol-hashed package to make this work. Normally we'd install it first (though it should be included with the workshop dependencies already):
ページをよくリロードするので、マップがリロードで残ったた状態なら良いことです。これを動作させるために ol-hashed パッケージを取り入れることができます。（それはすでにワークショップの依存関係と一緒に含まれているので）通常、最初にそれをインストールします：
npm install ol-hashed@beta
Then in our main.js we'll import the function exported by the package:
それから main.js にパッケージによってエクスポートされたファンクションをインポートします：
import sync from 'ol-hashed';
And now we can call this function with our map:
それから、map でこのファンクションを呼び出します：
sync(map);
Now you should see that page reloads keep the map view stable. And the back button works as you might expect.
これで、ページがマップビューを変動のないままリロードすることがわかります。そして、戻るボタンは期待するように動作します。
■□ Debian9 で試します■□
countries.json のデータの場所を確認します。
user@deb9-vmw:~/openlayers-workshop-en$ ls data
---
countries.json
---
---
countries.json
---
前回使用した index.html のバックアップを保存して次のように修正します。
user@deb9-vmw:~/openlayers-workshop-en$ cp index.html index.html_basic
user@deb9-vmw:~/openlayers-workshop-en$ vim index.html
前回使用した main.js のバックアップを保存して次のように修正します。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;
background-color: #04041b;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
http://localhost:3000/ とブラウザでマップを開きます。（もし開かなければ、'npm start' を実行してください。user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css'; import GeoJSON from 'ol/format/GeoJSON'; import Map from 'ol/Map'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import View from 'ol/View';
new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
ol-hashed package をインストールします。
user@deb9-vmw:~/openlayers-workshop-en$ npm install ol-hashed > ol-workshop@0.0.0 start /home/nob61/openlayers-workshop-en > webpack-dev-server --mode=development ℹ ｢wds｣: Project is running at http://localhost:3000/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wdm｣: ℹ ｢wdm｣: Compiled successfully. ^Cnob61@deb9-vmw:~/openlayers-workshop-en$ npm install ol-hashed 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. + ol-hashed@2.0.0-beta.2 updated 2 packages and audited 7519 packages in 11.534s found 0 vulnerabilities
user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
今回は、地図を拡大したり中心を移動して再読込やブラウザの「戻る」ボタンを押すと 'sync(map);' を設定する前と動作がかわりませんでした。user@deb9-vmw:~/openlayers-workshop-en$ vim main.js
import 'ol/ol.css'; import GeoJSON from 'ol/format/GeoJSON'; import Map from 'ol/Map'; import VectorLayer from 'ol/layer/Vector'; import VectorSource from 'ol/source/Vector'; import View from 'ol/View'; import sync from 'ol-hashed';
new Map({
target: 'map-container',
layers: [
new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: './data/countries.json'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
sync(map);
■□ここまで■□
