小马看GIS–OpenLayers(三)–目测功能

群中，有位山上的朋友，问OpenLayers怎么实现目测。在我的印象中，OpenLayers不涉及空间计算的功能，结果查了查文档，发现OpenLayers中还是实现了目测功能的。先贴副图片看看效果：

这个例子可以计算两条直线的距离，可以计算多边形的面积。

下面把代码贴出来。

<SCRIPT src="../openlayers/OpenLayers.js"></SCRIPT>
<SCRIPT src="../openlayers/measure.js"></SCRIPT>  
<SCRIPT type=text/javascript>  
    var map, measureControls;  
    //OpenLayers.Util.onImageLoadErrorColor = "transparent";  
    function init(){  
        map = new OpenLayers.Map('map');  
        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",   
            "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});   
        map.addLayers([wmsLayer]);  
        map.addControl(new OpenLayers.Control.LayerSwitcher());  
        map.addControl(new OpenLayers.Control.MousePosition());  
        var options = {  
            displayUnits: 'km',  
            handlerOptions: {persist: true}  
        };  
        var circleOptions = {  
            displayUnits: 'km',  
            handlerOptions: {sides: 35,persist: true}  
        }; 
        measureControls = {  
            line: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, options), 
            polygon: new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, options),
            circle: new OpenLayers.Control.Measure(OpenLayers.Handler.RegularPolygon, circleOptions)
        }; 
        var control;  
        for(var key in measureControls) {  
            control = measureControls[key];  
            control.onMeasure = handleMeasurements;  
            map.addControl(control);  
        }  
          
        map.setCenter(new OpenLayers.LonLat(0, 0), 3);  
          
        document.getElementById('noneToggle').checked = true;  
    }  
      
    function handleMeasurements(geometry, length, area, units) {  
        var element = document.getElementById('output');  
        var out = "";  
        if(geometry.CLASS_NAME == "OpenLayers.Geometry.LineString") {  
            out += "length: " + length.toFixed(3) + " " + units;  
        } else {  
            out += "perimeter: " + length.toFixed(3) + " " + units + "<br />";  
            out += "area: " + area.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>

看到这句话<script src="../openlayers/measure.js"></script>了吗？OpenLayers版本不同，可能没有这个measure.js。

现在把这个js贴出来，拷贝到您的网站中，这个功能就能实现了。

/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD  
 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the  
 * full text of the license. */  
  
/**  
 * @requires OpenLayers/Control.js  
 * @requires OpenLayers/Feature/Vector.js  
 */  
  
 /**  
  * Class: OpenLayers.Control.Measure  
  * Allows for drawing of features for measurements.  
  *  
  * Inherits from:  
  *  - <OpenLayers.Control>  
  */  
 OpenLayers.Control.Measure = OpenLayers.Class(OpenLayers.Control, {  
   
     /**  
      * APIProperty: handlerOptions  
      * {Object} Used to set non-default properties on the control's handler  
      */  
     handlerOptions: null,  
       
     /**  
      * APIProperty: onMeasure  
      * {Function} After a geometry is drawn, onMeasure is called with three  
      *     arguments: the geometry, its length, and its area.  
      */  
     onMeasure: function() {},  
       
     /**  
      * Property: callbacks  
      * {Object} The functions that are sent to the handler for callback  
      */  
     callbacks: null,  
       
     /**  
      * Property: displayUnits  
      * {String} Units for output.  Must be one of 'in', 'ft', 'mi', 'm', 'km',  
      *     or 'dd'.  If null, displayUnits will be assumed to be the same as  
      *     map units.  
      */  
     displayUnits: null,  
   
     /**  
      * Constructor: OpenLayers.Control.Measure  
      *   
      * Parameters:  
      * handler - {<OpenLayers.Handler>}   
      * options - {Object}   
      */  
     initialize: function(handler, options) {  
         OpenLayers.Control.prototype.initialize.apply(this, [options]);  
         this.callbacks = OpenLayers.Util.extend(  
             {done: this.measureGeometry, point: this.partialMeasure},  
             this.callbacks  
         );  
         this.handler = new handler(this, this.callbacks, this.handlerOptions);  
     },  
   
     /**  
      * Method: measureGeometry  
      */  
     measureGeometry: function(geometry) {  
         var area = this.getArea(geometry);  
         var length = this.getLength(geometry);  
         this.onMeasure(geometry, length, area, this.displayUnits);  
     },  
       
     /**  
      * Method: getArea  
      */  
     getArea: function(geometry) {  
         var area = geometry.getArea();  
         var inPerDisplayUnit = OpenLayers.INCHES_PER_UNIT[this.displayUnits];  
         if(inPerDisplayUnit) {  
             var inPerMapUnit = OpenLayers.INCHES_PER_UNIT[this.map.units];  
             area *= Math.pow((inPerMapUnit / inPerDisplayUnit), 2);  
         }  
         return area;  
     },  
       
     /**  
      * Method: getLength  
      */  
     getLength: function(geometry) {  
         var length = geometry.getLength();  
         var inPerDisplayUnit = OpenLayers.INCHES_PER_UNIT[this.displayUnits];  
         if(inPerDisplayUnit) {  
             var inPerMapUnit = OpenLayers.INCHES_PER_UNIT[this.map.units];  
             length *= (inPerMapUnit / inPerDisplayUnit);  
         }  
         return length;  
     },  
   
     CLASS_NAME: "OpenLayers.Control.Measure"  
 }); 

转载自：https://blog.csdn.net/mach365/article/details/2738608