ol Map 测距完整例示 仿百度测距

效果图：

 

//********************************************************测距**start**
//加载测量的绘制矢量层
var source = new ol.source.Vector(); //图层数据源
var vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({ //图层样式
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)' //填充颜色
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33', //边框颜色
            width: 2 // 边框宽度
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
});
map.addLayer(vector);

/**
 * 帮助提示框对象（The help tooltip element.）
 * @type {Element}
 */
var helpTooltipElement;
/**
 *帮助提示框显示的信息（Overlay to show the help messages.）
 * @type {ol.Overlay}
 */
var helpTooltip;
/**
 * 测量工具提示框对象（The measure tooltip element. ）
 * @type {Element}
 */
var measureTooltipElement;
/**
 *测量工具中显示的测量值（Overlay to show the measurement.）
 * @type {ol.Overlay}
 */
var measureTooltip;


var draw; // global so we can remove it later
/**
 * 加载交互绘制控件函数
 */
function addInteraction() {
    var type = 'LineString';
    var timestamp = new Date().getTime();
    draw = new ol.interaction.Draw({
        source: source, //测量绘制层数据源
        type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
        style: new ol.style.Style({ //绘制几何图形的样式
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 0,