ol.layer.Vector を使用する前述の例では、アニメーションズーミング（固定されたままのポイント記号のサイズ）の間、続けて再描画される様子がみられます。ベクタレイヤで、OpenLayers は、各アニメーションフレームでソースデータを再描画します。これは、ビューの解像度が変化するとともに、線分やポイント記号、ラベルの一貫性のある描画を提供します。
別の描画方法は、ビューの遷移の間、再描画を無効にし、位置変更なしに、前のビューの状態から描画出力を縮尺します。これは ol.source.ImageVector とともに ol.layer.Image を使用することで達成されます。 この組み合わせで、データの「スナップショット」は、ビューがアニメーションをしていないときに再描画され、これらのスナップショットはビューの遷移の間、拒否されます。
下の例は、ol.source.ImageVector とともに ol.layer.Iamge を使用します。この例は、少量のデータを描画するのですが、この組み合わせは、大量の比較的に静的なデータを描画するアプリケーションに適しています。
2.5.1. ol.source.ImageVector
それでは世界地図の上に地震データを取得するために、ベクタレイヤの例に戻ります。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers example</title> <script src="/loader.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',
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'}
})
})
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.vector({
url: '/data/layers/7day-M2.5.json',
format newol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
1. テキスト·エディタで map.html を開き、上記からベクタ例の内容をコピーします。変更を保存して、ブラウザで正しく見えることを確認します。：http://localhost:4080/map.html
2. ベクタレイヤを次のように変更します。
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.vector({
url: '/data/layers/7day-M2.5.json',
format newol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
注意：同じベクタデータのように見ますが、イメージとして描かれます。これは、それでもフィーチャ検出のようなものを可能にしますが、ベクタデータが鮮明でなくなります。これは基本的に性能と品質との釣り合いのためです。
2.5.2. 詳しく見る
それでは何が起こっているか理解するために、そのレイヤの作成を検討してみます。
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.vector({
url: '/data/layers/7day-M2.5.json',
format newol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
ボーナスタスク
1. マップ上の forEachFeatureAtPixel を呼び出すマップ上の「singleclick」リスナを登録することで、マップビューポートの下に地震情報を表示するフィーチャ検出が動作することを確認します。
■□ Debian8 で試します■□
前章（2.4. Vector data）の「ボーナスタスク」で追加したコード部分の次のコードの「title」を「summary」に変更します。
user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
---
<!-- ここを変更 -->
infoElement.innerHTML = feature ? feature.get('summary') : '';
---
表示された内容は、/data/layers/7day-M2.5.json の summary の値の一部しか表示されませんでした。
内容を確認すると
---
"title": "M 4.9, Gulf of Aden"
---
"summary": "<img src=\"http:\/\/earthquake.usgs.gov\/images\/globes\/10_45.jpg\" alt=\"12.111°N 46.435°E\" align=\"left\" hspace=\"20\" \/><p>Sunday, June 27, 2010 06:32:03 UTC<br>Sunday, June 27, 2010 09:32:03 AM at epicenter<\/p><p><strong>Depth<\/strong>: 10.00 km (6.21 mi)<\/p>",
となっていました。
0 件のコメント:
コメントを投稿