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