Leaflet：不隐藏已填充Polyline时点击获取下方LatLng的实现方法

本方案严格符合约束：不移除、隐藏任何填充图层，不修改图层填充属性，仅通过事件层调整实现点击LatLng的精准获取。

核心实现点 #

• 不改动任何图层视觉效果：所有多边形的边框样式、填充透明度、显示位置和原有效果完全一致
• 调整图层事件拦截能力：利用Leaflet原生的交互控制属性，让填充图层不拦截鼠标点击事件，事件可直接穿透到地图容器
• 保留原有绑定的popup：不需要解绑popup，仅通过事件开关避免点击时弹窗弹出，后续可随时恢复交互能力

可直接运行的调整后代码 #

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  </head>

  <body style="margin:0; border: 0; padding:0; content: 0;">
    <div id="mapid" style="width: 100%; height: 666px;"></div>

    <script>
    "use strict";

    var mymap = L.map('mapid', { zoomControl:false, doubleClickZoom:false, minZoom: 2, maxZoom: 18, keyboard: false}).setView([43, 11], 7);
    var LayMap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {zIndex:1, minZoom: 2, maxZoom: 18, zoom: 8, doubleClickZoom: false, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: '...'}).addTo(mymap);

    mymap.createPane('PanA').style.zIndex = 501;
    var LayA = new L.layerGroup();
    // 为多边形增加interactive:false属性，该属性仅控制事件响应，不影响任何视觉显示
    var Poly1 = L.polygon([[43,11],[43.5,11],[43.5,11.5]], {
        pane: 'PanA',
        weight: 9,
        color: 'Indigo',
        opacity: 1,
        fill: true,
        fillOpacity: 0.1,
        dashArray: '2,5',
        interactive: false
    }).bindPopup('HI from Poly1');
    LayA.addLayer(Poly1);

    var Poly2 = L.polygon([[44,11],[44.5,11],[44.5,11.5]], {
        pane: 'PanA',
        weight: 9,
        color: 'Red',
        opacity: 1,
        fill: true,
        fillOpacity: 0.1,
        dashArray: '2,5',
        interactive: false
    }).bindPopup('HI from Poly1');
    LayA.addLayer(Poly2);
    mymap.addLayer(LayA);

    // 实时记录鼠标位置的屏幕坐标，做点击取数的兜底校准
    let lastContainerPoint = null;
    mymap.on('mousemove', function(e) {
        lastContainerPoint = e.containerPoint;
    });

    mymap.on('click', function(e) {
      console.log('点击点坐标：', e.latlng);
      // 兜底坐标转换，就算事件被意外拦截，也能通过屏幕坐标拿到无偏差的地理值
      const calibratedLatlng = mymap.containerPointToLatLng(lastContainerPoint);
      console.log('校准坐标：', calibratedLatlng);
    });
    </script>
  </body>
</html>

细节说明 #

• interactive: false是Leaflet矢量图层的原生属性，设置后仅会取消图层的鼠标事件拦截能力，不会修改图层的透明度、填充状态、边框样式，完全符合“不得移除图层、必须保持填充”的约束
• 原有绑定在图层上的popup不会被删除，仅因为图层关闭了事件响应，点击时不会自动弹出弹窗，如果后续需要恢复popup交互，只需要把对应图层的interactive属性改回true即可
• 示例中的填充多边形属于带填充效果的闭合Polyline，本方案对所有带填充的矢量线、面图层均适用
• 坐标兜底逻辑基于屏幕坐标到地理坐标的原生转换，不依赖事件冒泡机制，就算图层叠放顺序调整，也能保证坐标获取的准确性

内容的提问来源于stack exchange，提问作者jockerfox