ベクタレイヤは ol.layer.Vector で表示され、ベクタデータのクライアント側の表示を処理しています。現在、OpenLayers は Canvas レンダラのベクタレンダリング全てと、WebGL レンダラのポイントジオメトリだけをサポートしています。
2.4.1. クライアント側のフィーチャ描画
基本の世界地図を取得するには、WMS の例に戻ります。ベクタレイヤでこの上にいくつかのフィーチャデータを追加します。
<!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: 'http://ahocevar.com/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', TILED: true}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
1. テキストエディタで map.html を開き、最初の WMS example の内容をコピーします。変更を保存して、ブラウザで正しく見えることを確認します。：http://localhost:4000/map.html
2. マップの初期化コードで Tile layer の後にもうひとつのレイヤを追加（下記のものを貼り付け）します。これは GeoJSON に格納されている一連のフィーチャを要求したマップに新しいベクタレイヤを追加します。
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.Vector({
url: '/data/layers/7day-M2.5.json',
format: new ol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
地震の場所を表す白丸と世界地図。
2.4.2. 詳しく見る
それでは何が起こっているか理解するために、そのベクタレイヤの作成を検討してみます。
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.Vector({
url: '/data/layers/7day-M2.5.json',
format: new< ol.format.GeoJSON()
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
注意:属性に基づいたフィーチャのスタイルを設定したい場合は、 ol.layer.Vector の style 設定オプションである ol.style.Style の替りににスタイル関数を使用します。
ボーナスタスク
1. マップ上の白丸は、 ol.layer.Vector レイヤの上に ol.Feature オブジェクトを表します。これらの各フィーチャは、それぞれ、title と summary（要約） のプロパティの属性データを持っています。マップ上で forEachFeatureAtPixel を呼び出す、マップ上の 「singleclick」リスナを登録し、マップビューポートの下に地震情報を表示します。
2. ベクタレイヤのデータは、USGS（http://earthquake.usgs.gov/earthquakes/catalogs/）が発行した地震のフィード由来しています。OpenLayers でサポートされているフォーマットの空間情報がある追加データを見つけることができるかどうか参照してください。もし、data ディレクトリ内の空間データを表現する別のドキュメントを保存するなら、マップ上のベクタレイヤで表示することができます。
解答
最初のボーナスタスクの解答として、map の下に info div タグを追加できます。
<div id="info"></div>
クリックされたフィーチャのタイトル（title）を表示するために次の JavaScript コードを追加します。
map.on('singleclick', function(e) {
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
return feature;
});
var infoElement = document.getElementById('info');
infoElement.innerHTML = feature ? feature.get('title') : '';
});
■□ Debian8 で試します■□
上記コードを map.html に追加します。
user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
{---
<div id="map"></div>
<!-- ここを追加 -->
<div id="info"></div>
---
<!-- ここから追加 -->
map.on('singleclick', function(e) {
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
return feature;
});
var infoElement = document.getElementById('info');
infoElement.innerHTML = feature ? feature.get('title') : '';
});
<!-- ここまで追加 -->
</script>
</body>
</html>
0 件のコメント:
コメントを投稿