35 - WFS-T（WFS Transaction） 4 - Point, Line, Polygon レイヤを設定

35-4 Point, Line, Polygon レイヤを設定
point と line、polygon は、別々のレイヤにして保存します。
GeoServer に新しいレイヤを作成します。レイヤは次のようにします。
（akiruno_polygon はすでに設定してあります。）

Layer(Type) Name  Default Style(WMS Setting)  attribute
akiruno_point     point                       Multi point
akiruno_line      line                        Multi lin
akiruno_polygon   polygon                     Multi polygon

次の設定は各レイヤ共通です。

Workspace  Store  Enabled?  Declare SRS
npn        bmi    cheked    EPSG:2451

Min X:  Min Y:  Max X:  Max Y: 
-63100  -34500  -45400  -24200

レイヤが複数になるとコントロール機能（drag や modify など）がうまく機能できませんでした。
drag, modyfy, delete コントロールのボタンを各レイヤ用に設定します。
「ol016-nippon_bmi_akiruno_pgis.html」 ファイルを続けて使います。
OpenLayers の Development Examples の「OpenLayers EditingToolbar Outside Viewport（http://openlayers.org/dev/examples/editingtoolbar-outside.html）」を参考にします。

akiruno_line と akiruno_poygon のレイヤを設定します。

---

var map, layer0, layer1, layer2, layer3, layer4, akirunoPoint, akirunoLine, akirunoPolygon, vectors;
// akirunoPoint, akirunoLine, akirunoPolygon 追加
var j, saveStrategy =[]; // 追加

---

// var saveStrategy = new OpenLayers.Strategy.Save(); // 削除
// ここから追加
 for(j = 0; j < 3; j++) {
  saveStrategy[j] = new OpenLayers.Strategy.Save();
 };
// ここまで

 akirunoPoint = new OpenLayers.Layer.Vector("Akiruno Point", {
  strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[0]],
  projection: new OpenLayers.Projection("EPSG:2451"),
protocol: new OpenLayers.Protocol.WFS({
   version: "1.1.0",
   srsName: "EPSG:2451",
   url: "http://192.168.1.200:8080/geoserver/wfs",
   featureNS :  "http://www.myhome.net/npn",
   featureType: "akiruno_point",
   geometryName: "the_geom",
   schema: "http://192.168.1.200:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:akiruno_point"
  })
 });

 akirunoLine = new OpenLayers.Layer.Vector("Akiruno Line", {
  strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[1]],
  projection: new OpenLayers.Projection("EPSG:2451"),
  protocol: new OpenLayers.Protocol.WFS({
   version: "1.1.0",
   srsName: "EPSG:2451",
   url: "http://192.168.1.200:8080/geoserver/wfs",
   featureNS :  "http://www.myhome.net/npn",
   featureType: "akiruno_line",
   geometryName: "the_geom",
   schema: "http://192.168.1.200:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:akiruno_line"
  })
 });

 akirunoPolygon = new OpenLayers.Layer.Vector("Akiruno Polygon", {
  strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy[2]],
  projection: new OpenLayers.Projection("EPSG:2451"),
  protocol: new OpenLayers.Protocol.WFS({
   version: "1.1.0",
   srsName: "EPSG:2451",
   url: "http://192.168.1.200:8080/geoserver/wfs",
   featureNS :  "http://www.myhome.net/npn",
   featureType: "akiruno_polygon",
   geometryName: "the_geom",
   schema: "http://192.168.1.200:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=npn:akiruno_polygon"
  })
 });
// ここまで

 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.LayerSwitcher(),
   new OpenLayers.Control.MousePosition()
  ]
 });

 map.addLayers([layer0, layer3, layer1, layer2, layer4, akirunoPoint, akirunoLine, akirunoPolygon]);
 // "vectors" を削除　"akiruno_point, akiruno_line, akiruno_polygon" を追加

 var container = document.getElementById("panel");
 // 追加　編集ボタンを地図の外に配置するため
 var panel = new OpenLayers.Control.Panel({ //追加
  displayClass: 'customEditingToolbar',
  allowDepress: true,
  div: container // 追加
 });

 vectors = [akirunoPoint, akirunoLine, akirunoPolygon]; //追加

 panelControl = [
  new OpenLayers.Control.Navigation(
  {
   title: "Navigation"
  }),

 new OpenLayers.Control.DrawFeature(
  vectors[0],
  OpenLayers.Handler.Point,
  {
   title: "Draw Point",
   displayClass: 'olControlDrawFeaturePoint',
   multi: true
 }),
 new OpenLayers.Control.DragFeature(
  vectors[0],
  {
   title: "Drag Feature",
   displayClass: 'olControlDragFeature'
 }),
 new DeleteFeature(
  vectors[0],
  {
   title: "Remove Feature",
   displayClass: "olControlDeleteFeature"
 }),

 new OpenLayers.Control.DrawFeature(
  vectors[1],
  OpenLayers.Handler.Path,
  {
   title: "Draw Line",
   displayClass: 'olControlDrawFeaturePath',
   multi: true
 }),
 new OpenLayers.Control.DragFeature(
  vectors[1],
  {
   title: "Drag Feature",
   displayClass: 'olControlDragFeature'
 }),
 new OpenLayers.Control.ModifyFeature(
  vectors[1],
  {
   title: "Modify Feature",
   displayClass: "olControlModifyFeature"
 }),
 new DeleteFeature(
  vectors[1],
  {
   title: "Remove Feature",
   displayClass: "olControlDeleteFeature"
 }),

 new OpenLayers.Control.DrawFeature(
  vectors[2],
  OpenLayers.Handler.Polygon,
  {
   title: "Draw Polygon",
   displayClass: 'olControlDrawFeaturePolygon',
   multi: true
 }),
 new OpenLayers.Control.DragFeature(
  vectors[2],
  {
   title: "Drag Feature",
   displayClass: 'olControlDragFeature'
 }),
 new OpenLayers.Control.ModifyFeature(
  vectors[2],
  {
   title: "Modify Feature",
   displayClass: "olControlModifyFeature"
 }),
 new DeleteFeature(
  vectors[2],
  {
   title: "Remove Feature",
   displayClass: "olControlDeleteFeature"
 }),

 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,
   title: "Select Feature",
   displayClass: 'olControlSelectFeature'
 }),

 new OpenLayers.Control.Button({
  title: "Save Changes",
  trigger: function() {
   for(j = 0; j < 3; j++) {
    window.alert(j);
    saveStrategy[j].save();
   };
  },
  displayClass: "olControlSaveFeatures"
 })
]; 
// ここまで

panel.addControls(panelControl);
map.addControl(panel);

map.zoomToMaxExtent();
}

---

EditingToolbar を次の図のように、各レイヤごとにボタンを設定しました。

「background: -webkit-linear-gradient」は、対応していないブラウザがあります。

スタイルシートを次のように設定します。

<!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: left;
    right: 0px;
    height: 30px;
    background: -webkit-linear-gradient(left, #ffffff 0px, #ffffff 35px, #ccffcc 35px, #ccffcc 138px, #ffcccc 138px, #ffcccc 275px, #ccccff 275px, #ccccff 409px, #ffffff 409px, #ffffff);
   }

   .customEditingToolbar div {
    float: left;
    margin: 5px;
    width: 24px;
    height: 24px;
   }
   .pointpanel
   {
    position: absolute;
    left: 53px;
    background-color: #ccffcc;
    width: 104px;
   }
   .linepanel
   {
    position: absolute;
    left: 157px;
    background-color: #ffcccc;
    width: 137px;
   }
   .polygonpanel
   {
    position: absolute;
    left: 294px;
    background-color: #ccccff;
    width: 134px;
   }

---

 <body onload="init()">
  <h1 id="title">WMS Example BMI Akiruno PGIS2</h1>

  <div id="tags">
   wms, layer, singletile
  </div>
  <p id="shortdesc">
   Shows the basic use of openlayers using a WMS layer
  </p>
  <div class="pointpanel">point</div><div class="linepanel">line</div><div class="polygonpanel">polygon</div><br />
  <div id="panel" class="customEditingToolbar"> </div>
  <br /><br />
  <div id="map" class="smallmap"> </div>
  <div id="docs">
   <p>This is an example of how to add an WMS layer to the OpenLayers
      window. The images are tiled in this instance. If you wanted to not use
      a tiled WMS, "singleTile" option to true like shown in this example.</p>
  </div>
 </body>
</html>

参考 HTML ファイル 

ol016-nippon_bmi_akiruno_pgis.html