フィーチャの修正は、ol.interaction.Modify と組み合わせて ol.interaction.Select を使用して動作します。それらは、フィーチャの通常のコレクション（ol.Collection）を共有します。ol.interaction.Select で選択されたフィーチャは、ol.interaction.Modify で変形の候補になります。
3.4.1. ベクタレイヤと修正インタラクションを作成
タスク
1. それでは演習例を始めます。テキストエディタで map.html を開き、以下のように修正して、確認します。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script> <title>OpenLayers 3 example</title> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
// 追加 3.4.1
var source = new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
});
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: [0, 153, 255, 1]
}),
stroke: new ol.style.Stroke({
color: [255, 255, 255, 0.75],
width: 1.5
})
}),
zIndex: 100000
})
});
var select = new ol.interaction.Select({ style: style});
var modify = new ol.interaction.Modify({
features: select.getfeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]), // 修正 3.4.1
target: 'map',
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'}
})
}),
new ol.layer.Vector({
title: 'Earthquakes',
source: source, // 修正 3.4.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>
2. map.html の変更を保存し、ブラウザでページを開きます。: http://localhost:8000/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対 応するアドレス。以降、これに準じます。）フィーチャの変更の実行を確認するには、地震（の発生場所）の選択のためマウスクリックと、ポイントを移動するためにドラッグを使用します。
3.4.2. 詳しく見る
フィーチャの修正が動作するしくみを調べてみます。
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: [0, 153, 255, 1]
}),
stroke: new ol.style.Stroke({
color: [255, 255, 255, 0.75],
width: 1.5
})
}),
zIndex: 100000
});
var select = new ol.interaction.Select({style: style});
var modify = new ol.interaction.Modify({
feature: select.getfeatures()
});
2 つのインターラクション、フィーチャを修正する前に選択するための ol.interaction.Select と実際のジオメトリを修正する ol.interaction.Modify を作成します。それらは、フィーチャの同じ ol.Collection を共有します。ol.interaction.Modify（訳注: 正しくは ol.interaction.Select だと思われます。）を使用して選択されたフィーチャは、ol.interaction.Modify で変形の候補になります。前と同様に ol.interaction.Select は style オブジェクトで設定され、選択されたフィーチャを描画するため使用される style を効果的に定義します。ユーザが再びマップ内をクリックすると、フィーチャはレイヤスタイルを使用して描画されます。
0 件のコメント:
コメントを投稿