Question

我正在尝试开发一个带有传单的功能，这使得用户可以通过按下ctrl＆amp;来绘制一个圆圈。拖动鼠标，如下所示

    let mouseDownPos = null
    let mouseUpPos = null

    L.Map.CircleSelector = L.Map.Drag.extend({
        _onMouseDown: function(e) {
            if (!e.ctrlKey)
                return

            let map = this._map
            map.dragging.disable()

            mouseDownPos = map.containerPointToLatLng(this._point)
        }, 
        _onMouseUp: function(e) {
            if (!e.ctrlKey) {
                this._map.dragging.enable()
                return
            }

            let map = this._map
            mouseUpPos = map.containerPointToLatLng(this._point)

            let radius = map.distance(mouseDownPos, mouseUpPos)
            L.circle(mouseDownPos, {radius: radius}).addTo(map)

            map.dragging.enable()
        }
    })

    L.Map.mergeOptions({circleSelector: true})
    L.Map.addInitHook('addHandler', 'circleSelector', L.Map.CircleSelector)

当我按下ctrl＆amp;在地图上拖动鼠标，它仍然无法正常工作。

我试图在_onMouseDown（）的开头打印文本到控制台，它什么都没显示。

似乎事件没有触发。

我需要修改什么？谢谢。

Answer 1

最后，我延长leaflet.draw来实现我的目标。

参考L.Draw.Circle的源代码，我从L.Draw.Circle扩展我的选择器。主要修改的部分在_onMouseUp中，如下所示

    L.Map.CircleSelector = L.Draw.SimpleShape.extend({
        _onMouseUp: function (e) {
            // TODO
            // 1. Get the circle center & radius
            // 2. Calculate distances between center & markers
            // 3. If the distance in step 2 <= radius, it is in the circle
            // 4. Anything you'd like to do......
        }
    })

事件的其余代码可以参考L.Draw.Circle，例如addHooks，_onMouseMove ......

按ctrl＆amp; amp;画一个圆圈。在传单中拖动鼠标

1 个答案: