データとスタイリングが比較的安定しているときは、OpenLayers が、性能によってベクタデータから画像を生成することがわかります。
2.5.1. ol.source.ImageVector
それでは世界地図の上に地震データを取得するために、ベクタレイヤの例に戻ります。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title> <script src="ol3/ol.js" type="text/javascript"></script> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View2D({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
タスク
1. テキスト·エディタで map.html を開き、上記からベクタ例の内容をコピーします。変更を保存して、ブラウザで正しく見えることを確認します。：http://localhost:8080/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。）
2. ベクタレイヤを次のように変更します。
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
ブラウザで http://localhost:8080/ol_workshop/map.html を再読み込みします。
注意：同じベクタデータのように見ますが、イメージとして描かれます。これは、それでもフィーチャ検出のようなものを可能にしますが、ベクタデータが鮮明でなくなります。これは基本的に性能と品質との釣り合いのためです。
2.5.1.1. 詳しく見る
それでは何が起こっているか理解するために、そのレイヤの作成を検討してみます。
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
ol.layer.Vector の代わりに ol.layer.Image を使用しています。しかしながら、オリジナルの ol.source.GeoJSON ベクタソースに接続する ol.source.ImageVector を通じて、ここでは、それでも、ベクタデータを使用することができます。スタイルはレイヤ上ではなく、 ol.source.ImageVector の設定として提供されます。
ボーナスタスク
1. そのフィーチャ検出が、それでも、forEachFeatureAtPixel を呼び出す地図上のシングルクリックリスナを登録することによって動作し、マップビューポートの下の地震情報を表示することを確認します。
0 件のコメント:
コメントを投稿