openlayers - openlayers.jsで、円を描いているときに円の半径を表示する方法はありますか?

Question

地図上に円を描くことができるようにしたいのですが、描画中にその円の半径が円または何かの上に表示されます。この半径が見えるように、円を描くときに変化させたいです。オープンレイヤーでこれを行う方法はありますか?

Answer 1

1 つの方法は、 MapToolTipを作成することです。

ずらした位置でマウスを追従するものを作りました。基本的には、 で更新される絶対位置スタイルの divmousemoveです。

私のコード:

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