2014年1月21日火曜日

34 - 編集ツールバー(Editing Toolbar) 5 - 削除ボタンを追加

34-5 Editing Toolbar に削除ボタンを追加する
「ol015-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。
削除ボタンは次のようなものを作成して、"OpenLayers-2.13.1/theme/default/img/ に保存しました。


remove_feature_on.png

remove_feature_off.png


<style> に削除ボタンのスタイルを追加

---
// ここから追加
 .olControlDeleteFeatureItemActive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/remove_feature_on.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
 .olControlDeleteFeatureItemInactive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/remove_feature_off.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
// ここまで
---

削除ボタンのコードを追加

---
     new OpenLayers.Control.ModifyFeature(vectors,{
       title: "Modify Feature",
         displayClass: "olControlModifyFeature"
     }),
// ここから追加
     new DeleteFeature(vectors,{
       title: "Remove Feature",
         displayClass: "olControlDeleteFeature"
     }),
// ここまで
     new OpenLayers.Control.SelectFeature(
---
   map.zoomToMaxExtent();
  }
// ここから追加
  DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
   initialize: function(layer, options) {
    OpenLayers.Control.prototype.initialize.apply(this, [options]);
    this.layer = layer;
    this.handler = new OpenLayers.Handler.Feature(
     this, layer, {click: this.clickFeature}
    );
   },
   clickFeature: function(feature) {
    // if feature doesn't have a fid, destroy it
    if(feature.fid == undefined) {
     this.layer.destroyFeatures([feature]);
    } else {
     this.layer.drawFeature(feature,{display: "none"});
     this.layer.removeFeatures(feature);
     //feature.state = OpenLayers.State.DELETE;
     this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature});
     //feature.renderIntent = "select";
    }
   },
   setMap: function(map) {
    this.handler.setMap(map);
    OpenLayers.Control.prototype.setMap.apply(this, arguments);
   },
   CLASS_NAME: "OpenLayers.Control.DeleteFeature"
  });
// ここまで
 </script>
</head>
---











参考 HTML ファイル
ol015-nippon_bmi_akiruno_pgis.html

34 - 編集ツールバー(Editing Toolbar) 4 - 変形ボタンを追加

34-4 Editing Toolbar に変形ボタンを追加する
「ol015-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。
変形ボタンは次のようなものを作成して、"OpenLayers-2.13.1/theme/default/img/ に保存しました。


modify_feature_on.png

modify_feature_off.png


<style> に変形ボタンのスタイルを追加

---
// ここから追加
 .olControlModifyFeatureItemActive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/modify_feature_on.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
 .olControlModifyFeatureItemInactive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/modify_feature_off.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
// ここまで
---

移動ボタンのコードを追加

---
  new OpenLayers.Control.DragFeature(
   vectors,
   {
   title: "Drag Feature",
   displayClass: 'olControlDragFeature'
  }),
// ここから追加
  new OpenLayers.Control.ModifyFeature(vectors,{
   title: "Modify Feature",
   displayClass: "olControlModifyFeature"
  }),
