2.2.1 キャッシュタイル
デフォルトでは、タイルレイヤは、マップのビューポートを埋める以上になるように256×256（ピクセル）画像を要求します。地図のいろいろなところをパンし、拡大すると、画像の要求が、まだ訪れたことのない地域を埋めるために、さらに送られます。ブラウザは要求された画像をいくつかキャッシュしますが、たくさんの処理動作が、一般的に、動的に画像を描画するためにサーバに要求されます。
タイルレイヤが規則的な格子状の画像を要求しているため、サーバがこれらの画像の要求をキャッシュし、あなた（または他の誰か）が同じ地域を訪れた次の機会に、キャッシュされた結果を返すことができます。結果的に、すべての地域のパフォーマンスが向上することになります。
2.2.1.1 ol.source.XYZ
Web Map Service の仕様では、クライアントが要求できる内容に柔軟性を持たせることができます。 制約がなければ、実際にはキャッシングが困難または不可能になります。
反対に、サービスは、固定されたズームレベルでだけ、そして、規則的なグリッドだけ、タイルを提供できます。これらは、XYZ ソースを使ったタイルレイヤとして一般化することができます。 - XとYはグリッドの列および行を示し、Zはズームレベルを表すと考えることができます。
2.2.1.2 ol.source.OSM
OpenStreetMap（OSM）のプロジェクトは、世界中の自由に利用できる地図データを収集し、作成するための取り組みをしています。OSM は、キャッシュされたタイルセットとして、いくつかの異なるレンダリングのデータを提供します。これらのレンダリングは、基本的な XYZ グリッド配置に適合し、OpenLayers のマップで使用できます。ol.source.OSM レイヤソースは OpenStreetMap のタイルにアクセスします。
タスク
1 テキストエディタで、前のセクションの map.html ファイルを開き、以下のように、マップの初期化コードを変更します。
<script>
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([126.97, 37.56]),
zoom: 9
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
</script>
<style>
#map {
width: 512px;
height: 256px;
}
.ol-attribution a {
color: black;
}
</style>
：http://localhost:4000/map.html
2.2.2 詳しく見る
2.2.2.1 投影法
マップのビュー定義を確認します。
view: new ol.View({
center: ol.proj.fromLonLat([126.97, 37.56]),
zoom: 9
})
OpenLayers は、データの座標系を知る必要があります。内部的には、これは ol.proj.Projection オブジェクトで表されますが、文字列も指定できます。
使用する OpenStreetMap タイルは、メルカトル図法です。このため、メルカトル座標を使用して、中心の初期値を設定する必要があります。地理座標で、関心のある場所の座標を見つけることは比較的容易なので、地理座標（"EPSG：4326"）をメルカトル座標（"EPSG：3857"）に換える ol.proj.fromLonLat メソッドを使用します。
2.2.2.2 その他の投影法
OpenLayers は、Geographic（EPSG:4326）と Web Mercator（EPSG:3857）座標参照系の変換機能を内蔵しています。これにより、追加の作業なしで、上記の ol.proj.fromLonLat 機能を使用できます。異なった座標のデータで作業したいときは、ol.proj.* 機能を使用する前に、付加情報を含める必要があります。
例えば、「EPSG:21781」座標参照系のデータで作業したいときは、ページに次の２つのスクリプトタグを含めます。
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/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]);
2.2.2.3 レイヤの作成
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
2.2.2.4 スタイル
.ol-attribution a {
color: black;
}
2.2.2.5 Attribution Control 設定
初期設定で ol.control.Attribution は、押されたときに属性情報を実際に表示する i（information:情報）ボタンを追加します。OpenStreetMap 利用条件に従うため、そして、OpenStreetMap の属性情報を常に表示するために、ol.Map コンストラクタに渡されるオプションオブジェクトに次のものが使用されます。
controls: ol.control,defaults({
attributionOptions: {
collapsible: false
}
})
公的に利用可能なキャッシュされたタイルセットを使ったレイヤを理解したら、所有権のあるラスタレイヤでの演習に移りましょう。（原文では、「proprietary raster layers」がリンクになっています。）
0 件のコメント:
コメントを投稿