OL2中测量工具的扩展-白红宇

OL2中测量工具的扩展

阅读量：4969 次

发布时间：2019-06-12

本文共 7895 字，大约阅读时间需要 26 分钟。

概述：

本文共享一个扩展后的测量工具，实现绘制时测量结果的实时展示。

效果：

测距

测面

实现：

1、扩展MeasureControl

/** * Class: OpenLayers.Control.MeasureDistance *  * 地图距离量算控件 *  *  * 继承自: *  - 
    
      *//** * @requires OpenLayers/Control/Measure.js */ OpenLayers.Control.MeasureDistance = OpenLayers.Class(OpenLayers.Control.Measure, {    /**     * Property: type     * {String} 工具类型     */    type: OpenLayers.Control.TYPE_TOOL,		/**   * Property: outputDiv   * {String} 量算结果输出DIV   */	outputDiv: null,		/**	   * Property: correctParam	   * 纠正系数	*/	correctParam: 1,		/**   * Property: clicks   * {Integer} 鼠标点击次数   */	clicks: null,		/**   * Property: title   * {String} 工具按钮提示文字   */	title: "距离量算",		/**   * Constructor: OpenLayers.Control.MeasureDistance   * 初始化函数   *    * Parameters:   * handler - {
     
      }    * options - {Object}    */	initialize: function(options) {		OpenLayers.Util.extend(this, options);	   	var style = new OpenLayers.Style();	   	style.addRules([	       new OpenLayers.Rule({symbolizer: measureSymbolizers})]);	       	   	var styleMap = new OpenLayers.StyleMap({"default": style});	   	test={layerOptions:{stypeMap:styleMap}};	   	newArguments = [OpenLayers.Handler.Path, {	       persist: true,	       handlerOptions: {	           layerOptions: {styleMap: styleMap}	       }	   	}];		OpenLayers.Control.Measure.prototype.initialize.apply(this,newArguments);		this.events.on({		    measure: this.handleMeasurements,		    measurepartial: this.handlePartialMeasurements		});				var modifyFeature = this.handler.modifyFeature;		var scope = this;		this.handler.modifyFeature = function(pixel, drawing){		    modifyFeature.apply(scope.handler, arguments);		};		this.clicks = 0;	},				/**	 * Method: activate	 * 控件被触发时设置鼠标手势	 */	activate: function(){		if(this.map.labelLayer){			this.map.labelLayer.clear();		}		else{			this.map.labelLayer = new OpenLayers.Layer.Labels("mesurelabel", "mesurelabelLayer");			this.map.addLayer(this.map.labelLayer);		}		if(this.map.vectorLayer){			this.map.vectorLayer.removeAllFeatures();		}		else{			this.map.vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");			this.map.addLayer(this.map.vectorLayer);		}		OpenLayers.Control.Measure.prototype.activate.apply(this, arguments);	},		/**	 * Method: activate	 * 控件被触发时设置鼠标手势	 */	deactivate: function(){		OpenLayers.Control.Measure.prototype.deactivate.apply(this, arguments);		if(this.map.labelLayer){			this.map.labelLayer.clear();			this.map.vectorLayer.removeAllFeatures();		}	},	/**	 * Method: handleMeasurements	 * 量算结束	 */     handleMeasurements:function(event) {        var geometry = event.geometry;        var units = event.units;        var order = event.order;        var measure = event.measure;        var out = "";        var point="";        this.handler.deactivate();        var features = [new OpenLayers.Feature.Vector(        	geometry,{}        )];        this.map.vectorLayer.style = measureSymbolizers.Polygon;        this.map.vectorLayer.addFeatures(features);        if(order == 1) {            var length=geometry.components.length;            point =geometry.components[length-1];        }         else {            out += "" + measure.toFixed(3)*this.correctParam + " " + units + "
      ^{2
       ";            var length=geometry.components[0].components.length;            point =geometry.components[0].components[length-2];            this.map.labelLayer.setZIndex(this.map.Z_INDEX_BASE["Control"]);            var labelDiv = new OpenLayers.Label(new OpenLayers.LonLat(point.x,point.y),out, "MeasureLable");            this.map.labelLayer.add(labelDiv);        }        $(this.map.labelLayer.div).css("z-index","999");        var closeDiv = new OpenLayers.Label(new OpenLayers.LonLat(point.x,point.y),"×", "MeasureClose");        this.map.labelLayer.add(closeDiv);        var scope = this;        $(closeDiv.labelDiv).attr("title","关闭");        $(closeDiv.labelDiv).on("click",function(e){        	scope.deactivate();        });    },        /**    * Method: measurePartial    * Called each time a new point is added to the measurement sketch.    *    * Parameters:    * point - {
       
        } The last point added.    * geometry - {
        
         } The sketch geometry.    */   measurePartial: function(point, geometry) {       if (geometry.getLength() > 0) {    	   geometry = geometry.clone();    	   if(geometry.CLASS_NAME==="OpenLayers.Geometry.LineString"){	    	   var length = geometry.getGeodesicLength(this.map.getProjectionObject());	    	   var out = (length/1000).toFixed(3)*this.correctParam+"km";	           var labelDiv = new OpenLayers.Label(new OpenLayers.LonLat(point.x,point.y),out, "MeasureLable");	           this.map.labelLayer.add(labelDiv);    	   }           this.delayedTrigger = window.setTimeout(               OpenLayers.Function.bind(function() {                   this.measure(geometry, "measurepartial");               }, this),               this.partialDelay           );       }       else{    	   this.map.labelLayer.clear();    	   this.map.vectorLayer.removeAllFeatures();    	   if(geometry.CLASS_NAME==="OpenLayers.Geometry.LineString"){	    	   var out = "起点";	           var labelDiv = new OpenLayers.Label(new OpenLayers.LonLat(point.x,point.y),out, "MeasureLable");	           this.map.labelLayer.add(labelDiv);    	   }       }   },    	CLASS_NAME: "OpenLayers.Control.MeasureDistance"});/** * Class: OpenLayers.Control.MeasureArea *  * 地图面积量算控件 *  *  * 继承自: *  - 
         
           */ OpenLayers.Control.MeasureArea = OpenLayers.Class(OpenLayers.Control.MeasureDistance, { /** * Property: title * {String} 工具按钮提示文字 */ title: "面积量算", /** * Constructor: OpenLayers.Control.MeasureDistance * * Parameters: * handler - {
          
           } * options - {Object} */ initialize: function(options) { var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer: measureSymbolizers})]); var styleMap = new OpenLayers.StyleMap({"default": style}); test={layerOptions:{stypeMap:styleMap}}; newArguments = [OpenLayers.Handler.Polygon, { persist: true, handlerOptions: { layerOptions: {styleMap: styleMap} } }]; OpenLayers.Control.Measure.prototype.initialize.apply(this,newArguments); this.events.on({ measure: this.handleMeasurements, measurepartial: this.handlePartialMeasurements }); var modifyFeature = this.handler.modifyFeature; var scope = this; this.handler.modifyFeature = function(pixel, drawing){ modifyFeature.apply(scope.handler, arguments); } this.clicks = 0; }, /** * Method: activate * 控件被触发时设置鼠标手势 */ activate: function(){ if(this.map.labelLayer){ this.map.labelLayer.clear(); } else{ this.map.labelLayer = new OpenLayers.Layer.Labels("mesurelabel", "mesurelabelLayer"); this.map.addLayer(this.map.labelLayer); } if(this.map.vectorLayer){ this.map.vectorLayer.removeAllFeatures(); } else{ this.map.vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); this.map.addLayer(this.map.vectorLayer); } OpenLayers.Control.Measure.prototype.activate.apply(this, arguments); }, CLASS_NAME: "OpenLayers.Control.MeasureArea"});//style the sketch fancyvar measureSymbolizers = { "Point": { pointRadius: 3, graphicName: "circle", fillColor: "#8AC4F0", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor: "#FAD00B" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#ee9900", strokeDashstyle: "solid" }, "Polygon": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#ee9900", fillColor: "#66cccc", fillOpacity: 0.3 }};}