最近一直在忙着做一个OpenLayers的项目，好久没来更新了，趁今天有时间来分享一下加强版的测量工具。代码主要是借助官网提供的demo来开发的，只是在demo上多加了两上功能。
1：长度测量时每个节点添加长度范围，仿百度的。
2：总长度的Tip上添加一个清空的按钮。
具体的效果如下所示：

测量.png

1：添加长度节点

具体思路是在开始绘制的时候，首先给地图添加一个singleclick的点击事件，当测量的时候，每点击一下，就会生成一条线，在点击的时候顺便生成一个UI元素，添加到Overlay上。具体实现步骤如下：

1. 添加点击事件

singleClick = map.on('singleclick', singleclickHandler);

2. 添加Overlay
   首先定义一个变量，以图形的数量作为key来缓存节点，方便删除的时候来清空对应图形上的节点信息。
   具体代码实现如下所示：

function addLengthOverlay(tooltipCoord,length) {
    var lengthElement = document.createElement('div');
    lengthElement.className = 'ol-tooltip ol-tooltip-length ol-length-bg';
    // lengthElement.className = 'ol-tooltip ol-tooltip-measure';
    var arr = Object.keys(cache);
    var id = arr.length;//获取图形缓存的长度
    lengthTooltip = new Overlay({
        element: lengthElement,
        offset: [0, -15],
        // positioning: 'bottom-center'
    });
    var lengthOverlayArr = lengthOverlays[id];//获取节点数据
    if(!lengthOverlayArr){//为空时重新创建
        lengthOverlayArr = [];
    }
    lengthOverlayArr.push(lengthTooltip);//保存节点信息
    lengthOverlays[id] = lengthOverlayArr;

    lengthTooltip.setPosition(tooltipCoord);
    if(length === 0 || length === '0 m'){//起点
        lengthElement.innerHTML = '起点';
    }else{
        lengthElement.innerHTML = length
    }
    map.addOverlay(lengthTooltip);
}

3. 移除点击事件
   当绘制完成后，需要移除点击事件，防止业务做其它点击事件时有冲突。在绘制的drawend方法中调用unByKey(singleClick);来移除添加的点击事件。

2.清空图层

当点击Tip上的关闭按钮时，可以删除该缓冲图层，主要是通过将前面绘制时缓存的图形总数做为关闭按钮的id,通过该id可以方便的找到对应的图形，然后再清空相应的元素和 Overlay即可。

const onDrawEnd = function () {
    var closeEelement = document.createElement('img');
    closeEelement.src = closeImg;
    closeEelement.className = 'close-btn'
    measureTooltipElement.appendChild(closeEelement);
    var arr = Object.keys(cache);
    var id = arr.length;
    closeEelement.id = id;
    var obj = {
        vector:vector,
        measureTooltip:measureTooltip
    }
    cache[id] = obj;
    closeEelement.addEventListener('click',function (event) {
        var id = this.id;
        var tipObj = cache[id];
        tipObj.vector.getSource().clear();//清空图形
        map.removeLayer(tipObj.vector);//清空临时图层
        map.removeOverlay(tipObj.measureTooltip);//清空TIP
        var array = lengthOverlays[id];
        if(array){
            array.forEach(item =>{
                map.removeOverlay(item);//清空节点
            })
        }

    },false)
}

个人博客