デフォルトでは、タイルレイヤが、256×256（ピクセル）画像をマップのビューポートに埋めるかそれ以上になるように、要求されます。地図のいろいろなところをパンし、拡大すると、画像の要求が、まだ訪れたことのない地域を埋めるために、さらに送られます。ブラウザが、要求された画像をいくつかキャッシュしますが、処理動作の多くは、一般的に、動的に画像を描画するためにサーバが必要とされています。
タイルレイヤが規則的な格子状の画像を要求しているため、サーバがこれらの画像の要求をキャッシュし、あなた（または他の誰か）が同じ地域を訪れた次の機会に、キャッシュされた結果を返すことができます。結果的に、すべての地域のパフォーマンスが向上することになります。
2.2.1. ol.source.XYZ
ウェブマップサービス（WMS）の仕様では、クライアントが要求できるものに多くの柔軟性があります。実際にキャッシュが困難または不可能にする制約はありません。
反対に、あるサービスは、固定されたズームレベルでだけ、そして、規則的なグリッドだけ、タイルを提供できます。これらは、XYZ ソースを使ったタイルレイヤとして一般化することができます。 - XとYはグリッドの列および行を示し、Zはズームレベルを表すと考えられます。
2.2.2. ol.source.OSM
OpenStreetMap（OSM）のプロジェクトは、世界中の自由に利用できる地図データを収集し、作るための努力をしています。OSM は、キャッシュされたタイルセットとして、いくつかの異なるレンダリングのデータを提供します。これらのレンダリングは、基本的な XYZ グリッド配置に適合し、OpenLayers のマップで使用できます。ol.source.OSM レイヤソースは OpenStreetMap のタイルにアクセスします。
タスク
1 テキストエディタで、前のセクションの map.html ファイルを開き、以下のように、マップの初期化コードを変更します。
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View2D({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
</script>
2 同じドキュメントの <head> に、レイヤ属性のためのスタイル宣言をいくつか追加します。
<style>
#map {
width: 512px;
height: 256px;
}
.ol-attribution ul, .ol-attribution a, .ol-attribution a:not([ie8andbelow]) {
color: black !important;
}
</style>
3 変更内容を保存し、ブラウザでページを更新します。
：http://localhost:8080/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。）
OpenStreetMapのソースとタイルレイヤとマップ。
2.2.2.1. 詳しく見る
2.2.2.1.1. 投影法
マップのビュー定義を確認します。
view: new ol.View2D({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
地理空間データは、すべての座標参照系になることができます。一つのデータセットは、度数で地理座標（緯度と経度）を使用し、もう一つはメートル単位のもので、限られた地域で使う投影法の座標参照系を使用します。座標参照系の完全な説明は、このモジュールの範囲外ですが、基本的な概念を理解することが重要です。
OpenLayers 3 は、データの座標参照系を知る必要があります。内部的には、これは ol.proj.Projection オブジェクトで表されます。ol.proj 名前空間の「transform」関数も座標参照系（上の例では "EPSG：3857" と " EPSG：4326"）を表す文字列を取ります。
2.2.2.1.2. 位置設定変換
使用する OpenStreetMap のタイルは、メルカトル図法です。このため、メルカトル座標を使用して、中心の初期値を設定する必要があります。座標参照系で、関心の場所の座標を見つけることは比較的容易なので、座標参照系（"EPSG：4326"）をメルカトル座標（"EPSG：3857"）に換える ol.proj.transform メソッドを使用します。
2.2.2.1.3. カスタムマップオプション
注意：ここで使用される投影法が OpenLayers 3 が知っている唯一の投影法です。他の投影法のために、投影を設定する必要があります。
var projection = ol.proj.configureProj4jsProjection({
code: 'EPSG:21781',
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864]
});
そして、2つの追加のスクリプトタグを含める必要があります。
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
この情報は、EPSG コードを使用していて、http://spatialreference.org/ で見つけることができます。
2.2.2.1.4. レイヤーの作成
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
前と同じように、レイヤーを作成し、マップの config オブジェクトのレイヤー配列に追加します。このとき、ソースのすべてのデフォルトオプションを受け入れます。
2.2.2.1.5. スタイル
.ol-attribution ul, .ol-attribution a, .ol-attribution a:not([ie8andbelow]) {
color: black;
}
マップコントロールの処理は、このモジュールの範囲外ですが、これらのスタイル宣言は、スニークプレビュー（訳注：試し画像？）を与えます。デフォルトでは、ol.control.Attribution コントロールは、すべてのマップに追加されます。これはレイヤのソースにマップビューポート内の属性情報を表示させます。上記の宣言は、マップのこの属性のスタイルを変更します。（マップ右下の著作ラインに注意）
公的に利用可能なキャッシュされたタイルセットを使ったレイヤを理解したら、所有権のあるラスタレイヤでの演習に移りましょう。（原文では、「proprietary raster layers」がリンクになっています。）
0 件のコメント:
コメントを投稿