OpenLayers测量距离和面积
Posted jeely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了OpenLayers测量距离和面积相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于OpenLayers测量距离和面积的主要内容，如果未能解决你的问题，请参考以下文章
ArcGisJS实现地图常用工具条距离测量和面积测量（非官方实例）