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>