d45edfb2c0
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11969 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
292 lines
11 KiB
HTML
292 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<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="../theme/default/style.css" type="text/css" />
|
|
<link rel="stylesheet" href="style.css" type="text/css" />
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<!--[if lte IE 6]>
|
|
<style>
|
|
.customEditingToolbar {
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
<![endif]-->
|
|
<style>
|
|
.customEditingToolbar {
|
|
float: right;
|
|
right: 0px;
|
|
height: 30px;
|
|
}
|
|
.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 = "proxy.cgi?url=";
|
|
map = new OpenLayers.Map({
|
|
div: "map",
|
|
maxResolution: 156543.0339,
|
|
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
|
|
restrictedExtent: new OpenLayers.Bounds(
|
|
-11563906, 5540550, -11559015, 5542996
|
|
),
|
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
|
units: "m",
|
|
controls: [
|
|
new OpenLayers.Control.PanZoom(),
|
|
new OpenLayers.Control.Navigation()
|
|
]
|
|
});
|
|
|
|
var osm = new OpenLayers.Layer.OSM();
|
|
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([osm, 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',
|
|
allowDepress: true
|
|
});
|
|
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([
|
|
save, del, modify, draw
|
|
]);
|
|
|
|
map.addControl(panel);
|
|
map.setCenter(new OpenLayers.LonLat(-11561460.5, 5541773), 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">
|
|
snapping, splitting, wfs, wfst, wfs-t, advanced
|
|
</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.</p>
|
|
<p>To deactivate "drawing" or "modifying" depress the corresponding
|
|
button.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|