// ここまで
  new OpenLayers.Control.SelectFeature(
---

34 - 編集ツールバー(Editing Toolbar) 3 - 移動ボタンを追加

34-3 Editing Toolbar に移動ボタンを追加する
「ol015-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。
移動ボタンは次のようなものを作成して、"OpenLayers-2.13.1/theme/default/img/ に保存しました。


drag_feature_on.png

drag_feature_off.png


<style> に移動ボタンのスタイルを追加

--
// ここから追加
 .olControlDragFeatureItemActive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/   drag_feature_on.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
 .olControlDragFeatureItemInactive { 
  background-image: url(OpenLayers-2.13.1/theme/default/img/drag_feature_off.png);
  background-repeat: no-repeat;
  background-position: 0px 1px;
 }
// ここまで
---

移動ボタンのコードを追加

---
   new OpenLayers.Control.DrawFeature(
    vectors,
    OpenLayers.Handler.Polygon,
    {
     title: "Draw Polygon",
     displayClass: 'olControlDrawFeaturePolygon',
     multi: true
   }),
// ここから追加
   new OpenLayers.Control.DragFeature(
    vectors,
    {
     title: "Drag Feature",
     displayClass: 'olControlDragFeature'
   }),
// ここまで
   new OpenLayers.Control.SelectFeature(
---


34 - 編集ツールバー(Editing Toolbar) 2 - 選択ボタンを追加

34-2 Editing Toolbar に選択ボタンを追加する「ol015-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。
OpenLayers の Development Examples の「Editing Toolbar Example(http://openlayers.org/dev/examples/editingtoolbar.html)」と OpenLayers の

「Control」ページ
http://docs.openlayers.org/library/controls.html

の「Customizing an Existing Panel」を参考に Editing Toolbar に選択ボタンを追加してみます。

---
   map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection("EPSG:2451"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    maxResolution: 'auto',
    units: 'meters',
    maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200),
    controls: [
     new OpenLayers.Control.PanZoom(),
//   new OpenLayers.Control.EditingToolbar(vectors ), 削除
     new OpenLayers.Control.LayerSwitcher(),
     new OpenLayers.Control.MousePosition()
    ]
   });
   map.addLayers([layer0, layer3, layer1, layer2, layer4, vectors]);
// ここから追加
   var panel = new OpenLayers.Control.Panel({
    displayClass: 'customEditingToolbar',
    allowDepress: true
    // "OpenLayers.Control.TYPE_TOOL" が "true" のとき "on" のアイコンをクリックすると "off" になる
   });
// ボタンを1つずつ設定しないと配置がうまくできませんでした
   panelCrontrol = [
    new OpenLayers.Control.Navigation(
     {
      title: "Navigation"
       // ポインタをボタンに重ねたときには浮き出して表示
     }),
),
    new OpenLayers.Control.DrawFeature(
     vectors,
     OpenLayers.Handler.Point,
     {
      multi: true,
       // レイヤに渡す前に feature をマルチタイプジオメトリに型変換
      displayClass: 'olControlDrawFeaturePoint' // アイコンの設定
    }),
    new OpenLayers.Control.DrawFeature(
     vectors,
     OpenLayers.Handler.Path,
     {
      multi: true,
      displayClass: 'olControlDrawFeaturePath'
    }),
    new OpenLayers.Control.DrawFeature(
     vectors,
     OpenLayers.Handler.Polygon,
     {
      multi: true,
      displayClass: 'olControlDrawFeaturePolygon'
    }),
    new OpenLayers.Control.SelectFeature(
     vectors,
     {
      clickout: false, toggle: false,
      multiple: false, hover: false,
      toggleKey: "ctrlKey", // ctrl key removes from selection
      multipleKey: "shiftKey", // shift key adds to selection
      box: true,
      displayClass: 'olControlSelectFeature'
    })
   ]; 
   panel.addControls(panelControl);
   map.addControl(panel);
// ここまで

   map.zoomToMaxExtent();
  }
 </script>
</head>
---

「displayClass」は、style を設定してアイコンを指定します。内容は "OpenLayers-2.13.1/theme/default/style.css" をコピーしました。
選択ボタンは次のようなものを作成して、"OpenLayers-2.13.1/theme/default/img/ に保存しました。

select_feature_on.png
select_feature_off.png

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
<!-- ここから追加 -->
  <style>
   .customEditingToolbar {
    float: right;
    right: 0px;
    height: 30px; 
   }
   .customEditingToolbar div {
    float: right;
    margin: 5px;
    width: 24px;
    height: 24px;
   }
   .olControlNavigationItemActive { 
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -103px -23px; 
   }
   .olControlNavigationItemInactive { 
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -103px -0px; 
   }
  .olControlDrawFeaturePointItemInactive {
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -77px -1px;
   }
  .olControlDrawFeaturePointItemActive {
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -77px -24px;
   }
  .olControlDrawFeaturePathItemInactive {
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -51px -1px;
   }
  .olControlDrawFeaturePathItemActive {
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -51px -24px;
   }
   .olControlDrawFeaturePolygonItemInactive { 
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -26px 0px; 
   }
   .olControlDrawFeaturePolygonItemActive { 
    background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
    background-repeat: no-repeat;
    background-position: -26px -23px;
   }
   .olControlSelectFeatureItemActive {
    background-image: url(OpenLayers-2.13.1/theme/default/img/select_feature_on.png);
    background-repeat: no-repeat;
    background-position: 0 1px;
   }
   .olControlSelectFeatureItemInactive {
    background-image: url(OpenLayers-2.13.1/theme/default/img/select_feature_off.png);
    background-repeat: no-repeat;
    background-position: 0 1px;
   }
  </style>
