2 - ol3.1ex 51a - Box selection example 1

「Box selection example((box-selection.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Using a DragBox interaction to select features.
機能を選択する DragBox のインターラクションを使用。

This example shows how to use a DragBox interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select) for highlighting.
この例では、フィーチャを選択する DragBox インターラクションを使用する方法を示しています。選択したフィーチャは、強調表示するための select インターラクション （ol.interaction.Select）のフィーチャオーバーレイに追加されます。

Use SHIFT+drag to draw fsboxes.
ボックスを描画するために、SHIFT + ドラッグを使用してください。

HTML ファイルの作成

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.1.1」->「examples」->「box-selection.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「box-selection.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「251-ol3ex.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「box-selection.html」の内容をコピーして「251-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「251-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「box-selection.js」の内容をコピーして貼り付け、修正します。「box-selection-require.js」も「251-ol3ex-require.js」に貼り付けます。

「251-ol3ex.html」

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

  <title>Box selection example</title>
 </head>
 <body>

  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">

     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.1.1/examples/"><img src="v3.1.1/resources/logo.png"> OpenLayers 3 Examples</a>

    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>

   <div class="row-fluid">
    <div class="span4">
     <h4 id="title">Box selection example</h4>

     <p id="shortdesc">Using a DragBox interaction to select features.</p>

     <div id="docs">
      <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
       to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
      <p>Use <code>SHIFT+drag</code> to draw boxes.</p>

      <!--
      See the <a href="box-selection.js" target="_blank">box-selection.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="251-ol3ex.js" target="_blank">251-ol3ex.js source</a> to see how this is done.</p>

     </div>
     <div id="tags">DragBox, feature, selection, box</div>
    </div>
    <div class="span4 offset4">
     <div id="info" class="alert alert-success">
      &nbsp;
     </div>
    </div>
   </div>
  </div>

  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js（Examples用 JSコード[文字コードなど]）
  -->
  <script src="v3.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>

  <!--
  <script src="loader.js?id=box-selection" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=251-ol3ex" type="text/javascript"></script>

 </body>
</html>

OpenLayers 26 複数のレイヤで Feature を選択したときに色を変える

OpenLayers Select Feature on Multiple Layers Example(select-feature-multilayer.html) を参考に複数のレイヤで Feature を選択したときに色を変えます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_feature_multilayer.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「select-feature-multilayer.html」の内容をコピーして新規作成したファイルに貼り付けます。

次の様にコードを修正します。
（範囲を東京都の地図に合わせてみました。）

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>SelectFeature Control on multiple vector layers</title> 
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />
  <style type="text/css">
   #controlToggle li {
    list-style: none;
   }
  </style>
  <script src="./lib/OpenLayers.js"></script>

  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>

<!-- JavaScript 本体 -->

  <script type="text/javascript">
   var map, selectControl;
   OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
   function init(){
// map = new OpenLayers.Map('map');
// ここから
   map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection("EPSG:2456"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    maxResolution: 'auto',
    units: 'meters',
    maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
   });

   layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
     layers: 'height',
     format: 'image/png'
   });

   layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
    "http://192.168.1.6/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
     layers: 'kukaku',
     transparent: true,
     format: 'image/png'
   });

// ここまで
// マーカとスクエア（ダイヤ）の表示レイヤとスタイルの設定

   var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
    styleMap: new OpenLayers.StyleMap({
     "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
      externalGraphic: "./img/marker-green.png",
      graphicOpacity: 1,
      rotation: -45,
      pointRadius: 10
    }, OpenLayers.Feature.Vector.style["default"])),
    "select": new OpenLayers.Style({
      externalGraphic: "./img/marker-blue.png"
     })
    })
   });
   var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
    styleMap: new OpenLayers.StyleMap({
     "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
      fillColor: "red",
      strokeColor: "gray",
      graphicName: "square",
      rotation: 45,
      pointRadius: 15
     }, OpenLayers.Feature.Vector.style["default"])),
     "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
      graphicName: "square",
      rotation: 45,
      pointRadius: 15
     }, OpenLayers.Feature.Vector.style["select"]))
    })
   });
// map.addLayers([wmsLayer, vectors1, vectors2]);
   map.addLayers([layer1, layer2, vectors1, vectors2]);

   map.addControl(new OpenLayers.Control.LayerSwitcher());
   map.addControl(new OpenLayers.Control.MousePosition());
   map.addControl(new OpenLayers.Control.ScaleLine());

// フィーチャを選択（クリック）したときの動作（+Shiftキー、+Ctrlキー）

   selectControl = new OpenLayers.Control.SelectFeature(
    [vectors1, vectors2],
    {
    clickout: true, toggle: false,
    multiple: false, hover: false,
    toggleKey: "ctrlKey", // ctrl key removes from selection
    multipleKey: "shiftKey" // shift key adds to selection
    }
   );
            
   map.addControl(selectControl);
   selectControl.activate();
// map.setCenter(new OpenLayers.LonLat(0, 0), 3);
   if (!map.getCenter()) {
    map.zoomToMaxExtent()
   };
   vectors1.addFeatures(createFeatures());
   vectors2.addFeatures(createFeatures());

// 選択したフィーチャの id の表示内容

   vectors1.events.on({
    "featureselected": function(e) {
     showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
     },
    "featureunselected": function(e) {
     showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
     }
   });
   vectors2.events.on({
    "featureselected": function(e) {
     showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
     },
    "featureunselected": function(e) {
     showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
     }
   });
  }

// フィーチャの自動生成

  function createFeatures() {
   var extent = map.getExtent();
   var features = [];
   for(var i=0; i<10; ++i) {
    features.push(new OpenLayers.Feature.Vector(
     new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),
     extent.bottom + (extent.top - extent.bottom) * Math.random()
    )));
   }
   return features;
  }

// フィーチャ id の表示

  function showStatus(text) {
   document.getElementById("status").innerHTML = text;            
   }

  </script>
 </head>
 <body onload="init()">
  <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
  <p id="shortdesc">
   Select a feature on click with the Control.SelectFeature on multiple 
   vector layers.
  </p>  
  <div id="map" class="smallmap"></div>
  <div id="status"></div>
 </body>
</html>

Shift + クリック でマーカはマーカの画像、スクエア図はマップを別ウィンドウで表示
Ctrl + クリック でマーカはマーカの画像、スクエア図はマップを別タグで表示
してしまいました。