Eclipse にプロジェクトを作成して試してみました。
Eclipseを起動します。
user@deb9-vmw:~$ eclipse
プロジェクトを作成します。
a メニューの「ファイル」 -> 「新規」 -> 「静的 Web プロジェクト」をクリックします。（または、「新規 」ボタン -> 「静的 Web プロジェクト」をクリックします。）
b 「新規静的 Web プロジェクト」ウィンドウで「プロジェクト名」(例えばol5proj）を入力して「完了」ボタンをクリックします。
Quick Start
This primer shows you how to put a simple map on a web page.
この入門は、ウェブページに単純なマップを置く方法を示します。
For production, we strongly recommend bundling the application together with its dependencies, as explained in the Building an OpenLayers Application tutorial.
製作のために、Building an OpenLayers Application tutorial に説明されているように、 アプリケーションを付属品とともにビルドすることを強く勧めます。
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
下記に完全に動作する例が見られます。新しいファイル（訳注：例えば、Eclipse の HTML ファイル）を作成し、コンテンツにコピーし、ブラウザで開きます。
Understanding what is going on
どうなっているか理解する
To include a map a web page you will need 3 things:
地図をWebページに含めるには3つのことが必要になります：
1. Include OpenLayers
2. <div> map container
3. JavaScript to create a simple map
1. OpenLayers を読み込む。
2. <div>マップコンテナ。
3. 単純なマップを作成するための JavaScript.
Include OpenLayers
OpenLayers を読み込む
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
最初の部分は、JavaScriptライブラリを読み込むためです。このチュートリアルの目的のために、ここではライブラリ全体を取得するために openlayers.org ウェブサイトを単に示しています。本番環境では、アプリケーションに必要なモジュールだけを含むライブラリのカスタムバージョンをビルドしています。
Optional: If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
オプション: アプリケーションが Internet Explorer や Android 4.x などの古いプラットフォームで実行される場合は、OpenLayers の前に別のスクリプトが読み込まれる必要があります。
<div> to contain the map
map を含む <div>
The map in the application is contained in a <div> HTML element. Through this <div> the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
アプリケーション内の map（マップオブジェクト）は <div> HTML エレメントに入れます。この <div> により、幅、高さ、および境界線のような map のプロパティは、CSSで制御できます。ここに示したのは、400ピクセルの高さとブラウザウィンドウと同じ幅の地図を作るために使用されるCSSエレメントです。
JavaScript to create a simple map
単純なマップを作成するための JavaScript
With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:
この JavaScript コードを使用して、map オブジェクトは、アフリカ東海岸にズームされた OSM レイヤで作成されます。それでは、これを詳しくみてみましょう。
The following line creates an OpenLayers Map object. Just by itself, this does nothing since there's no layers or interaction attached to it.
次の行は、OpenLayers の Map オブジェクトを作成します。レイヤやそれに接続したインタラクションがないので、これは、それ自体だけでは、何もしません。
To attach the map object to the <div>, the map object takes a target into arguments. The value is the id of the <div>:
map オブジェクトを <div> タグに配置するには、map オブジェクトは引数に、target を取ります。<div> の id 属性の（属性）値になります。
The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
layers：[...] 配列は、マップで使用可能なレイヤのリストを定義するために使用されます。最初で唯一のレイヤは今のところタイルレイヤです。
Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
OpenLayers のレイヤは、ソースを含む形式（画像やタイル、ベクタ）で定義されます。 ソースは、マップタイルを取得するために使用されるプロトコルです
The next part of the Map object is the View. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
Map オブジェクトの次の部分は、View です。view は、地図の中心、解像度、回転を指定することができます。view を定義する最も簡単な方法は、中心点とズームレベルを定義することです。ズームレベル0はズームアウトされていることに注意してください。
You will notice that the center specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.
指定された中心は、緯度/経度の座標（EPSG：4326）であることがわかります。 使用する唯一のレイヤが球状メルカトル図法（EPSG：3857）なので、正しい座標にマップをズームする（焦点を合わす）ことができるように、それらを即座に再投影することができます。
This primer shows you how to put a simple map on a web page.
この入門は、ウェブページに単純なマップを置く方法を示します。
For production, we strongly recommend bundling the application together with its dependencies, as explained in the Building an OpenLayers Application tutorial.
製作のために、Building an OpenLayers Application tutorial に説明されているように、 アプリケーションを付属品とともにビルドすることを強く勧めます。
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
下記に完全に動作する例が見られます。新しいファイル（訳注：例えば、Eclipse の HTML ファイル）を作成し、コンテンツにコピーし、ブラウザで開きます。
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/build/ol.js"" type="text/javascript"></script>
<title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.sourceOSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body> </html>
Understanding what is going on
どうなっているか理解する
To include a map a web page you will need 3 things:
地図をWebページに含めるには3つのことが必要になります：
1. Include OpenLayers
2. <div> map container
3. JavaScript to create a simple map
1. OpenLayers を読み込む。
2. <div>マップコンテナ。
3. 単純なマップを作成するための JavaScript.
Include OpenLayers
OpenLayers を読み込む
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.0.3/build/ol.js"></script>
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
最初の部分は、JavaScriptライブラリを読み込むためです。このチュートリアルの目的のために、ここではライブラリ全体を取得するために openlayers.org ウェブサイトを単に示しています。本番環境では、アプリケーションに必要なモジュールだけを含むライブラリのカスタムバージョンをビルドしています。
Optional: If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
オプション: アプリケーションが Internet Explorer や Android 4.x などの古いプラットフォームで実行される場合は、OpenLayers の前に別のスクリプトが読み込まれる必要があります。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<div> to contain the map
map を含む <div>
<div id="map" class="map"></div>
The map in the application is contained in a <div> HTML element. Through this <div> the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
アプリケーション内の map（マップオブジェクト）は <div> HTML エレメントに入れます。この <div> により、幅、高さ、および境界線のような map のプロパティは、CSSで制御できます。ここに示したのは、400ピクセルの高さとブラウザウィンドウと同じ幅の地図を作るために使用されるCSSエレメントです。
<style>
.map {
height: 400px;
width: 100%;
}
</style>
JavaScript to create a simple map
単純なマップを作成するための JavaScript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:
この JavaScript コードを使用して、map オブジェクトは、アフリカ東海岸にズームされた OSM レイヤで作成されます。それでは、これを詳しくみてみましょう。
The following line creates an OpenLayers Map object. Just by itself, this does nothing since there's no layers or interaction attached to it.
次の行は、OpenLayers の Map オブジェクトを作成します。レイヤやそれに接続したインタラクションがないので、これは、それ自体だけでは、何もしません。
var map = new ol.Map({ ... });
To attach the map object to the <div>, the map object takes a target into arguments. The value is the id of the <div>:
map オブジェクトを <div> タグに配置するには、map オブジェクトは引数に、target を取ります。<div> の id 属性の（属性）値になります。
target: 'map'
The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
layers：[...] 配列は、マップで使用可能なレイヤのリストを定義するために使用されます。最初で唯一のレイヤは今のところタイルレイヤです。
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
OpenLayers のレイヤは、ソースを含む形式（画像やタイル、ベクタ）で定義されます。 ソースは、マップタイルを取得するために使用されるプロトコルです
The next part of the Map object is the View. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
Map オブジェクトの次の部分は、View です。view は、地図の中心、解像度、回転を指定することができます。view を定義する最も簡単な方法は、中心点とズームレベルを定義することです。ズームレベル0はズームアウトされていることに注意してください。
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
指定された中心は、緯度/経度の座標（EPSG：4326）であることがわかります。 使用する唯一のレイヤが球状メルカトル図法（EPSG：3857）なので、正しい座標にマップをズームする（焦点を合わす）ことができるように、それらを即座に再投影することができます。
