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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
<title>Split Feature Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, vectors, split;
function init(){
map = new OpenLayers.Map('map');
// give the features some style
var styles = new OpenLayers.StyleMap({
"default": {
strokeWidth: 2
},
"select": {
strokeColor: "#0099cc",
strokeWidth: 4
}
});
// add rules from the above lookup table
styles.addUniqueValueRules("default", "RP_TYPE", {
10: {strokeColor: "#000000", strokeWidth: 2},
12: {strokeColor: "#222222", strokeWidth: 2},
14: {strokeColor: "#444444", strokeWidth: 2},
16: {strokeColor: "#666666", strokeWidth: 2},
18: {strokeColor: "#888888", strokeWidth: 2},
19: {strokeColor: "#666666", strokeWidth: 1}
});
vectors = new OpenLayers.Layer.Vector("Lines", {
isBaseLayer: true,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "data/roads.json",
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: styles,
maxExtent: new OpenLayers.Bounds(
1549471.9221, 6403610.94, 1550001.32545, 6404015.8
)
});
map.addLayer(vectors);
map.addControl(new OpenLayers.Control.MousePosition());
var split = new OpenLayers.Control.Split({
layer: vectors,
eventListeners: {
aftersplit: function(event) {
flashFeatures(event.features);
}
}
});
map.addControl(split);
map.zoomToMaxExtent();
split.activate();
}
function flashFeatures(features, index) {
if(!index) {
index = 0;
}
var current = features[index];
if(current && current.layer === vectors) {
vectors.drawFeature(features[index], "select");
}
var prev = features[index-1];
if(prev && prev.layer === vectors) {
vectors.drawFeature(prev, "default");
}
++index;
if(index <= features.length) {
window.setTimeout(function() {flashFeatures(features, index)}, 100);
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Split Feature Example</h1>
<div id="tags">
vector, feature, splitting, split, stylemap
</div>
<p id="shortdesc">
Demonstrates splitting of line features.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The split control can be configured to listen for edits on any vector layer
or it can allow for creation of temporary sketch features. Modified or
newly drawn features will be used to split existing features on any target
layer. This example shows the split control configured to use temporary
sketches for the split.</p>
</div>
</body>
</html>
|
