前のセクションで示したように、マップは、マークアップ、スタイル宣言、および、初期化コードを一緒に用いることによって生成されます。これらの部分を個々にもう少し詳わしくみていきます。
1.2.1. マップマークアップ
前の例のマップのマークアップは、単一のドキュメント要素（document element）を生成します。
<div id="map"></div>
この <div> 要素は、マップのビューポートのコンテナとして機能します。ここでは、<div> 要素を使用していますが、ビューポートのコンテナは、任意のブロックレベル要素とすることができます。
このケースでは、マップのターゲット（target）として参照できるように、コンテナに id 属性を与えます。
1.2.2. マップスタイル
OpenLayers には、マップ関連の要素をスタイリングする方法を指定するデフォルトのスタイルシートが付属しています。map.html ページにこのスタイルシートを正確に追加します。（<link rel="stylesheet" href="/ol.css" type="text/css">）
OpenLayers がマップの大きさを推測（して表示）することはありません。このため、次の基本のスタイルシートは、ページ上でマップに区域を与えるために、少なくとも1つのカスタム（作成した）スタイル宣言を入れる必要があります。
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
スタイル宣言は、この（HTML）ドキュメントの <head> に直接入れています。ほとんどの場合、スタイル宣言に関連したマップは、外部スタイルシートにリンクした、より大きなウェブサイトのテーマの一部になっています。
1.2.3. マップの初期化
マップを生成する次のステップは、いくつかの初期化コードを入れることです。この場合、その作業を行うために <body> ドキュメントの下に <script> 要素を入れます。
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', TILED: true}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
同様に、（上記の）カスタムマップの初期化コードは、ビューポートのコンテナとして機能するドキュメント要素、この場合は <div id="map"></div>、が準備されるまで実行できません。ドキュメントの最後 <body> に初期化コードがあることにより、マップが生成する前にライブラリがロードされていて、ビューポートのコンテナが準備できていることを確認します。
それでは、マップの初期化スクリプトが何をしているか、もっと詳わしくみていきます。このスクリプトは、いくつかの設定オプションを伴った新しい ol.Map オブジェクトを作成しています。
target: 'map'
マップコンストラクタにマップを描画する場所を伝えるため、ビューポートコンテナの id 属性の属性値を使用します。このケースでは、マップコンストラクタのターゲットとして、文字列値「map」を渡します。この構文は、便利なショートカットです。要素（例えば document.getElementById（'map'）)へ直接参照することにより明確に提供することができます。
レイヤ設定は、マップに表示するためのレイヤを生成します。
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', TILED: true}
})
})
],
最後のステップは、ビューを定義します。投影法、中心とズームレベルを指定します。また、GeoWebCache が扱うことができない bounding boxes を要求しないことを確認するため maxResolution を指定します。
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
0 件のコメント:
コメントを投稿