「countries.geojson」データの内容は次のようになっていました。
「countries.geojson」
{"type":"FeatureCollection",
"features":[{
"type":"Feature",
"id":"AFG",
"properties":{"name":"Afghanistan"},
"geometry":{
"type":"Polygon",
"coordinates":[[[61.210817,35.650072],...
「251-ol3ex.js」
var vectorSource = new ol.source.GeoJSON({
/** ol.source.GeoJSON
* Static vector source in GeoJSON format
* GeoJSON フォーマットの静的ベクタソース。（ol3 API）
*/
projection: 'EPSG:3857', // url: 'data/geojson/countries.geojson' url: 'v3.1.1/examples/data/geojson/countries.geojson' });
var map = new ol.Map({
layers: [
new ol.layer.Tile({
/** ol.layer.Tile
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels for
* specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースのための、
* 特定の解像度でのズームレベルによって編成されているグリッドの
* タイルイメージ。（ol3 API）
*/
source: new ol.source.OSM()
/** ol.source.OSM
* Layer source for the OpenStreetMap tile server.
* OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
*/
}),
new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: vectorSource }) ],
renderer: 'canvas',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// a normal select interaction to handle click // クリックを処理するための通常のセレクトインターラクション
var select = new ol.interaction.Select(); /** ol.interaction.Select * Handles selection of vector data. A * ol.FeatureOverlay is maintained internally to * store the selected feature(s). Which features * are selected is determined by the condition * option, and optionally the toggle or add/remove * options. * ベクタデータの選択を処理します。 ol.FeatureOverlay * は、選択したフィーチャを格納するために内部的に維持され * ています。選択されているどのフィーチャでも条件オプショ * ン、そして部分的にトグルまたは追加/削除オプションによっ * て決定されます。（ol3 API） */
map.addInteraction(select); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ与えられたインターラクションを追加します。（ol3 API） */
var selectedFeatures = select.getFeatures(); /** getFeatures() * Get the selected features. * 選択されたフィーチャを取得します。（ol3 API） */
/** a DragBox interaction used to select features by * drawing boxes * ボックスを描画することによってフィーチャをセレクトするための * DragBox インターラクション */
var dragBox = new ol.interaction.DragBox({
/** ol.interaction.DragBox
* Allows the user to draw a vector box by clicking and
* dragging on the map, normally combined with an
* ol.events.condition that limits it to when the shift
* or other key is held down. This is used, for example,
* for zooming to a specific area of the map (see
* ol.interaction.DragZoom and
* ol.interaction.DragRotateAndZoom).
* This interaction is only supported for mouse devices.
* クリックとドラッグすることにより、ユーザーがベクタ
* ボックスを描画することができます。通常は、シフトまた
* はその他のキーが押されたときにそれを制限する
* ol.events.condition と組み合わせます。これは、例え
* ば、マップの特定の領域へズーミングに使用されます。
*（ol.interaction.DragZoom と
*（ol.interaction.DragRotateAndZoomを参照）
* このインターラクションは、マウスデバイスでサポートさ
* れています。（ol3 API）
*/
condition: ol.events.condition.shiftKeyOnly, /** ol.events.condition.shiftKeyOnly * Returns: True if only the shift key is pressed. * （ol3 API） */
style: new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered
* in the options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用される
* Canvas デフォルトを与えられることに注意してください。
* GET機能は、オプションで入力されたものはすべて返します。
* それらはデフォルトを返しません。（ol3 API）
*/
color: [0, 0, 255, 1] }) }) });
map.addInteraction(dragBox);
var infoBox = document.getElementById('info');
dragBox.on('boxend', function(e) {
/** on()
* Listen for a certain type of event.
* ある型のイベントをリッスンします。
* Returns: Unique key for the listener.（0l3 API）
*/
/** * features that intersect the box are added to the * collection of selected features, and their names are * displayed in the "info" div * ボックスを交差するフィーチャは、選択したフィーチャのコレクショ * ンに追加され、その名前が "info" の div に表示されます。 */
var info = [];
var extent = dragBox.getGeometry().getExtent(); /** getGeometry() * Returns geometry of last drawn box. * 最後に描画したボックスのジオメトリを返します。（ol3 API） */
/** getExtent() * Get the extent of the geometry. * ジオメトリの範囲を取得します。（ol3 API） */
vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
/** forEachFeatureIntersectingExtent()
* Iterate through all features whose geometry intersects
* the provided extent, calling the callback with each
* feature. If the callback returns a "truthy" value,
* iteration will stop and the function will return the
* same value.
* If you only want to test for bounding box intersection,
* call the source.forEachFeatureInExtent() method instead.
* 提供範囲を交差するジオメトリのすべてのフィーチャを反復し、各
* フィーチャと共にコールバックを呼び出します。コールバックが
* 「truthy」の値を返した場合、反復が停止し、フィーチャは同じ値
* を返します。
* ボックス交差境界をテストするだけなら、代わりに
* source.forEachFeatureInExtent（）メソッドを呼び出します。
* （ol3 API）
*/
selectedFeatures.push(feature); /** push(elem) * Insert the provided element at the end of the * collection. * コレクションの最後に供給されたエレメントに挿入します。 * Name: elem, Type: T, Description: Element * （ol3 API） */
info.push(feature.get('name'));
/** Array.push
* 与えられた要素を追加することによって配列を変異させ、
* その配列の新しい長さを返します。
* （MDN [https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/push]）
*/
/** get(key) * Gets a value. * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
});
if (info.length > 0) {
infoBox.innerHTML = info.join(', ');
/** Array.join
* 配列の全ての要素を繋いで文字列にします。
* （MDN [https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/join]）
*/
} });
/** clear selection when drawing a new box and when clicking * on the map * 新しいボックスを描画したときとマップ場をクリックしたときに選択 * を解除します。 */
dragBox.on('boxstart', function(e) {
selectedFeatures.clear(); /** clear() * Remove all elements from the collection. * コレクションからすべてのエレメントを削除します。（ol3 API） */
infoBox.innerHTML = ' '; });
map.on('click', function() {
/** on
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
selectedFeatures.clear(); infoBox.innerHTML = ' '; });
0 件のコメント:
コメントを投稿