新しいフィーチャは ol.interaction.Draw を使用して描画することができます。描画インタラクションは、ベクタソースおよびジオメトリタイプで構成されています。
3.3.1. ベクタレイヤと Draw インタラクションを作成
タスク
1. 以下の例を始めます。テキストエディタで map.html を開き、以下のように修正して、確認します。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="/loader.js" type="text/javascript"></script> <title>OpenLayers example</title> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
// 追加 3.3.1
var source = new ol.source.Vector({
url: 'data/layers/7day-M2.5.json',
format: new ol.format.GeoJSON()
});
var draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([draw]), // 修正 3.3.1
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: source, // 修正 3.3.1
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#0000FF'
}),
stroke: new ol.style.Stroke({
color: '#000000'
})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
</script>
</body>
</html>
ベクタソースにフィーチャを追加するために描画インターラクションを使用。
ボーナスタスク
1. 描画された後、新しいフィーチャの X と Y を取得するリスナを作成します。
解答
これは最初のボーナスタスクの解答です。それに ol.interaction.Draw の drawend イベントのイベントリスナを登録します。このメソッドは、フィーチャの X と Y をデベロッパーコンソールに記録します。
draw.on('drawend', function(evt){
var feature = evt.feature;
var p = feature.getGeometry();
console.log(p.getCoordinates());
});
■□ Debian8 で試します■□
上記のコードを map.html に追加します
user@deb8-vmw:~/openlayers-workshop-en$ vim map.html
Firefox でマップを表示するタブで、「メニュー」ボタンをクリックします。---
<!-- ここから追加 -->
draw.on('drawend', function(evt){
var feature = evt.feature;
var p = feature.getGeometry();
console.log(p.getCoordinates());
});
<!-- ここまで追加 -->
</script>
</body>
</html>
「開発ツール」ボタンをクリックします。
リストの「開発ツール」をクリックします。
マップを表示して、マップ上をクリックしてポイントを描画します。
0 件のコメント:
コメントを投稿