1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
var points = new OpenLayers.Layer.PointGrid({
name: "Snap Grid",
dx: 600, dy: 600,
styleMap: new OpenLayers.StyleMap({
pointRadius: 1,
strokeColor: "#3333ff",
strokeWidth: 1,
fillOpacity: 1,
fillColor: "#ffffff",
graphicName: "square"
})
});
var lines = new OpenLayers.Layer.Vector("Lines", {
styleMap: new OpenLayers.StyleMap({
pointRadius: 3,
strokeColor: "#ff3300",
strokeWidth: 3,
fillOpacity: 0
})
});
var map = new OpenLayers.Map({
div: "map",
layers: [new OpenLayers.Layer.OSM(), points, lines],
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()
],
restrictedExtent: new OpenLayers.Bounds(
1035374, 7448940, 1074510, 7468508
),
center: new OpenLayers.LonLat(1054942, 7458724),
zoom: 13
});
// configure the snapping agent
var snap = new OpenLayers.Control.Snapping({
layer: lines,
targets: [{
layer: points,
tolerance: 15
}]
});
snap.activate();
// add some editing tools to a panel
var panel = new OpenLayers.Control.Panel({
displayClass: "olControlEditingToolbar"
});
var draw = new OpenLayers.Control.DrawFeature(
lines, OpenLayers.Handler.Path,
{displayClass: "olControlDrawFeaturePath", title: "Draw Features"}
);
modify = new OpenLayers.Control.ModifyFeature(
lines, {displayClass: "olControlModifyFeature", title: "Modify Features"}
);
panel.addControls([
new OpenLayers.Control.Navigation({title: "Navigate"}),
modify, draw
]);
map.addControl(panel);
var rotation = document.getElementById("rotation");
rotation.value = String(points.rotation);
rotation.onchange = function() {
points.setRotation(Number(rotation.value));
};
var spacing = document.getElementById("spacing");
spacing.value = String(points.dx);
spacing.onchange = function() {
points.setSpacing(Number(spacing.value));
};
var max = document.getElementById("max");
max.value = String(points.maxFeatures);
max.onchange = function() {
points.setMaxFeatures(Number(max.value));
};
|