<!-- ここまで -->
---


34 - 編集ツールバー(Editing Toolbar) 1 - Editing Toolbar を設定

34-1 Editing Toolbar を設定する
OpenLayers の Development Examples の「Editing Toolbar Example(http://openlayers.org/dev/examples/editingtoolbar.html)」を参考に Editing Toolbar を設定してみます。
最初に、HTML ファイルを準備します。

a 「App Exploler」ペインの「ol009-nippon_bmi_akiruno_pgis.html」を右クリックし「コピー」をクリックします。








b 「App Exploler」ペイン上で右クリックし「貼り付け」をクリックします。









c 「名前の競合」ウィンドウで「ol015-nippon_bmi_akiruno_pgis.html」と入力し「OK」ボタンをクリックします。



d 「App Exploler」ペインの「ol015-nippon_bmi_akiruno_pgis.html」をダブルクリックして開きます。
 e 上記サイトを右クリックしてソースを表示します。
 f 次のように内容の一部をコピーして「ol015-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。
(29-2 で追加したところは削除します。)

---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, vectors; // "vectors" を追加
 function init(){

  layer0 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
---
  vectors = new OpenLayers.Layer.Vector("Vector Layer"); // 追加, "vlayer" を "vectors" に変更
// ここへ移動
  map = new OpenLayers.Map('map', {
   projection: new OpenLayers.Projection("EPSG:2451"),
   displayProjection: new OpenLayers.Projection("EPSG:4326"),
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200),
// ここから追加
   controls: [
    new OpenLayers.Control.PanZoom(),
    new OpenLayers.Control.EditingToolbar(vectors), //  "vlayer" を "vectors" に変更
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.MousePosition()
   ]
// ここまで
  });
  map.addLayers([layer0, layer3, layer1, layer2, layer4, vectors]); // "vectors" を追加
/* ここから削除
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
   ここまで */
  map.zoomToMaxExtent();
 }
</script>
---

2014年1月14日火曜日

33 - マウスでフィーチャを描画 6 - 描画途中で戻る(Undo)元に戻す(Redo)

33-6 ポリゴン(多角形)の描画途中で戻る(Undo)元に戻す(Redo)
examples フォルダにある「OpenLayers Undo/Redo Drawing Methods(draw-undo-redo.html)」を参考に マウスで移動してみます。
「ol014-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。

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







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「draw-undo-redo.html」をクリックして選択し、「OK」ボタンをクリックします。






同じように「draw-undo-redo.js」を開きます。








c 次のように「draw-undo-redo.js」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。

---
// ここから追加
  OpenLayers.Event.observe(document, "keydown", function(evt) {
   var handled = false;
   switch (evt.keyCode) {
    case 90: // z
     if (evt.metaKey || evt.ctrlKey) {
//    draw.undo();
      drawControls.polygon.undo(); // "draw" を "drawControls.polygon" に修正
      handled = true;
     }
     break;
    case 89: // y
     if (evt.metaKey || evt.ctrlKey) {
//    draw.redo();
      drawControls.polygon.redo(); // "draw" を "drawControls.polygon" に修正
      handled = true;
     }
     break;
    case 27: // esc
//   draw.cancel();
     drawControls.polygon.cancel(); // "draw" を "drawControls.polygon" に修正
     handled = true;
     break;
   }
   if (handled) {
    OpenLayers.Event.stop(evt);
   }
  });
// ここまで
 </script>
