openlayers - 在 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;
}