使用 PanTo 的 Leaflet 控件框映射的简单 OnClick 事件

Question

所以我正在制作以前项目的网络地图。我在 JavaScript 和一般网络编程语言方面的经验有限且过时（显然 OnClick 已被弃用？）

无论哪种方式，我都使用 QGIS2Web 和 Leaflet 制作这张地图，然后计划通过源代码进一步微调它。

到目前为止一切都很好，但现在我正在尝试添加一个事件，该事件发生在 click/on 图层添加（但不是每个图层仅特定区域图层）上，然后将地图平移到质心该地区的。

我首先定义函数

    function NEPanTo(){
    map.panTo([54.04598, -2.73656])
    }

我知道它位于 L.Control.layers 内的某处，如下所示，对于该区域，它称为 layer_NorthEastnoinvert_7

    var baseMaps = {};
    L.control.layers(baseMaps, {
        '<img src="legend/NorthEastnoinvert_7.png" /> North East nointestvert': layer_NorthEastnoinvert_7,
        '<img src="legend/Transport_6.png" /> Transport': layer_Transport_6,
        '<img src="legend/Strategy_5.png" /> Strategy': layer_Strategy_5,
        '<img src="legend/Multipledeliverablesother_4.png" /> Multipledeliverablesother': layer_Multipledeliverablesother_4,
        '<img src="legend/Regeneration_3.png" /> Regeneration': layer_Regeneration_3,
        '<img src="legend/HealthAndEquality_2.png" /> HealthAndEquality': layer_HealthAndEquality_2,
        '<img src="legend/Development_1.png" /> Development': layer_Development_1,
        "Positron": layer_Positron_0,
        }, {
        collapsed: false
        }).addTo(map);
    setBounds();

我不确定你是否会在那个部分添加事件侦听器，但因为它已经调用了下面的 layer_NorthEastnoinvert_7，它调用了一个 onEachFeature: pop_NorthEastnoinvert_7 在这一点上我试图添加单击然后调用该函数的侦听器

                onEachFeature: {pop_NorthEastnoinvert_7,
                        click: NEPanTo},

这显然不起作用，导致控制框消失。所以我然后把它放在 pop_NorthEastnoinvert_7 内的一层，它实际上调用了 layer.on 函数，包括 mouseout 和 mouseover 但这让我觉得这是一个弹出框而不是控制框，再一次， PanTo 不起作用。

我的问题是我觉得我一定知道我需要做什么但不知道哪里我需要做-因为HTML 是由 JavaScript 生成的，它并不像编辑 div 以包含 class 并在 class 中使用该函数那么容易 - 我可以编辑生成 HTML 的 javascript，如下所示，但随后会更改所有这些，这也会影响非区域图层。

   _createRadioElement: function(t, i) {
            var e = '<input type="radio" class="leaflet-control-layers-selector" name="' + t + '"' + (i ? ' checked="checked"' : "") + "/>",
                n = document.createElement("div");
            return n.innerHTML = e, n.firstChild
        },
        _addItem: function(t) {
            var i, e = document.createElement("label"),
                n = this._map.hasLayer(t.layer);
            t.overlay ? ((i = document.createElement("input")).type = "checkbox", i.className = "leaflet-control-layers-selector", i.defaultChecked = n) : i = this._createRadioElement("leaflet-base-layers_" + u(this), n), this._layerControlInputs.push(i), i.layerId = u(t.layer), ki(i, "click", this._onInputClick, this);
            var o = document.createElement("span");
            o.innerHTML = " " + t.name;
            var s = document.createElement("div");
            return e.appendChild(s), s.appendChild(i), s.appendChild(o), (t.overlay ? this._overlaysList : this._baseLayersList).appendChild(e), this._checkDisabledLayers(), e
        },

仅使用某些层执行此操作的最佳方法是什么

Answer 1

I am trying to add an event that occurs on click/on layer add (but not of every layer only specific region layers)

然后 就这样，不要试图寻找变通办法使事情过于复杂。

所有传单层都是事件目标，触发add和remove事件，as documented，以及on/off方法attaching/detaching 事件处理程序。

因此，如果您在变量中有一个层 layer_NorthEastnoinvert_7 ...

layer_NorthEastnoinvert_7.on('add', function(ev) {
   // Do stuff
});

在你的情况下应该是这样的

layer_NorthEastnoinvert_7.on('add', function(ev) {
    map.panTo([54.04598, -2.73656])
});

或者，由于 on/off 方法的第二个参数是一个函数，

function NEPanTo() {
    map.panTo([54.04598, -2.73656])
}

layer_NorthEastnoinvert_7.on('add', NEPanTo);

请注意 on 的参数是函数的引用，而不是函数调用的结果。另请注意，事件处理函数可以忽略作为第一个参数传递的事件。

My experience with JavaScript [is] outdated (apparently OnClick is deprecated?)

不是真的 - 它是 still there, for HTMLElements; but there are downsides。

使用 PanTo 的 Leaflet 控件框映射的简单 OnClick 事件

A simple OnClick event for a Leaflet control box map using PanTo

html

javascript

qgis

leaflet