<!DOCTYPE html> <html> <head> <title>测量距离和面积</title> <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="./OpenLayers-2.12/theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="./css/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="./OpenLayers-2.12/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.toFixed(3) + " " + units; } else { out += "测量面积: " + 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(); } } } </script> </head> <body onload="init()"> <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">导航</label> </li> <li> <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> <label for="lineToggle">测量距离</label> </li> <li> <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> <label for="polygonToggle">测量面积</label> </li> </ul> </div> </body> </html>