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

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 を編集します：

<!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>

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 を更新します：

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
 })
});

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 パッケージを取り入れることができます。（それはすでにワークショップの依存関係と一緒に含まれているので）通常、最初にそれをインストールします：

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
---

前回使用した index.html のバックアップを保存して次のように修正します。

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

前回使用した main.js のバックアップを保存して次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
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
 })
});

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

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

main.js 次のように修正します。

user@deb9-vmw:~/openlayers-workshop-en$ cp main.js main.js_basic
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);

今回は、地図を拡大したり中心を移動して再読込やブラウザの「戻る」ボタンを押すと 'sync(map);' を設定する前と動作がかわりませんでした。
■□ここまで■□

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

ブログアーカイブ

自己紹介

2018年9月26日水曜日

OpenLayers5 Workshop - 2.1 Rendering GeoJSON

0 件のコメント:

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

ブログ アーカイブ