前のセクションで示したように、マップは、マークアップ、スタイル宣言、および、初期化コードを一緒に用いることによって生成されます。これらの部分を個々にもう少し詳わしくみていきます。
1.2.1. マップマークアップ
前の例のマップのマークアップは、単一のドキュメント要素を生成します。？
<div id="map"></div>
この <div> 要素は、マップのビューポートのコンテナとして機能します。ここでは、<div> 要素を使用していますが、ビューポートのコンテナは、任意のブロックレベル要素とすることができます。
このケースでは、マップのターゲット（target）として参照できるように、コンテナに id 属性を与えます。
1.2.2. マップスタイル
OpenLayers には、マップ関連の要素をスタイリングする方法を指定するデフォルトのスタイルシートが付属しています。map.html ページにこのスタイルシートを正確に追加します。（<link rel="stylesheet" href="ol3/ol.css" type="text/css">）
OpenLayers がマップの大きさを推測（して表示）することはありません。このため、次の基本のスタイルシートは、マップにページ上に区域を与えるために、少なくとも1つのカスタム（作成した）スタイル宣言を入れる必要があります。
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
このケースでは、マップコンテナの id 値をセレクタとして使用し、マップコンテナの幅（512px）と高さ（256px）を指定します。
スタイル宣言は、この（HTML）ドキュメントの <head> に直接、入れています。ほとんどの場合、スタイル宣言に関連したマップは、外部スタイルシートにリンクした、比較的大きなウェブサイトのテーマの一部になっています。
1.2.3. マップの初期化
マップを生成する次のステップは、いくつかの初期化コードを入れることです。この場合、その演習を行うためにドキュメントの下の <body> に <script> 要素を入れます。
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'
}
})
})
],
view: new ol.View2D({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
注意：これらのステップの順序は重要です。カスタムスクリプトが実行される前に、OpenLayers のライブラリをロードする必要があります。この例では、OpenLayers のライブラリはドキュメントの <script src="ol3/ol.js"></script> のある <head>（タグ）内でロードされます。
同様に、（上記の）カスタムマップの初期化コードは、ビューポートのコンテナとして機能するドキュメント要素、この場合は <div id="map"></div>、が準備されるまで実行できません。ドキュメントの最後 <body> に初期化コードがあることにより、マップが生成する前にライブラリがロードされていて、ビューポートのコンテナが準備できていることを確認します。
それでは、マップの初期化スクリプトが何をしているか、もっと詳わしくみていきます。このスクリプトは、いくつかの設定オプションを伴った新しい ol.Map オブジェクトを作成しています。
target: 'map'
マップコンストラクタにマップを描画する場所を伝えるため、ビューポートのコンテナの id 属性の属性値を使用します。このケースでは、マップコンストラクタのターゲットとして、文字列値「map」を渡します。この構文は、便利なショートカットです。要素（例えば document.getElementById（'map'）)へ直接参照することにより明確に提供することができます。
レンダラ設定オプションは、どのレンダラを使用するか指定します。OpenLayers 3 は3つのレンダラ（DOM レンダラ、Canvus レンダラ、WebGL レンダラ）を実行します。このケースでは、Canvus レンダラを使用するようにマップに伝えています。画像が別のドメインから来ているので、同一オリジンポリシーために、WebGLのレンダラでは動作しません。（訳注：「same origin policy - 同一生成元ポリシー」については、「MDN 同一生成元ポリシー https://developer.mozilla.org/ja/docs/Web/JavaScript/Same_origin_policy_for_JavaScript」などを参照してください。）
renderer：'canvus'
レイヤ設定は、マップに表示するためのレイヤを生成します。
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
この部分が新しいことでも、この構文に疑問を持たないでください。レイヤーの作成は、別の単位で説明します。理解するための重要な部分は、マップビューはレイヤの集まりであるということです。地図を見るために、少なくとも一つのレイヤを含める必要があります。
最後のステップは、ビューを定義します。投影法、中心とズームレベルを指定します。また、GeoWebCache を扱うことができない boundingboxes を要求しないことを確認するため maxResolution を指定します。
view: new ol.View2D({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
最初のマップの解析に成功しました！次は、OpenLayers の開発について学びます。
0 件のコメント:
コメントを投稿