popup随鼠标移动，OpenLayers.Control.Measure测量距离

之前需要做一个测量距离的工具，于是查了OpenLayers.Control.Measure，量算过程通过调用事件处理器 Handler 实现在 vector 图层上的距离或面积的量算。

这里做的是距离量算，点击之后会弹出popup（OpenLayers.Popup），效果是点击之后出现增加popup计算出之前几个点之间的距离，并删掉前面的popup（并没有做出向百度那样随鼠标移动变化距离的效果）。

调用方法MeasurePath();就可以查看效果啦

var measurePopup = null;
var messagelast = null;

//距离测量
var measureControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
    persist: true,
    eventListeners: {
        'measure': measureDistance,
        'measurepartial': measurepartial
    }
});


function MeasurePath() {
    measureControl.updateHandler(OpenLayers.Handler.Path, { persist: true });
    map.addControl(measureControl);
    measureControl.activate();
}
function measureDistance(event) {
    messagelast = parseFloat(event.measure).toFixed(2) + "" + event.units;
    if (event.order > 1) {
        messagelast += "2";
    }
    //获取鼠标点击处的经纬度
    var points = event.geometry.components;
    var point = points[points.length - 1];
    if (measurePopup != null)
        map.removePopup(measurePopup);
    measurePopup = new OpenLayers.Popup("chicken",
    //弹出框位置
                   new OpenLayers.LonLat(point.x, point.y),
    //new OpenLayers.LonLat(position.x, position.y),
                   null,
                   messagelast,
                   true,
                   closeBoxCallback
                   );
    measurePopup.autoSize = true;
    measurePopup.backgroundColor = "#06a09f";
    measurePopup.opacity = 0.8;
    map.addPopup(measurePopup);
}

function measurepartial(event) {
    var message = parseFloat(event.measure).toFixed(2) + "" + event.units;
    var points = event.geometry.components;
    var point = points[points.length - 1];
    if (measurePopup != null)
        map.removePopup(measurePopup);
    measurePopup = new OpenLayers.Popup("chicken",
    //弹出框位置
                   new OpenLayers.LonLat(point.x, point.y),
                   null,
                   message,
                   true,
                   closeBoxCallback
                   );
    measurePopup.autoSize = true;
    measurePopup.backgroundColor = "#06a09f";
    measurePopup.opacity = 0.8;
    if (points.length > 2)
        map.addPopup(measurePopup);
}

//function changeHandler(checked){  
//        measureClick();
//    }

function closeBoxCallback() {
    map.removePopup(measurePopup);
    measureControl.deactivate();
    map.removeControl(measureControl);
    messagelast = null;
}  

popup有点丑，哈哈。双击结束一次测量，点击popup的关闭按钮（右上角的红叉叉），结束测量事件。