Add a control that acts as a split agent. The control can be configured to listen for edits on any source layer or can create a temporary sketch layer for creating a split source. Source features will be used to split targets on a target layer. The deferDelete option tells the control to modify feature state instead of destroying split features (for use with a save strategy and a protocol that persists changes). r=ahocevar (closes #1972)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@8998 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
288
examples/wfs-snap-split.html
Normal file
288
examples/wfs-snap-split.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<style>
|
||||
.customEditingToolbar {
|
||||
float: right;
|
||||
right: 0px;
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
.customEditingToolbar div {
|
||||
float: right;
|
||||
margin: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.olControlNavigationItemActive {
|
||||
background-image: url("../theme/default/img/editing_tool_bar.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: -103px -23px;
|
||||
}
|
||||
.olControlNavigationItemInactive {
|
||||
background-image: url("../theme/default/img/editing_tool_bar.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: -103px -0px;
|
||||
}
|
||||
.olControlDrawFeaturePointItemInactive {
|
||||
background-image: url("../theme/default/img/editing_tool_bar.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: -77px 0px;
|
||||
}
|
||||
.olControlDrawFeaturePointItemActive {
|
||||
background-image: url("../theme/default/img/editing_tool_bar.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: -77px -23px ;
|
||||
}
|
||||
.olControlModifyFeatureItemActive {
|
||||
background-image: url(../theme/default/img/move_feature_on.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 1px;
|
||||
}
|
||||
.olControlModifyFeatureItemInactive {
|
||||
background-image: url(../theme/default/img/move_feature_off.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 1px;
|
||||
}
|
||||
.olControlDeleteFeatureItemActive {
|
||||
background-image: url(../theme/default/img/remove_point_on.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 1px;
|
||||
}
|
||||
.olControlDeleteFeatureItemInactive {
|
||||
background-image: url(../theme/default/img/remove_point_off.png);
|
||||
background-repeat: no-repeat;
|
||||
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= "/cgi-bin/proxy.cgi?url=";
|
||||
map = new OpenLayers.Map('map', {
|
||||
maxResolution: 156543.03390625,
|
||||
restrictedExtent: new OpenLayers.Bounds(
|
||||
-11560239, 5541115, -11560239, 5542338
|
||||
),
|
||||
maxExtent: new OpenLayers.Bounds(
|
||||
-2.003750834E7,-2.003750834E7,
|
||||
2.003750834E7,2.003750834E7
|
||||
),
|
||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||
controls: [
|
||||
new OpenLayers.Control.PanZoom()
|
||||
]
|
||||
});
|
||||
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"Base Layer", "http://demo.opengeo.org/geoserver_openstreetmap/gwc/service/wms",
|
||||
{
|
||||
layers: 'openstreetmap',
|
||||
format: 'image/png'
|
||||
}
|
||||
);
|
||||
var styles = new OpenLayers.StyleMap({
|
||||
"default": new OpenLayers.Style(null, {
|
||||
rules: [
|
||||
new OpenLayers.Rule({
|
||||
symbolizer: {
|
||||
"Point": {
|
||||
pointRadius: 5,
|
||||
graphicName: "square",
|
||||
fillColor: "white",
|
||||
fillOpacity: 0.25,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
strokeColor: "#333333"
|
||||
},
|
||||
"Line": {
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 1,
|
||||
strokeColor: "#666666"
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
}),
|
||||
"select": new OpenLayers.Style({
|
||||
strokeColor: "#00ccff",
|
||||
strokeWidth: 4
|
||||
}),
|
||||
"temporary": new OpenLayers.Style(null, {
|
||||
rules: [
|
||||
new OpenLayers.Rule({
|
||||
symbolizer: {
|
||||
"Point": {
|
||||
pointRadius: 5,
|
||||
graphicName: "square",
|
||||
fillColor: "white",
|
||||
fillOpacity: 0.25,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
strokeColor: "#333333"
|
||||
},
|
||||
"Line": {
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 1,
|
||||
strokeColor: "#00ccff"
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
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"),
|
||||
styleMap: styles,
|
||||
protocol: new OpenLayers.Protocol.WFS({
|
||||
version: "1.1.0",
|
||||
srsName: "EPSG:4326",
|
||||
url: "http://demo.opengeo.org/geoserver/wfs",
|
||||
featureNS : "http://opengeo.org",
|
||||
featureType: "roads",
|
||||
geometryName: "the_geom",
|
||||
schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:roads"
|
||||
})
|
||||
});
|
||||
|
||||
map.addLayers([wms, wfs]);
|
||||
|
||||
// configure the snapping agent
|
||||
var snap = new OpenLayers.Control.Snapping({layer: wfs});
|
||||
map.addControl(snap);
|
||||
snap.activate();
|
||||
|
||||
// configure split agent
|
||||
var split = new OpenLayers.Control.Split({
|
||||
layer: wfs,
|
||||
source: wfs,
|
||||
tolerance: 0.0001,
|
||||
deferDelete: true,
|
||||
eventListeners: {
|
||||
aftersplit: function(event) {
|
||||
var msg = "Split resulted in " + event.features.length + " features.";
|
||||
flashFeatures(event.features);
|
||||
}
|
||||
}
|
||||
});
|
||||
map.addControl(split);
|
||||
split.activate();
|
||||
|
||||
// add some editing tools to a panel
|
||||
var panel = new OpenLayers.Control.Panel(
|
||||
{displayClass: 'customEditingToolbar'}
|
||||
);
|
||||
var draw = new OpenLayers.Control.DrawFeature(
|
||||
wfs, OpenLayers.Handler.Path,
|
||||
{
|
||||
title: "Draw Feature",
|
||||
displayClass: "olControlDrawFeaturePoint",
|
||||
handlerOptions: {multi: true}
|
||||
}
|
||||
);
|
||||
modify = new OpenLayers.Control.ModifyFeature(
|
||||
wfs, {displayClass: "olControlModifyFeature"}
|
||||
);
|
||||
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
|
||||
|
||||
var save = new OpenLayers.Control.Button({
|
||||
title: "Save Changes",
|
||||
trigger: function() {
|
||||
if(modify.feature) {
|
||||
modify.selectControl.unselectAll();
|
||||
}
|
||||
saveStrategy.save();
|
||||
},
|
||||
displayClass: "olControlSaveFeatures"
|
||||
});
|
||||
|
||||
|
||||
|
||||
panel.addControls([
|
||||
new OpenLayers.Control.Navigation(),
|
||||
save, del, modify, draw
|
||||
]);
|
||||
|
||||
panel.defaultControl = panel.controls[0];
|
||||
map.addControl(panel);
|
||||
map.zoomTo(15);
|
||||
}
|
||||
|
||||
function flashFeatures(features, index) {
|
||||
if(!index) {
|
||||
index = 0;
|
||||
}
|
||||
var current = features[index];
|
||||
if(current && current.layer === wfs) {
|
||||
wfs.drawFeature(features[index], "select");
|
||||
}
|
||||
var prev = features[index-1];
|
||||
if(prev && prev.layer === wfs) {
|
||||
wfs.drawFeature(prev, "default");
|
||||
}
|
||||
++index;
|
||||
if(index <= features.length) {
|
||||
window.setTimeout(function() {flashFeatures(features, index)}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
|
||||
<h1 id="title">Snap/Split and Persist via WFS</h1>
|
||||
|
||||
<div id="tags">
|
||||
</div>
|
||||
<p id="shortdesc">
|
||||
Shows snapping, splitting, and 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>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user