「Put a map on a page」のコードを新しいファイル（訳注：例えば、Eclipse の HTML ファイル）にコピーします。
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 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.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body> </html>
どのようになっているか理解する
地図をWebページに表示するには3つのことが必要になります：
1 OpenLayers を読み込む。
2 <DIV>マップコンテナ。
3 単純なマップを作成するための JavaScript.
OpenLayers を読み込む
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
最初の部分は、JavaScriptライブラリを読み込んでいます。このチュートリアルのために、ここでは簡単にライブラリ全体を取得するための ol3js.org ウェブサイトを設定しています。本番環境では、我々のアプリケーションに必要なモジュールのみを含むライブラリのカスタムバージョンを構築します。
マップを含む <div>
<div id="map" class="map"></div>
アプリケーション内の map（マップオブジェクト）は <div> HTML 要素に入れます。この <div> により、幅、高さ、および境界線のような map のプロパティは、CSSで制御できます。ここに示したのは、400ピクセルの高さとブラウザウィンドウと同じ幅の地図を作るために使用されるCSS要素です。
<style>
.map {
height: 400px;
width: 100%;
}
</style>
単純なマップを作成するための JavaScript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
この JavaScript コードを使用すると、map オブジェクトは、東アフリカの海岸にズームされたマップクエストオープンエアリアル（MapQuest Open Aerial）レイヤで作成されます。それでは、これを詳しくみてみます。
次の行は、OpenLayers の map オブジェクトを作成します。レイヤやそれに取り付けられたインターラクション（訳注：対話型操作。フィーチャ選択や描画操作など。）がないなら、これは、それ自体だけでは、何もしません。
var map = new ol.Map({ ... });
map オブジェクトを <div> タグに配置するには、map オブジェクトの引数に、target を入れます。<div> タグの id 属性の（属性）値になります。
target: 'map'
layers：[...] 配列は、マップで使用可能なレイヤのリストを定義するために使用されています。最初で唯一のレイヤは今のところタイル（画像）レイヤです。
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
]
OpenLayers 3 のレイヤは、ソースを含む形式（画像やタイル、ベクタ）で定義されています。 ソースは、マップタイルを取得するために使用されるプロトコルです。ここから有用なレイヤソースのリストを参照できます。（原文では、"ol.source" の API ページにリンクしています。）
map オブジェクトの次の部分は、view です。view は、地図の中心、解像度、回転を指定することができます。今のところ、View2D だけがサポートされていますが、他のビューは、随時利用可能になります。 view を定義する最も簡単な方法は、中心点とズームレベルを定義することです。ズームレベル0はズームアウトされていることに注意してください。
view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
指定された中心は、緯度/経度の座標（EPSG：4326）であることがわかります。 使用する唯一のレイヤが球状メルカトル図法（EPSG：3857）なので、即座に正しい座標にマップをズームする（焦点を合わす）ことができるように、それらを再投影することができます。
0 件のコメント:
コメントを投稿