]> dev.renevier.net Git - syp.git/blob - openlayers/examples/split-feature.html
when selecting a cluster, zoom until features are detached
[syp.git] / openlayers / examples / split-feature.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>Split Feature Example</title>
4         
5         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
6         <link rel="stylesheet" href="style.css" type="text/css" />
7         <script src="../lib/OpenLayers.js"></script>
8         <script type="text/javascript">
9             var map, vectors, split;
10             OpenLayers.Util.onImageLoadErrorColor = "transparent";
11             function init(){
12                 map = new OpenLayers.Map('map');
13
14                 // give the features some style
15                 var styles = new OpenLayers.StyleMap({
16                     "default": {
17                         strokeWidth: 2
18                     },
19                     "select": {
20                         strokeColor: "#0099cc",
21                         strokeWidth: 4
22                     }
23                 });
24             
25                 // add rules from the above lookup table
26                 styles.addUniqueValueRules("default", "RP_TYPE", {
27                     10: {strokeColor: "#000000", strokeWidth: 2},
28                     12: {strokeColor: "#222222", strokeWidth: 2},
29                     14: {strokeColor: "#444444", strokeWidth: 2},
30                     16: {strokeColor: "#666666", strokeWidth: 2},
31                     18: {strokeColor: "#888888", strokeWidth: 2},
32                     19: {strokeColor: "#666666", strokeWidth: 1}
33                 });
34
35                 vectors = new OpenLayers.Layer.Vector("Lines", {
36                     isBaseLayer: true,
37                     strategies: [new OpenLayers.Strategy.Fixed()],                
38                     protocol: new OpenLayers.Protocol.HTTP({
39                         url: "data/roads.json",
40                         format: new OpenLayers.Format.GeoJSON()
41                     }),
42                     styleMap: styles,
43                     maxExtent: new OpenLayers.Bounds(
44                         1549471.9221, 6403610.94, 1550001.32545, 6404015.8
45                     )
46                 });
47             
48
49
50
51                 map.addLayer(vectors);
52
53                 map.addControl(new OpenLayers.Control.MousePosition());
54
55                 var split = new OpenLayers.Control.Split({
56                     layer: vectors,
57                     eventListeners: {
58                         aftersplit: function(event) {
59                             flashFeatures(event.features);
60                         }
61                     }
62                 });
63                 map.addControl(split);
64                 split.activate();
65                 map.zoomToMaxExtent();
66
67             }
68             
69             function flashFeatures(features, index) {
70                 if(!index) {
71                     index = 0;
72                 }
73                 var current = features[index];
74                 if(current && current.layer === vectors) {
75                     vectors.drawFeature(features[index], "select");
76                 }
77                 var prev = features[index-1];
78                 if(prev && prev.layer === vectors) {
79                     vectors.drawFeature(prev, "default");
80                 }
81                 ++index;
82                 if(index <= features.length) {
83                     window.setTimeout(function() {flashFeatures(features, index)}, 100);
84                 }
85             }
86
87         </script>
88     </head>
89     <body onload="init()">
90         <h1 id="title">OpenLayers Split Feature Example</h1>
91         <p id="shortdesc">
92             Demonstrates splitting of line features.
93         </p>
94         <div id="map" class="smallmap"></div>    
95         <div id="docs">
96             The split control can be configured to listen for edits on any vector layer
97             or it can allow for creation of temporary sketch features.  Modified or
98             newly drawn features will be used to split existing features on any target
99             layer.  This example shows the split control configured to use temporary
100             sketches for the split.
101         </div>
102     </body>
103 </html>