Going with one WFS-T example.
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9864 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
@@ -58,140 +58,32 @@
|
||||
background-position: 0px 1px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var map, wfs;
|
||||
|
||||
var 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 {
|
||||
feature.state = OpenLayers.State.DELETE;
|
||||
this.layer.events.triggerEvent("afterfeaturemodified",
|
||||
{feature: feature});
|
||||
feature.renderIntent = "select";
|
||||
this.layer.drawFeature(feature);
|
||||
}
|
||||
},
|
||||
setMap: function(map) {
|
||||
this.handler.setMap(map);
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
|
||||
});
|
||||
|
||||
function init() {
|
||||
OpenLayers.ProxyHost= "proxy.cgi?url=";
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-11593508, 5509847, -11505759, 5557774
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.PanZoom()
|
||||
]
|
||||
});
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: G_PHYSICAL_MAP, sphericalMercator: true}
|
||||
);
|
||||
|
||||
var saveStrategy = new OpenLayers.Strategy.Save();
|
||||
|
||||
wfs = new OpenLayers.Layer.Vector("Editable Features", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:4326",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureNS : "http://opengeo.org",
|
||||
featureType: "restricted",
|
||||
geometryName: "the_geom",
|
||||
schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([gphy, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel(
|
||||
{'displayClass': 'customEditingToolbar'}
|
||||
);
|
||||
|
||||
var navigate = new OpenLayers.Control.Navigation({
|
||||
title: "Pan Map"
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Polygon,
|
||||
{
|
||||
title: "Draw Feature",
|
||||
displayClass: "olControlDrawFeaturePolygon",
|
||||
handlerOptions: {multi: true}
|
||||
}
|
||||
);
|
||||
|
||||
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
|
||||
title: "Modify Feature",
|
||||
displayClass: "olControlModifyFeature"
|
||||
});
|
||||
|
||||
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
title: "Save Changes",
|
||||
trigger: function() {
|
||||
if(edit.feature) {
|
||||
edit.selectControl.unselectAll();
|
||||
}
|
||||
saveStrategy.save();
|
||||
},
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([navigate, save, del, edit, draw]);
|
||||
panel.defaultControl = navigate;
|
||||
map.addControl(panel);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="wfs-protocol-transactions.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS Transactions (WFS-T).
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>The WFS protocol allows for creation of new features and reading,
|
||||
updating, or deleting of existing features.</p>
|
||||
<p>Use the tools to create, modify, and delete (in order from left
|
||||
to right) features. Use the save tool (picture of a disk) to
|
||||
save your changes. Use the navigation tool (hand) to stop editing
|
||||
and use the mouse for map navigation.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
<div id="tags"></div>
|
||||
<p id="shortdesc">
|
||||
Shows the use of the WFS Transactions (WFS-T).
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
The WFS protocol allows for creation of new features and
|
||||
reading, updating, or deleting of existing features.
|
||||
</p>
|
||||
<p>
|
||||
Use the tools to create, modify, and delete (in order from left
|
||||
to right) features. Use the save tool (picture of a disk) to
|
||||
save your changes. Use the navigation tool (hand) to stop
|
||||
editing and use the mouse for map navigation.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="wfs-protocol-transactions.js" target="_blank">
|
||||
wfs-protocol-transactions.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
107
examples/wfs-protocol-transactions.js
Normal file
107
examples/wfs-protocol-transactions.js
Normal file
@@ -0,0 +1,107 @@
|
||||
var map, wfs;
|
||||
OpenLayers.ProxyHost = "/proxy/?url=";
|
||||
|
||||
var 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 {
|
||||
feature.state = OpenLayers.State.DELETE;
|
||||
this.layer.events.triggerEvent("afterfeaturemodified",
|
||||
{feature: feature});
|
||||
feature.renderIntent = "select";
|
||||
this.layer.drawFeature(feature);
|
||||
}
|
||||
},
|
||||
setMap: function(map) {
|
||||
this.handler.setMap(map);
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
|
||||
});
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map', {
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-11593508, 5509847, -11505759, 5557774
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.PanZoom()
|
||||
]
|
||||
});
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: G_PHYSICAL_MAP, sphericalMercator: true}
|
||||
);
|
||||
|
||||
var saveStrategy = new OpenLayers.Strategy.Save();
|
||||
|
||||
wfs = new OpenLayers.Layer.Vector("Editable Features", {
|
||||
strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
|
||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:4326",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureNS : "http://opengeo.org",
|
||||
featureType: "restricted",
|
||||
geometryName: "the_geom",
|
||||
schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([gphy, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel(
|
||||
{'displayClass': 'customEditingToolbar'}
|
||||
);
|
||||
|
||||
var navigate = new OpenLayers.Control.Navigation({
|
||||
title: "Pan Map"
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Polygon,
|
||||
{
|
||||
title: "Draw Feature",
|
||||
displayClass: "olControlDrawFeaturePolygon",
|
||||
handlerOptions: {multi: true}
|
||||
}
|
||||
);
|
||||
|
||||
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
|
||||
title: "Modify Feature",
|
||||
displayClass: "olControlModifyFeature"
|
||||
});
|
||||
|
||||
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
title: "Save Changes",
|
||||
trigger: function() {
|
||||
if(edit.feature) {
|
||||
edit.selectControl.unselectAll();
|
||||
}
|
||||
saveStrategy.save();
|
||||
},
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([navigate, save, del, edit, draw]);
|
||||
panel.defaultControl = navigate;
|
||||
map.addControl(panel);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers: WFS-T</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, wfs;
|
||||
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"State",
|
||||
"http://sigma.openplans.org/geoserver/wms",
|
||||
{layers: 'topp:tasmania_state_boundaries'}
|
||||
);
|
||||
|
||||
//
|
||||
// Word to the Wise from an anonymous OpenLayers hacker:
|
||||
//
|
||||
// The typename in the options list when adding/loading a wfs
|
||||
// layer not should contain the namespace before, (as in the
|
||||
// first typename parameter to the wfs consctructor).
|
||||
//
|
||||
// Specifically, in the first parameter you write typename:
|
||||
// 'topp:myLayerName', and in the following option list
|
||||
// typeName: 'myLayerName'.
|
||||
//
|
||||
// If you have topp included in the second one you will get
|
||||
// namespace 14 errors when trying to insert features.
|
||||
//
|
||||
wfs = new OpenLayers.Layer.WFS(
|
||||
"Cities",
|
||||
"http://sigma.openplans.org/geoserver/wfs",
|
||||
{typename: 'topp:tasmania_cities'},
|
||||
{
|
||||
typename: "tasmania_cities",
|
||||
featureNS: "http://www.openplans.org/topp",
|
||||
extractAttributes: false,
|
||||
commitReport: function(str) {
|
||||
OpenLayers.Console.log(str);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
map.addLayers([wms, wfs]);
|
||||
|
||||
var panel = new OpenLayers.Control.Panel({
|
||||
displayClass: "olControlEditingToolbar"
|
||||
});
|
||||
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Point,
|
||||
{
|
||||
handlerOptions: {freehand: false, multi: true},
|
||||
displayClass: "olControlDrawFeaturePoint"
|
||||
}
|
||||
);
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
trigger: OpenLayers.Function.bind(wfs.commit, wfs),
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
panel.addControls([
|
||||
new OpenLayers.Control.Navigation(),
|
||||
save, draw
|
||||
]);
|
||||
|
||||
map.addControl(panel);
|
||||
|
||||
map.zoomToExtent(new OpenLayers.Bounds(140.64,-44.42,151.89,-38.80));
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
|
||||
<h1 id="title">WFS Transaction Example</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows the use the WFS layer for transactions.
|
||||
</p>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<p id="docs">
|
||||
This is an example of using a WFS layer type. Note that it requires a
|
||||
working GeoServer install, which the OpenLayers project does not maintain;
|
||||
however, if you're interested, you should be able to point this against
|
||||
a default GeoServer setup without too much trouble.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user