</head>
---


3回クリックしたところで








「Ctrl + z」(Macは「⌘ + z」)キーを押すと、直前の点がキャンセルされる。







「Ctrl + y」(Macは「⌘ + y」)キーを押すと、キャンセルさた点が元に戻る。







「esc」キーを押すと、描画途中のフィーチャがすべて消える。









「33 - マウスでフィーチャを描画」参考 HTML ファイル
ol014-nippon_bmi_akiruno_pgis.html

33 - マウスでフィーチャを描画 5 - ポリゴン(多角形)を削除する

33-5 ポリゴン(多角形)を削除する
「geometricnet」の「OpenLayers Undo Redo Vector Edit Example(http://geometricnet.sourceforge.net/examples/undo-redo.html)」を参考に マウスで削除してみます。
(このサイトを参考に UndoRedo を試してみましたが、動作しませんでした。)
「ol014-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。

a 上記サイトを右クリックしてソースを表示します。
b 次のように内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。

---
    modify: new OpenLayers.Control.ModifyFeature(vectors),
    "delete": new DeleteFeature(vectors) // 追加
   };
---
   DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
    initialize: function(layer, options) {
     OpenLayers.Control.prototype.initialize.apply(this, [options]);
      this.layer = layer;
      this.handler = new OpenLayers.Handler.Feature(
       this, layer, {click: this.clickFeature}
     );
    },
    clickFeature: function(feature) {
     // if feature doesn't have a fid, destroy it
     if(feature.fid == undefined) {
      this.layer.destroyFeatures([feature]);
     } else {
      this.layer.drawFeature(feature,{display: "none"});
      this.layer.removeFeatures(feature);
      //feature.state = OpenLayers.State.DELETE;
      this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature});
      //feature.renderIntent = "select";
     }
    },
    setMap: function(map) {
     this.handler.setMap(map);
     OpenLayers.Control.prototype.setMap.apply(this, arguments);
    },
    CLASS_NAME: "OpenLayers.Control.DeleteFeature"
   });
// ここまで
  </script>
 </head>
 <body onload="init()">
---
<!-- ここから追加 -->
   <li>
    <input id="deleteToggle" type="radio" name="type" value="delete" onlick="toggleControl(this);" />
    <label for="polygonToggle">delete feature</label>
   </li>
<!--  ここまで -->
  </ul>
  </div>
 <body>
</html>


クリックしたフィーチャが削除されます。
335a-olaki.png
335b-olaki.png

33 - マウスでフィーチャを描画 4 - ポリゴン(多角形)を変形する

33-4 ポリゴン(多角形)を変形する
examples フォルダにある「OpenLayers Modify Feature Example(modify-feature.html)」を参考に マウスで移動してみます。
「ol014-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。

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







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「modify-feature.html」をクリックして選択し、「OK」ボタンをクリックします。






c 次のように「modify-feature.html」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。
---
  <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
  <style type="text/css">
/* ここから追加 */
   #controls {
    width: 512px;
   }
   #controlToggle {
    padding-left: 1em;
   }
/* ここまで */
   #controlToggle li {
    list-style: none;
   }
   p {
    width: 512px;
   }
   /* avoid pink tiles */
   .olImageLoadError {
    background-color: transparent !important;
   }
  </style>
  <title>WMS Example BMI Akiruno PGIS2</title>
---
     map.addLayers([layer0, layer3, layer1, layer2, layer4, vectors]);
// ここから追加
     if (console && console.log) {
      function report(event) {
       console.log(event.type, event.feature ? event.feature.id : event.components);
      }
      vectors.events.on({
       "beforefeaturemodified": report,
       "featuremodified": report,
       "afterfeaturemodified": report,
       "vertexmodified": report,
       "sketchmodified": report,
       "sketchstarted": report,
       "sketchcomplete": report
      });
     }
