Openlayers手动绘制圆形(v2.13)

Openlayers(v2.13)自带手动绘制矩形、多边形等图形的方法,方便快捷,但是并没有绘制圆的方法,在开发时根据API中的Box编写了手动绘圆的方法。此方法绘制的圆以鼠标拖动出的矩形较短的一条边为半径,与Windows中画图工具的画圆原理类似。

该方法绘制结束后会自动清除已经绘制的圆,如需保留的话修改方法中remove的部分即可。代码如下:

var gPolygon = null;if (!layer.CIRCLEHADNLER) {var layerCircleControl = new OpenLayers.Control();OpenLayers.Util.extend(layerCircleControl, {draw : function() {layer.CIRCLEHANDLER = new OpenLayers.Handler.Box(layerCircleControl, null, {startBox: null,moveBox:function(xy){var start = this.map.getLonLatFromPixel(this.dragHandler.start);var last = this.map.getLonLatFromPixel(xy);var width = Math.abs(start.lon-last.lon);var height = Math.abs(start.lat-last.lat);var radius,originX,originY;if(width <= height){radius = width/2;originX = start.lon+(last.lon-start.lon)/2;if(start.lat – last.lat <= 0){originY = start.lat + radius;}else{originY = start.lat – radius;}}else{radius = height/2;if(start.lon – last.lon <=0){originX = start.lon + radius;}else{originX = start.lon – radius;}originY = start.lat+(last.lat-start.lat)/2;}var origin = new OpenLayers.Geometry.Point(originX,originY);var feature = OpenLayers.Geometry.Polygon.createRegularPolygon(origin, radius, 40, 0);if(gPolygon){layer.destroyFeatures(gPolygon);gPolygon = null;}gPolygon = new OpenLayers.Feature.Vector(feature, null, style);if(!gPolygon){return;}layer.addFeatures([gPolygon]);},endBox: function(){//将gPolygon作为参数执行业务方法},removeBox: function(){if(gPolygon){layer.destroyFeatures(gPolygon);gPolygon = null;}}});}});this.getAbstractMap().getMap().addControl(layerCircleControl);var handler = layer.CIRCLEHANDLER.dragHandler;handler.dragstart = function(evt){var propagate = true;handler.dragging = false;if (handler.checkModifiers(evt) && (OpenLayers.Event.isLeftClick(evt) ||OpenLayers.Event.isSingleTouch(evt))) {handler.started = true;handler.start = evt.xy;handler.last = evt.xy;OpenLayers.Element.addClass(handler.map.viewPortDiv, "olDragDown");handler.down(evt);handler.callback("down", [evt.xy]);OpenLayers.Event.preventDefault(evt);if(!handler.oldOnselectstart) {handler.oldOnselectstart = document.onselectstart ? document.onselectstart : OpenLayers.Function.True;}document.onselectstart = OpenLayers.Function.False;propagate = !handler.stopDown;}return propagate;}}layer.ADD_CIRCLE_HANDLER.activate();

,挫折其实就是迈向成功所应缴的学费。

Openlayers手动绘制圆形(v2.13)

相关文章:

你感兴趣的文章:

标签云: