2.1. ウェブマップサービス（Web Map Service［WMS］）レイヤ
マップにレイヤを追加するとき、レイヤのソースは、一般的に、表示するデータを取ってくることに起因しています。要求されたデータは、ラスタまたはベクタデータのいずれかです。ラスタデータは、サーバ側で画像として描画された情報と同じ、と考えることができます。ベクタデータは、サーバから構造化された情報として提供され、表示するためにクライアント（ブラウザ）上で描画されます。
ラスタマップデータを提供する異なる形式のサービスがたくさんあります。このセクションでは、OGC（Open Geospatial Consortium）の ウェブマップサービス（Web Map Service［WMS］）仕様に準拠しているプロバイダ（提供者）を扱っています。
2.1.1. レイヤーの作成
完全に動作するマップの例から始めて、動作を理解するためにレイヤを修正します。
次のコードをみていきます。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="loader.js" type="text/javascript"></script> <title>OpenLayers example</title> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
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>
</body>
</html>
1. まだ行っていない場合は、ワークショップでのディレクトリのルートに map.html として上記のテキストを保存します。
2. 動作を確認するには、ブラウザでページを開きます。
http://localhost:4000/map.html
2.1.2. ol.layer.Tile コンストラクタ
ol.layer.Tile コンストラクタは、 olx.layer.TileOptions 型のオブジェクトリテラルを取得します。次を参照してください。
http://openlayers.org/en/master/apidoc/ol.layer.Tile.htmlこの場合、「source（ソース）」キーのオプションに ol.source.TileWMS を提供しています。レイヤの人間が読み取り可能なタイトルは、「title（タイトル）」キーを設けることがでますが、基本的にキーの任意の名前を、ここで使用することができます。OpenLayers 2 で、これはレイヤのすべての部分だったのに対し、（現在の）OpenLayers では、レイヤとソースの間に隔たりがあります。
ol.layer.Tile は、画像の規則的なグリッドを示し、ol.layer.Image は、単一の画像を示します。レイヤの種類に応じて、別のソース（ol.source.ImageWMS に対して ol.source.TileWMS）を使用します。
2.1.3. ol.source.TileWMS コンストラクタ
ol.source.TileWMS コンストラクタは、http://openlayers.org/en/master/apidoc/ol.source.TileWMS.html によって、定義される単一の引数を持っています。url は、WMS サービスのオンライン·リソースであり、「params」は、パラメータ名とその値を持つオブジェクトリテラルです。LAYERS param だけは必須です。この例では、タイル化された WMS レイヤのキャッシング向上のため、 GeoServer 固有の拡張「
TILED: true」を追加します。layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', TILED: true}
})
})
]
1. これと同じ WMS は「
ne:NE1_HR_LC_SR_W_DR」という名前の Natural Earth レイヤを提供しています。「nasa:bluemarble」から「ne:NE1_HR_LC_SR_W_DR」へ LAYERS パラメータの値を変更します。修正した ol.layer.Tile コンストラクタは次のようになります。
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {LAYERS: 'ne:NE1_HR_LC_SR_W_DR', TILED: true}
})
})
イメージソースとしての WMS。
ウェブマップサービス（WMS）から動的にレンダリングされたデータで演習するには、キャッシュされたタイルサービスについて学ぶために移動します。（原文では「cashed tile services］がリンクになっています。）
0 件のコメント:
コメントを投稿