diff options
| author | Chris Schlaeger <chris@linux.com> | 2015-10-17 21:36:38 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2015-10-17 21:36:38 +0200 |
| commit | e30f267181d990947e67909de4809fa941698c85 (patch) | |
| tree | 46e9f94c2b3699ed378963b420b8a8d361286ea1 /misc/openlayers/examples/measure.html | |
| parent | e763ceb183f389fcd314a4a6a712d87c9d4cdb32 (diff) | |
| download | postrunner-e30f267181d990947e67909de4809fa941698c85.zip | |
Upgrading openlayers to 3.x
Diffstat (limited to 'misc/openlayers/examples/measure.html')
| -rw-r--r-- | misc/openlayers/examples/measure.html | 203 |
1 files changed, 0 insertions, 203 deletions
diff --git a/misc/openlayers/examples/measure.html b/misc/openlayers/examples/measure.html deleted file mode 100644 index 1cf61ad..0000000 --- a/misc/openlayers/examples/measure.html +++ /dev/null @@ -1,203 +0,0 @@ -<!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"> - <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> - <link rel="stylesheet" href="style.css" type="text/css"> - <style type="text/css"> - #controlToggle li { - list-style: none; - } - p { - width: 512px; - } - #options { - position: relative; - width: 512px; - } - #output { - float: right; - } - - /* avoid pink tiles */ - .olImageLoadError { - background-color: transparent !important; - } - </style> - <script src="../lib/OpenLayers.js"></script> - <script type="text/javascript"> - var map, measureControls; - function init(){ - map = new OpenLayers.Map('map'); - - var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", - "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); - - map.addLayers([wmsLayer]); - map.addControl(new OpenLayers.Control.LayerSwitcher()); - map.addControl(new OpenLayers.Control.MousePosition()); - - // style the sketch fancy - var sketchSymbolizers = { - "Point": { - pointRadius: 4, - graphicName: "square", - fillColor: "white", - fillOpacity: 1, - strokeWidth: 1, - strokeOpacity: 1, - strokeColor: "#333333" - }, - "Line": { - strokeWidth: 3, - strokeOpacity: 1, - strokeColor: "#666666", - strokeDashstyle: "dash" - }, - "Polygon": { - strokeWidth: 2, - strokeOpacity: 1, - strokeColor: "#666666", - fillColor: "white", - fillOpacity: 0.3 - } - }; - var style = new OpenLayers.Style(); - style.addRules([ - new OpenLayers.Rule({symbolizer: sketchSymbolizers}) - ]); - var styleMap = new OpenLayers.StyleMap({"default": style}); - - // allow testing of specific renderers via "?renderer=Canvas", etc - var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; - renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; - - measureControls = { - line: new OpenLayers.Control.Measure( - OpenLayers.Handler.Path, { - persist: true, - handlerOptions: { - layerOptions: { - renderers: renderer, - styleMap: styleMap - } - } - } - ), - polygon: new OpenLayers.Control.Measure( - OpenLayers.Handler.Polygon, { - persist: true, - handlerOptions: { - layerOptions: { - renderers: renderer, - styleMap: styleMap - } - } - } - ) - }; - - var control; - for(var key in measureControls) { - control = measureControls[key]; - control.events.on({ - "measure": handleMeasurements, - "measurepartial": handleMeasurements - }); - map.addControl(control); - } - - map.setCenter(new OpenLayers.LonLat(0, 0), 3); - - document.getElementById('noneToggle').checked = true; - } - - function handleMeasurements(event) { - var geometry = event.geometry; - var units = event.units; - var order = event.order; - var measure = event.measure; - var element = document.getElementById('output'); - var out = ""; - if(order == 1) { - out += "measure: " + measure.toFixed(3) + " " + units; - } else { - out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>"; - } - element.innerHTML = out; - } - - function toggleControl(element) { - for(key in measureControls) { - var control = measureControls[key]; - if(element.value == key && element.checked) { - control.activate(); - } else { - control.deactivate(); - } - } - } - - function toggleGeodesic(element) { - for(key in measureControls) { - var control = measureControls[key]; - control.geodesic = element.checked; - } - } - - function toggleImmediate(element) { - for(key in measureControls) { - var control = measureControls[key]; - control.setImmediate(element.checked); - } - } - </script> - </head> - <body onload="init()"> - <h1 id="title">OpenLayers Measure Example</h1> - <div id="tags"> - measuring, geodesic, area, length, distance - </div> - <p id="shortdesc"> - Demonstrates the measure control to measure distances and areas. - </p> - <div id="map" class="smallmap"></div> - <div id="options"> - <div id="output"> - </div> - <ul id="controlToggle"> - <li> - <input type="radio" name="type" value="none" id="noneToggle" - onclick="toggleControl(this);" checked="checked" /> - <label for="noneToggle">navigate</label> - </li> - <li> - <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> - <label for="lineToggle">measure distance</label> - </li> - <li> - <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> - <label for="polygonToggle">measure area</label> - </li> - <li> - <input type="checkbox" name="geodesic" id="geodesicToggle" onclick="toggleGeodesic(this);" /> - <label for="geodesicToggle">use geodesic measures</label> - </li> - <li> - <input type="checkbox" name="immediate" id="immediateToggle" onclick="toggleImmediate(this);" /> - <label for="immediateToggle">use immediate measures</label> - </li> - </ul> - <p>Note that the geometries drawn are planar geometries and the - metrics returned by the measure control are planar measures by - default. If your map is in a geographic projection or you have the - appropriate projection definitions to transform your geometries into - geographic coordinates, you can set the "geodesic" property of the control - to true to calculate geodesic measures instead of planar measures. - Also you have the possibility to set the "immediate" property to true - to get a new calculated value once the mouse has been mooved.</p> - </div> - </body> -</html> |