Javascript QGIS-传单（定制OnClick事件）

在使用传单web地图单击多边形时，我很难添加代码来自定义动作/事件

最终的目标不仅是显示这个小弹出窗口，而且是一个信息滑块HTML代码，由我自己添加。 目前，我怀疑这可能是添加或更改某些内容的地方，但不确定：

function pop_LotDrawing_2(feature, layer) {
        layer.on({
            mouseout: function(e) {
                for (i in e.target._eventParents) {
                    e.target._eventParents[i].resetStyle(e.target);
                }
            },
            mouseover: highlightFeature,
        });
        var popupContent = '<table>\
                <tr>\
                    <td colspan="2"><strong>Lot</strong><br />' + (feature.properties['Lot'] !== null ? Autolinker.link(String(feature.properties['Lot'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Design</th>\
                    <td>' + (feature.properties['Design'] !== null ? Autolinker.link(String(feature.properties['Design'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Area (sqm)</th>\
                    <td>' + (feature.properties['Area (sqm)'] !== null ? Autolinker.link(String(feature.properties['Area (sqm)'])) : '') + '</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 400});

function pop\u LotDrawing\u 2（特征、图层）{
分层({
鼠标输出：函数（e）{
用于（例如，在e.target.\u eventParents中）{
e、 target.\u eventParents[i].resetStyle（e.target）；
}
},
鼠标悬停：Highlight功能，
});
var popupContent=\
\
Lot
'+（feature.properties['Lot']！==null？自动链接器.link（String（feature.properties['Lot']）：''）+'\
\
\
设计\
'+（feature.properties['Design']！==null？Autolinker.link（String（feature.properties['Design']）：''）+'\
\
\
面积（平方米）\
'+（feature.properties['Area（sqm）'！==null？Autolinker.link（String（feature.properties['Area（sqm）'））：''）+'\
\
';
bindPopup（popupContent，{maxHeight:400}）；

最终，我想实现像这个网站一样的东西：

---

一种方法是创建一个包含所有多边形特征的数组。您可以将所有多边形添加到此数组，然后循环数组中的元素以附加事件处理程序并将其添加到地图。您可以使用

polygon.on（）

附加事件处理程序

下面是一个示例，我在地图上添加了一个圆和三角形。我对这两种形状都进行了描述。然后我将它们添加到

多边形

数组中，一旦它们被初始化，我将在数组上循环以附加事件处理程序并将它们添加到地图中。单击“运行代码段”进行尝试（在全屏视图中可能更容易看到）

您可以根据需要设置侧栏的样式，并修改事件处理程序和/或CSS以创建动画效果

希望这能让你走上正轨

let map=new L.map（'map'）；
//多边形数组以容纳所有多边形
设多边形=[]；
L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
最大缩放：18
}).addTo（地图）；
//地图居中的位置
let london=新L.LatLng（51.505，-0.09）；
赛特维尤地图（伦敦，13）；
//围绕点创建一个圆
设圆圈位置=新L.LatLng（51.508，-0.11），
循环选项={
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
};
let circle=新的L.circle（circleLocation，500，circleOptions）；
//这是单击时将在侧边栏中显示的内容
circle.desc=“您单击了一个圆！”；
//将圆添加到多边形阵列
多边形。推（圆）；
//创建具有以下顶点的三角形
设p1=新L.LatLng（51.509，-0.08），
p2=新L.LatLng（51.503，-0.06），
p3=新L.LatLng（51.51，-0.047），
多基因点=[p1，p2，p3]；
设多边形=新的L.多边形（多边形点）；
//这是单击时将在侧边栏中显示的内容
polygon.desc=“您单击了一个三角形！”；
//将三角形添加到多边形阵列
多边形。推（多边形）；
//循环多边形数组中的所有元素，附加事件处理程序并将元素添加到地图
多边形。forEach（函数（i）{
i、 打开（“单击”，更改侧栏）；
添加图层（i）；
});
//基本事件处理程序，它只是将侧栏innerHTML更改为上面定义的元素的'desc'属性。
函数更改侧栏（事件）{
sidebar.innerHTML=event.target.desc；
}

#侧边栏{
宽度：30%；
高度：500px；
位置：绝对位置；
右：0；
背景色：#C3C3；
}
#地图{
宽度：70%；
高度：500px；
}

---

事实上，后来我还发现我们可以插入并传递函数，而不是传递popupContent（html）

在何处更改：

layer.bindPopup(popupContent, {maxHeight: 400});

将原始变量替换为html插入：

 var popupContent = '<table>\
            <tr>\
                <td colspan="2"><strong>Lot</strong><br />' + (feature.properties['Lot'] !== null ? Autolinker.link(String(feature.properties['Lot'])) : '') + '</td>\
            </tr>\
            <tr>\
                <th scope="row">Design</th>\
                <td>' + (feature.properties['Design'] !== null ? Autolinker.link(String(feature.properties['Design'])) : '') + '</td>\
            </tr>\
            <tr>\
                <th scope="row">Area (sqm)</th>\
                <td>' + (feature.properties['Area (sqm)'] !== null ? Autolinker.link(String(feature.properties['Area (sqm)'])) : '') + '</td>\
            </tr>\
        </table>';

这个想法也受到答案及其文档的启发：

设置内容

（htmlContent） 设置弹出窗口的HTML内容。如果传递函数，则源层将传递给该函数。该函数应返回要在弹出窗口中使用的字符串或HTMLElement

---

希望大家都喜欢：）

您好！您能提供一段代码吗？如果不看相关代码，很难说问题出在哪里。当然可以。附件。非常感谢@AndroidNoobie！这是一个有帮助的快速回复。

function popup(){
                //do whatever here
            }

layer.bindPopup(popup, {maxHeight: 400});