通过按 ctrl 并在传单中拖动鼠标来绘制一个圆圈答案

【问题标题】：Draw a circle by pressing ctrl & dragging mouse in leaflet通过按 ctrl 并在传单中拖动鼠标来绘制一个圆圈
【发布时间】：2017-01-12 10:07:52
【问题描述】：

我正在尝试使用传单开发一个功能，使用户能够通过按 ctrl 并拖动鼠标来绘制圆圈，如下所示

    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 并拖动鼠标时，它仍然不起作用。

我尝试在 _onMouseDown() 的开头将文本打印到控制台，但没有显示任何内容。

该事件似乎没有触发。

我需要修改什么？谢谢。

【问题讨论】：

你看过Leaflet.draw吗？该插件有一个圆形绘图选项。也许您可以使用它或查看他们的源代码。
@user：我知道这个插件。我想自己开发这个功能作为练习，但是遇到了这个问题。也许我可以先追踪源代码，谢谢。

标签： javascript leaflet

【解决方案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......

【讨论】：