标签：openlayers js 画圆 地图
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 js 画圆 地图
原文地址：http://blog.csdn.net/fenqixiaoqiang/article/details/43850429
