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」にチェックがついていることを確認して、複数のフィチャーをドラッグして選択します。
（最初の選択ではフィーチャが１つしか選択されませんでした。原因はわかりませんでした。１度選択を外して、もう一度選択します。）

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