デフォルトでは、タイルレイヤが、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',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
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 a {
color: black;
}
</style>
3 変更内容を保存し、ブラウザでページを更新します。
：http://localhost:8000/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。）
OpenStreetMapのソースとタイルレイヤとマップ。
2.2.2.1. 詳しく見る
2.2.2.1.1. 投影法
マップのビュー定義を確認します。
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
地理空間データは、すべての座標参照系になることができます。一つのデータセットは、度数で地理座標（緯度と経度）を使用し、もう一つはメートル単位のもので、限られた地域で使う投影法の座標参照系を使用します。座標参照系の完全な説明は、このモジュールの範囲外ですが、基本的な概念を理解することが重要です。
OpenLayers 3 は、データの座標参照系を知る必要があります。内部的には、これは ol.proj.Projection オブジェクトで表されます。ol.proj 名前空間の「transform」関数も座標参照系（上の例では "EPSG：4326" と " EPSG：3857"）を表す文字列を取ります。
使用する OpenStreetMap のタイルは、メルカトル投影法です。このため、メルカトル座標を使用して、中心の初期値を設定する必要があります。座標参照系で、関心のある場所の座標を見つけることは比較的容易なので、座標参照系（"EPSG：4326"）をメルカトル座標（"EPSG：3857"）に換える ol.proj.transform メソッドを使用します。
2.2.2.1.1.1. その他の投影法
OpenLayers 3 は、座標（EPSG:4326）とウェッブメルカトル（EPSG:3857）座標参照系を変換することができます。これにより、追加の作業なしで、上記の ol.proj.transform 機能を使用できます。異なった座標のデータで作業したいときは、ol.proj.transform 機能を使用する前に、付加情報を含める必要があります。
例えば、「EPSG:21781」座標参照系のデータで作業したいときは、ページに次の２つのスクリプトタグを含めます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script> <script src="http://epsg.io/21781-1753.js" type="text/javascript"></script>それから、アプリケーションコードに次のようにこの投影法を登録し、有効範囲を設定します。
// This creates a projection object for the EPSG:21781 projection
// and sets a "validity extent" in that projection object.
var projection = ol.proj.get('EPSG:21781');
projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
範囲情報は、EPSG コードを使用したときは、「http://epsg.io/」で見つけることができます。2.2.2.1.2. レイヤーの作成
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
前と同じように、レイヤを作成し、マップの config オブジェクトのレイヤ配列に追加します。このとき、ソースのすべての初期オプションを受け入れます。
2.2.2.1.3. スタイル
.ol-attribution a {
color: black;
}
マップコントロールの処理は、このモジュールの範囲外ですが、これらのスタイル宣言は、スニークプレビュー（訳注：試し画像？）を与えます。初期状態では、ol.control.Attribution コントロールは、すべてのマップに追加されます。これはレイヤソースにマップビューポート内に属性情報を表示させます。上記の宣言は、マップのこの属性のスタイルを変更します。（マップ右下の著作ラインに注意）
公的に利用可能なキャッシュされたタイルセットを使ったレイヤを理解したら、所有権のあるラスタレイヤでの演習に移りましょう。（原文では、「proprietary raster layers」がリンクになっています。）
2.2.2.1.4 Attribution Control 設定
初期設定で ol.control.Attribution は、押されたときに属性情報を実際に表示する i（information:情報）ボタンを追加します。OpenStreetMap 利用条件に従うため、そして、OpenStreetMap の属性情報を常に表示するために、次のように ol.Map コンストラクタ通されたオプションオブジェクトに使用されます。
controls: ol.control,defaults({
attributionOptions: {
collapsible: false
}
})
これは、i ボタンを削除し、属性情報を常に表示させます。
0 件のコメント:
コメントを投稿