openlayers/examples/measure.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   4     <link rel="stylesheet" href="style.css" type="text/css" />
   5     <style type="text/css">
   6         #controlToggle li {
   7             list-style: none;
   8         }
   9         p {
  10             width: 512px;
  11         }
  12         #options {
  13             position: relative;
  14             width: 512px;
  15         }
  16         #output {
  17             float: right;
  18         }
  19     </style>
  20     <script src="../lib/OpenLayers.js"></script>
  21     <script type="text/javascript">
  22         var map, measureControls;
  23         OpenLayers.Util.onImageLoadErrorColor = "transparent";
  24         function init(){
  25             map = new OpenLayers.Map('map');
  26
  27             var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  28                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  29
  30             map.addLayers([wmsLayer]);
  31             map.addControl(new OpenLayers.Control.LayerSwitcher());
  32             map.addControl(new OpenLayers.Control.MousePosition());
  33
  34             // style the sketch fancy
  35             var sketchSymbolizers = {
  36                 "Point": {
  37                     pointRadius: 4,
  38                     graphicName: "square",
  39                     fillColor: "white",
  40                     fillOpacity: 1,
  41                     strokeWidth: 1,
  42                     strokeOpacity: 1,
  43                     strokeColor: "#333333"
  44                 },
  45                 "Line": {
  46                     strokeWidth: 3,
  47                     strokeOpacity: 1,
  48                     strokeColor: "#666666",
  49                     strokeDashstyle: "dash"
  50                 },
  51                 "Polygon": {
  52                     strokeWidth: 2,
  53                     strokeOpacity: 1,
  54                     strokeColor: "#666666",
  55                     fillColor: "white",
  56                     fillOpacity: 0.3
  57                 }
  58             };
  59             var style = new OpenLayers.Style();
  60             style.addRules([
  61                 new OpenLayers.Rule({symbolizer: sketchSymbolizers})
  62             ]);
  63             var styleMap = new OpenLayers.StyleMap({"default": style});
  64
  65             measureControls = {
  66                 line: new OpenLayers.Control.Measure(
  67                     OpenLayers.Handler.Path, {
  68                         persist: true,
  69                         handlerOptions: {
  70                             layerOptions: {styleMap: styleMap}
  71                         }
  72                     }
  73                 ),
  74                 polygon: new OpenLayers.Control.Measure(
  75                     OpenLayers.Handler.Polygon, {
  76                         persist: true,
  77                         handlerOptions: {
  78                             layerOptions: {styleMap: styleMap}
  79                         }
  80                     }
  81                 )
  82             };
  83
  84             var control;
  85             for(var key in measureControls) {
  86                 control = measureControls[key];
  87                 control.events.on({
  88                     "measure": handleMeasurements,
  89                     "measurepartial": handleMeasurements
  90                 });
  91                 map.addControl(control);
  92             }
  93
  94             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  95
  96             document.getElementById('noneToggle').checked = true;
  97         }
  98
  99         function handleMeasurements(event) {
 100             var geometry = event.geometry;
 101             var units = event.units;
 102             var order = event.order;
 103             var measure = event.measure;
 104             var element = document.getElementById('output');
 105             var out = "";
 106             if(order == 1) {
 107                 out += "measure: " + measure.toFixed(3) + " " + units;
 108             } else {
 109                 out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
 110             }
 111             element.innerHTML = out;
 112         }
 113
 114         function toggleControl(element) {
 115             for(key in measureControls) {
 116                 var control = measureControls[key];
 117                 if(element.value == key && element.checked) {
 118                     control.activate();
 119                 } else {
 120                     control.deactivate();
 121                 }
 122             }
 123         }
 124
 125         function toggleGeodesic(element) {
 126             for(key in measureControls) {
 127                 var control = measureControls[key];
 128                 control.geodesic = element.checked;
 129             }
 130         }
 131     </script>
 132   </head>
 133   <body onload="init()">
 134     <h1 id="title">OpenLayers Measure Example</h1>
 135     <p id="shortdesc">
 136         Demonstrates the measure control to measure distances and areas.
 137     </p>
 138     <div id="map" class="smallmap"></div>
 139     <div id="options">
 140         <div id="output">
 141         </div>
 142         <ul id="controlToggle">
 143             <li>
 144                 <input type="radio" name="type" value="none" id="noneToggle"
 145                        onclick="toggleControl(this);" checked="checked" />
 146                 <label for="noneToggle">navigate</label>
 147             </li>
 148             <li>
 149                 <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
 150                 <label for="lineToggle">measure distance</label>
 151             </li>
 152             <li>
 153                 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
 154                 <label for="polygonToggle">measure area</label>
 155             </li>
 156             <li>
 157                 <input type="checkbox" name="geodesic" id="geodesicToggle" onclick="toggleGeodesic(this);" />
 158                 <label for="geodesicToggle">use geodesic measures</label>
 159             </li>
 160         </ul>
 161         <p>Note that the geometries drawn are planar geometries and the
 162         metrics returned by the measure control are planar measures by
 163         default.  If your map is in a geographic projection or you have the
 164         appropriate projection definitions to transform your geometries into
 165         geographic coordinates, you can set the "geodesic" property of the control
 166         to true to calculate geodesic measures instead of planar measures.</p>
 167     </div>
 168   </body>
 169 </html>