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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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" /> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, vectors, split; OpenLayers.Util.onImageLoadErrorColor = "transparent"; 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); split.activate(); map.zoomToMaxExtent(); } 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> <p id="shortdesc"> Demonstrates splitting of line features. </p> <div id="map" class="smallmap"></div> <div id="docs"> 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. </div> </body> </html> |