2014年9月15日月曜日

1 - ol3 12 - Workshop 3.2. Selecting Features

3.2. フィーチャを選択する
レイヤモジュールで見てきたように、ベクタとしてフィーチャを引き出し、ベースマップ の上にそれらを描くことができます。ベクタデータを提供することの利点の一つは、ユーザがデータとインターラクション(対話型操作)ができることです。この例では、ユーザが選択し、フィーチャ情報を表示することができるベクタレイヤを作成します。
前の例は、マップ上に ol.control.Control を使用してみました。Controls は、マップ上に視覚表現するか、ドキュメントに DOM エレメントを追加します。ol.interaction.Interaction は、ユーザの対話に反応しますが、一般的に視覚表現はしません。この例は、ベクタレイヤからフィーチャと対話するために ol.interactionSelect を使用しています。

3.2.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">
   var map = new ol.Map({
    // 追加 3.2.1
    interactions: ol.interaction.defaults().extend([
     new ol.interaction.Select({
      style: new ol.style.Style({
       image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
         color: '#FF0000'
        }),
        stroke: new ol.style.Stroke({
         color: '#000000'
        })
       })
      })
     })
    ]),
    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: new ol.source.GeoJSON({
       url: 'data/layers/7day-M2.5.json'
      }),
      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サーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。)フィーチャ選択の実行を確認するには、地震(の発生場所)を選択するためマウスのクリックを使用します。


ベクタレイヤからフィーチャを選択するためにインターラクションを利用。

0 件のコメント: