wfs-t.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link rel="stylesheet" href="/geoserver/style.css" type="text/css" />
  5. <style type="text/css">
  6. body {
  7. margin: 1em;
  8. }
  9. #map {
  10. width: 800px;
  11. height: 475px;
  12. border: 1px solid black;
  13. }
  14. </style>
  15. <script src="openlayers/OpenLayers.js"></script>
  16. <script type="text/javascript">
  17. OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
  18. var map;
  19. function init(){
  20. map = new OpenLayers.Map('map');
  21. var political = new OpenLayers.Layer.WMS(
  22. "State",
  23. "/geoserver/wms",
  24. {layers: 'topp:tasmania_state_boundaries',
  25. format: 'image/png'}
  26. );
  27. var water = new OpenLayers.Layer.WMS(
  28. "Water",
  29. "/geoserver/wms",
  30. {
  31. layers: 'topp:tasmania_water_bodies',
  32. transparent: 'true',
  33. format: 'image/png'
  34. }
  35. );
  36. var roads = new OpenLayers.Layer.WFS(
  37. "Roads",
  38. "/geoserver/wfs",
  39. {typename: 'topp:tasmania_roads'},
  40. {
  41. typename: 'tasmania_roads',
  42. featureNS: 'http://www.openplans.org/topp',
  43. extractAttributes: false
  44. }
  45. );
  46. roads.style = OpenLayers.Util.applyDefaults({strokeColor: "#ff0000"},
  47. OpenLayers.Feature.Vector.style["default"]);
  48. var cities = new OpenLayers.Layer.WFS(
  49. "Cities",
  50. "/geoserver/wfs",
  51. {typename: 'topp:tasmania_cities'},
  52. {
  53. typename: 'tasmania_cities',
  54. featureNS: 'http://www.openplans.org/topp',
  55. extractAttributes: false
  56. }
  57. );
  58. cities.style = OpenLayers.Util.applyDefaults({strokeColor: "#0000ff"},
  59. OpenLayers.Feature.Vector.style["default"]);
  60. map.addLayers([political, water, roads, cities]);
  61. var panel = new OpenLayers.Control.Panel(
  62. {displayClass: 'olControlEditingToolbar'}
  63. );
  64. var drawLine = new OpenLayers.Control.DrawFeature(
  65. roads, OpenLayers.Handler.Path,
  66. {displayClass: 'olControlDrawFeaturePath'}
  67. );
  68. drawLine.featureAdded = function(feature) {
  69. feature.layer.eraseFeatures([feature]);
  70. // cast to multilinestring
  71. feature.geometry = new OpenLayers.Geometry.MultiLineString(
  72. feature.geometry
  73. );
  74. feature.style.strokeColor = "#ff0000";
  75. feature.state = OpenLayers.State.INSERT;
  76. feature.layer.drawFeature(feature);
  77. }
  78. var drawPoint = new OpenLayers.Control.DrawFeature(
  79. cities, OpenLayers.Handler.Point,
  80. {displayClass: 'olControlDrawFeaturePoint'}
  81. );
  82. drawPoint.featureAdded = function(feature) {
  83. feature.layer.eraseFeatures([feature]);
  84. // cast to multipoint
  85. feature.geometry = new OpenLayers.Geometry.MultiPoint(
  86. feature.geometry
  87. );
  88. feature.style.strokeColor = "#0000ff";
  89. feature.state = OpenLayers.State.INSERT;
  90. feature.layer.drawFeature(feature);
  91. }
  92. panel.addControls(
  93. [new OpenLayers.Control.Navigation(), drawLine, drawPoint]
  94. );
  95. map.addControl(panel);
  96. map.addControl(new OpenLayers.Control.LayerSwitcher());
  97. map.zoomToExtent(
  98. new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5)
  99. );
  100. }
  101. </script>
  102. </head>
  103. <body onload="init()">
  104. <h3>OpenLayers WFS-T demo: Tasmania cities and roads</h3>
  105. <a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br />
  106. <a href="#" onclick="map.layers[3].commit();return false">Save Cities</a>
  107. <div id="map"></div>
  108. </body>
  109. </html>