// ここまで
     drawControls = {
      polygon: new OpenLayers.Control.DrawFeature(
       vectors, OpenLayers.Handler.Polygon),
      drag1: new OpenLayers.Control.DragFeature( // "drag" を "drag1" に修正
       vectors,
       {
        onStart: startDrag,
        onDrag: doDrag,
        onComplete: endDrag
       }
      ),
      modify: new OpenLayers.Control.ModifyFeature(vectors), // 追加
      select: new OpenLayers.Control.SelectFeature(
       vectors,
---
   function update() {
    var clickout = document.getElementById("clickout").checked;
    if(clickout != drawControls.select.clickout) {
     drawControls.select.clickout = clickout;
    }
// ここから追加 "controls" を "drawControls" に修正
    // reset modification mode
    drawControls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
    var rotate = document.getElementById("rotate").checked;
    if(rotate) {
        drawControls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
    }
    var resize = document.getElementById("resize").checked;
    if(resize) {
        drawControls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
        var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
        if (keepAspectRatio) {
            drawControls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
        }
    }
    var drag = document.getElementById("drag").checked;
    if(drag) {
        drawControls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
    }
    if (rotate || drag) {
        drawControls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
    }
    drawControls.modify.createVertices = document.getElementById("createVertices").checked;
    var sides = parseInt(document.getElementById("sides").value);
    sides = Math.max(3, isNaN(sides) ? 0 : sides);
    drawControls.regular.handler.sides = sides;
    var irregular =  document.getElementById("irregular").checked;
    drawControls.regular.handler.irregular = irregular;
// ここまで     
   var box = document.getElementById("box").checked;
    if(box != drawControls.select.box) {
     drawControls.select.box = box;
     if(drawControls.select.active) {
      drawControls.select.deactivate();
      drawControls.select.activate();
     }
    }
   }
  </script>
 </head>
 <body onload="init()">
---
  <div id="controls"> <!-- 追加 -->
  <ul id="controlToggle">
---
<!-- "drag" を "drag1" に修正 -->
 <li>
   <input type="radio" name="type" value="drag1" id="dragToggle" onclick="toggleControl(this);" />
   <label for="dragToggle">drag feature</label>
 </li>
---
<!-- ここから追加 -->
  <li>
   <input type="radio" name="type" value="modify" id="modifyToggle" onclick="toggleControl(this);" />
   <label for="modifyToggle">modify feature</label>
   <ul>
    <li>
     <input id="createVertices" type="checkbox" checked name="createVertices" onchange="update()" />
     <label for="createVertices">allow vertices creation</label>
    </li>
    <li>
     <input id="rotate" type="checkbox" name="rotate" onchange="update()" />
     <label for="rotate">allow rotation</label>
    </li>
    <li>
     <input id="resize" type="checkbox" name="resize" onchange="update()" />
     <label for="resize">allow resizing</label>
     (<input id="keepAspectRatio" type="checkbox" name="keepAspectRatio" onchange="update()" checked="checked" />
     <label for="keepAspectRatio">keep aspect ratio</label>)
    </li>
    <li>
     <input id="drag" type="checkbox" name="drag" onchange="update()" />
     <label for="drag">allow dragging</label>
    </li>
   </ul>
  </li>
<!--  ここまで -->
  </ul>
  </div> <!-- 追加 -->
 </body>
</html>
modify feature
 allow vertices creation: 角数を増やす(他のオプションと同時に動作しません)









 allow rotation: 点をドラッグして回転させる










 allow resizing: 点をドラッグして大きさを変える
 (keep aspect ratio: 比率を変えない)









 allow dragging: 点をドラッグして移動させる
(このドラッグでは複数のフィーチャを同時に移動する方法が見つかりませんでした。)

33 - マウスでフィーチャを描画 3 - ポリゴン(多角形)を移動する

33-3a ポリゴン(多角形)を移動する
examples フォルダにある「Drag Feature Example(drag-feature.html)」を参考に マウスで移動してみます。
「ol014-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。

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







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「drag-feature.html」をクリックして選択し、「OK」ボタンをクリックします。






c 次のように「drag-feature.html」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。

---


 drawControls = {
  polygon: new OpenLayers.Control.DrawFeature(
   vectors, OpenLayers.Handler.Polygon),
  drag: new OpenLayers.Control.DragFeature(
   vectors), // 追加
  select: new OpenLayers.Control.SelectFeature(
   vectors,


---
   <li>
    <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
    <label for="polygonToggle">draw polygon</label>
   </li>

<!-- ここから追加 -->
  <li>
    <input type="radio" name="type" value="drag" id="dragToggle" onclick="toggleControl(this);" />
    <label for="dragToggle">drag feature</label>
  </li>
<!--  ここまで -->

   <li>
    <input type="radio" name="type" value="selecthover" id="selecthoverToggle" onclick="toggleControl(this);" />
    <label for="selecthoverToggle">Select features on hover</label>
   </li>
---














33-3b ポリゴン(多角形)を複数選択して移動する
このままでは、フィーチャを複数選択して同時に移動できませんでした。

Stack Overflow の

「Drag/Move Multiple Selected Features - OpenLayers」
http://stackoverflow.com/questions/4389221/drag-move-multiple-selected-features-openlayers

を参考にコードを次のように修正します。

---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, drawControls, vectors; // "vectors" 追加
---
  vectors = new OpenLayers.Layer.Vector("Vector Layer", { // "var" 削除
   renderers: renderer
  });
---
  drawControls = {
   polygon: new OpenLayers.Control.DrawFeature(
    vectors, OpenLayers.Handler.Polygon),
   drag: new OpenLayers.Control.DragFeature(
    vectors,
    // ここから追加 
    {
     onStart: startDrag,
     onDrag: doDrag,
     onComplete: endDrag
    }
    // ここまで
   ),
   select: new OpenLayers.Control.SelectFeature(
    vectors,
    {
     clickout: false, toggle: false,
     multiple: false, hover: false,
     toggleKey: "ctrlKey", // ctrl key removes from selection
     multipleKey: "shiftKey", // shift key adds to selection
     box: true,
     // ここから追加
     onSelect: addSelected,
     onUnselect: clearSelected
     // ここまで
    }
   ),
   selecthover: new OpenLayers.Control.SelectFeature(
    vectors,
    {
     multiple: false, hover: true,
     toggleKey: "ctrlKey", // ctrl key removes from selection
     multipleKey: "shiftKey" // shift key adds to selection
    }
   )
  };
---
// ここから追加
  /* Keep track of the selected features */
  function addSelected(feature) {
   selectedFeatures.push(feature);
  }
  /* Clear the list of selected features */
  function clearSelected(feature) {
   selectedFeatures = [];
  }
  /* Feature starting to move */
  function startDrag(feature, pixel) {
   // save hash with selected features start position
   lastPixel = pixel;
  }
  /* Feature moving */
  function doDrag(feature, pixel) {
   for (f in selectedFeatures) {
    if (feature != selectedFeatures[f]) {
     var res = map.getResolution();
     selectedFeatures[f].geometry.move(res * (pixel.x - lastPixel.x), res * (lastPixel.y - pixel.y));
     vectors.drawFeature(selectedFeatures[f]);
    }
   }
   lastPixel = pixel;

  /* because DragFeatures own handler overwrites dragSelected.lastPixel with pixel before this is called, calculate drag vector from movement of "feature" */
  }
  /* Featrue stopped moving */
  function endDrag(feature, pixel) {
   for (f in selectedFeatures) {
    f.state = OpenLayers.State.UPDATE;
   }
  }
// ここまで

 </script>
</head>
---


「select feature」をクリックしてラジオボタンをオンにし、「select features in a box」にチェックがついていることを確認して、複数のフィチャーをドラッグして選択します。
(最初の選択ではフィーチャが1つしか選択されませんでした。原因はわかりませんでした。1度選択を外して、もう一度選択します。)




フィーチャを1つだけドラッグすると、選択したフィーチャが一緒に移動します。

33 - マウスでフィーチャを描画 2 - ポリゴン(多角形)を選択する

33-2 ポリゴン(多角形)を選択する
examples フォルダにある「OpenLayers Select Feature Example(select-feature.html)」を参考に マウスで選択してみます。
「ol014-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。

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







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「selsct-feature.html」をクリックして選択し、「OK」ボタンをクリックします。






c 次のように「selsct-feature.html」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。

---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, drawControls;
 OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
---
//  var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); 削除
// ここから追加
  // allow testing of specific renderers via "?renderer=Canvas", etc
  var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
  renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
  var vectors = new OpenLayers.Layer.Vector("Vector Layer", {
   renderers: renderer
  });
  vectors.events.on({
   'featureselected': function(feature) {
    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
   },
   'featureunselected': function(feature) {
    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
   }
  });
// ここまで
  map.addLayers([layer0, layer3, layer1, layer2, layer4, vectors]); // "polygonLayer" 削除,  "vectors" 追加
  drawControls = {
   polygon: new OpenLayers.Control.DrawFeature(
    vectors, OpenLayers.Handler.Polygon), // "polygonLayer" を "vectors" に変更
// ここから追加
   select: new OpenLayers.Control.SelectFeature(
    vectors,
    {
     clickout: false, toggle: false,
     multiple: false, hover: false,
     toggleKey: "ctrlKey", // ctrl key removes from selection
     multipleKey: "shiftKey", // shift key adds to selection
     box: true
    }
   ),
   selecthover: new OpenLayers.Control.SelectFeature(
    vectors,
    {
     multiple: false, hover: true,
     toggleKey: "ctrlKey", // ctrl key removes from selection
     multipleKey: "shiftKey" // shift key adds to selection
    }
   )
// ここまで
  };
  for(var key in drawControls) {
   map.addControl(drawControls[key]);
  }
//  document.getElementById('noneToggle').checked = true; 削除
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.zoomToMaxExtent();
 } // End of "function init()"
 function toggleControl(element) {
  for(key in drawControls) {
   var control = drawControls[key];
   if(element.value == key && element.checked) {
    control.activate();
   } else {
    control.deactivate();
    }
  }
 }
/* 削除
 function allowPan(element) {
  var stop = !element.checked;
  for(var key in drawControls) {
   drawControls[key].handler.stopDown = stop;
   drawControls[key].handler.stopUp = stop;
  }
 }
*/
// ここから追加
 function update() {
  var clickout = document.getElementById("clickout").checked;
  if(clickout != drawControls.select.clickout) {
   drawControls.select.clickout = clickout;
 }
 var box = document.getElementById("box").checked;
  if(box != drawControls.select.box) {
   drawControls.select.box = box;
   if(drawControls.select.active) {
    drawControls.select.deactivate();
    drawControls.select.activate();
   }
  }
 }
// ここまで
</script>
</head>
<body onload="init()">
---
 <ul id="controlToggle">
  <li>
   <input type="radio" name="type" value="none" id="noneToggle"
     onclick="toggleControl(this);" checked="checked" />
   <label for="noneToggle">navigate</label>
  </li>
  <li>
   <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
   <label for="polygonToggle">draw polygon</label>
  </li>
<!-- ここから追加 -->
  <li>
   <input type="radio" name="type" value="selecthover" id="selecthoverToggle" onclick="toggleControl(this);" />
   <label for="selecthoverToggle">Select features on hover</label>
  </li>
  <li>
   <input type="radio" name="type" value="select" id="selectToggle" onclick="toggleControl(this);" />
   <label for="selectToggle">select feature (<span id="counter">0</span> features selected)</label>
   <ul>
    <li>
     <input id="box" type="checkbox" checked="checked" name="box" onchange="update()" />
     <label for="box">select features in a box</label>
    </li>
    <li>
     <input id="clickout" type="checkbox" name="clickout" onchange="update()" />
     <label for="clickout">click out to unselect features</label>
    </li>
   </ul>
  </li>
<!--  ここまで -->
 </ul>
 </body>
</html>

Select features on hover:
ポインタをフィーチャの上に重ねると色が変わる。

select feature (0 features selected):
クリックするとフィーチャの色が変わる。次のフィーチャをクリックするとそのフィーチャの色が変わり、色がかわっていたフィーチャは元の色に戻る。フィーチャ以外の部分をクリックしても変化はない。
 select features in a box:
 地図上をドラッグして範囲選択すると、その中のフィーチャの色が変わる。
 click out to unselect features:
 フィーチャ以外の部分をクリックすると元の色に戻る。

Use the shift key to select multiple features.
shift キーを押しながらクリックすると複数のフィーチャの色が同時に変わる。

Use the ctrl key to  toggle selection on features one at a time.
ctrl キーを押しながらひとつのフィーチャをクリックすると、「色が変わる」、「元の色に戻る」を繰り返す。
複数のフィーチャの色が変わっているときは、そのフィーチャだけが元の色に戻り、もう一度クリックするとそのフィーチャだけが色が変わり、他のフィーチャは元の色に戻る。



Note: the "clickout" option has no effect when "hover" is selected.
clickout オプションは、hover が選択されているときは効果がない。

33 - マウスでフィーチャを描画 1 - ポリゴン(多角形)を描く

33-1 マウスでポリゴン(多角形)を描く
examples フォルダにある「OpenLayers Draw Feature Example(draw-feature.html)」を参考に マウスでポリゴン(多角形)を描いてみます。
最初に、HTML ファイルを準備します。
(Eclipse 4.2 Juno の調子が良くないので、4.3 Kepler standerd をインストールしました。少し手順が変わります。)

a 「App Exploler」ペインの「ol009-nippon_bmi_akiruno_pgis.html」を右クリックし「コピー」をクリックします。








b 「App Exploler」ペイン上で右クリックし「貼り付け」をクリックします。









c 「名前の競合」ウィンドウで「ol014-nippon_bmi_akiruno_pgis.html」と入力し「OK」ボタンをクリックします。



d 「App Exploler」ペインの「ol014-nippon_bmi_akiruno_pgis.html」をダブルクリックして開きます。

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







f 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「draw-feature.html」をクリックして選択し、「OK」ボタンをクリックします。






g 次のように「draw-feature.html」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。
(29-2 で追加したところは削除します。)

---
<link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
<!-- ここからスタイルを追加 -->
<style type="text/css">
/* リスト表示のときマークがつかないようにする */
 #controlToggle li {
  list-style: none;
 }
 p {
  width: 512px;
 }
 /* avoid pink tiles */
 /* 画像が表示できない時にピンク色のタイルを表示しないようにする */
 .olImageLoadError {
  background-color: transparent !important;
 }
</style>
<title>WMS Example BMI Akiruno PGIS2</title>
---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, drawControls; // "drawControls" 追加
---
 // わかりやすいようにポリゴンだけ追加
 var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
 map.addLayers([layer0, layer3, layer1, layer2, layer4, polygonLayer]); // "polygonLayer" 追加
// ここから追加
 drawControls = {
  polygon: new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon)
 };

 for(var key in drawControls) {
  map.addControl(drawControls[key]);
 }

 document.getElementById('noneToggle').checked = true;
// ここまで
 map.addControl(new OpenLayers.Control.LayerSwitcher());
 map.addControl(new OpenLayers.Control.MousePosition());
 map.zoomToMaxExtent();

} // End of "function init()"

// ここから追加
function toggleControl(element) {
 for(key in drawControls) {
  var control = drawControls[key];
  if(element.value == key && element.checked) {
control.activate();
  } else {
  control.deactivate();
  }
 }
}

function allowPan(element) {
 var stop = !element.checked;
 for(var key in drawControls) {
  drawControls[key].handler.stopDown = stop;
  drawControls[key].handler.stopUp = stop;
 }
}
// ここまで
</script>
</head>
<body onload="init()">
---
<!-- ここから追加 -->
 <ul id="controlToggle">
  <li>
   <input type="radio" name="type" value="none" id="noneToggle"
     onclick="toggleControl(this);" checked="checked" />
   <label for="noneToggle">navigate</label>
  </li>
  <li>
   <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
   <label for="polygonToggle">draw polygon</label>
  </li>
 </ul>
<!-- ここまで -->
</body>
</html>