在openlayers.js中，有没有办法在绘制圆圈时显示圆的半径？

Question

我希望能够在地图上绘制一个圆圈，并且在绘制时，圆圈的半径显示在圆圈或其他东西上方。当我绘制圆圈时，我希望它能够改变，这样我才能看到这个半径。在openlayers中有什么办法吗？

Answer 1

一种方法是创建 MapToolTip

我做了一个跟随鼠标在偏移位置。基本上它是一个具有绝对位置风格的div，可以在mousemove上更新。

我的代码：

var MyAPP = MyAPP || {};

MyAPP.MapToolTip = function (position, text) {

    var content = '<div id="tool_tip" class="dropSheet ui-corner-all"><span id="info_window_text">' + text + '</span></div>';

    var toolTip = $(content).hide().appendTo('div#wrapper div#content_wrapper');
    toolTip.IsVisible = false;

    var mouseMove = function (e) {

        if (toolTip.IsVisible) {
            toolTip.fadeIn()
        }
        toolTip.css('top', e.clientY + 30);
        toolTip.css('left', e.clientX + 30);
        toolTip.IsVisible = true;
    };

    this.Destroy = function () {
        MyAPP.UI.Map.getMap().events.unregister("mousemove", MyAPP.UI.Map.getMap(), mouseMove);
        toolTip.IsVisible = null;
        toolTip.fadeOut();
        toolTip.remove();
        content = null;
        toolTip = null;
        mouseMove = null;
    };

    MyAPP.UI.Map.getMap().events.register("mousemove", MyAPP.UI.Map.getMap(), mouseMove);

    return;

};

.dropSheet {
    background-color: #000000;
    background-image: none;
    opacity: 0.6;
}
div#info_window {
    color: White;
    font-family: Verdana,Arial;
    font-size: 0.6em;
    left: 490px;
    padding: 6px;
    position: absolute;
    top: 100px;
    width: 220px;
    z-index: 99;
}