如何在Leaflet地图JS中禁止点击多边形外部区域？

我们拥有3个经纬度数组（存储在success_content_mapareas中），并已据此创建Leaflet地图，当前点击地图任意区域都会触发坐标打印及地址反查逻辑。需要实现禁止点击多边形外部区域，或点击外部时弹出提示信息的效果。

当前使用的Leaflet版本为1.9.4，相关资源链接：

• Leaflet JS：https://unpkg.com/leaflet@1.9.4/dist/leaflet.js
• Leaflet CSS：https://unpkg.com/leaflet@1.9.4/dist/leaflet.css

现有代码如下：

var success_content_mapareas = res.area_labels;

if (success_content_mapareas != "") {
  var map = L.map("map").setView([26.250930597138844, 43.98925781250001], 5);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  }).addTo(map);

  jQuery.each(success_content_mapareas, function (index, success_content_mapareas) {
    L.polygon(success_content_mapareas).addTo(map);
  });

  function onMapClick(e) {
    var latlong_test = e.latlng;
    console.log(latlong_test);
    jQuery.get(
      "https://nominatim.openstreetmap.org/reverseformat=jsonv2&lat=" + latlong_test.lat + "&lon=" + latlong_test.lng,
      function (data) {
        console.log(data.display_name);
        jQuery("#bs_quick_shipping_full_address").val(data.display_name);
      },
    );
  }

  map.on("click", onMapClick);
}

要实现需求，核心是判断点击的坐标是否落在任意一个多边形内部，Leaflet的L.Polygon对象提供了contains()方法可直接完成点-in-多边形的判断，具体修改步骤如下：

1. 新增一个数组存储所有创建的多边形实例，方便后续批量判断
2. 在点击事件中遍历多边形数组，检查点击点是否在任意多边形内
3. 根据判断结果执行不同逻辑：点在内部则保留原地址反查逻辑；点在外部则弹出提示，不执行后续操作

修改后的完整代码：

var success_content_mapareas = res.area_labels;

if (success_content_mapareas != "") {
  var map = L.map("map").setView([26.250930597138844, 43.98925781250001], 5);
  // 新增数组存储所有多边形实例
  var polygons = [];

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  }).addTo(map);

  jQuery.each(success_content_mapareas, function (index, areaCoords) {
    var polygon = L.polygon(areaCoords).addTo(map);
    // 将多边形实例存入数组
    polygons.push(polygon);
  });

  function onMapClick(e) {
    var latlong_test = e.latlng;
    // 判断点击点是否在任意多边形内部
    var isInside = polygons.some(function(polygon) {
      return polygon.contains(latlong_test);
    });

    if (!isInside) {
      // 点击外部时弹出提示，可根据需求修改提示内容或样式
      alert("请点击多边形内部区域");
      return; // 终止后续逻辑执行
    }

    // 点在内部时执行原逻辑
    console.log(latlong_test);
    jQuery.get(
      "https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=" + latlong_test.lat + "&lon=" + latlong_test.lng,
      function (data) {
        console.log(data.display_name);
        jQuery("#bs_quick_shipping_full_address").val(data.display_name);
      },
    );
  }

  map.on("click", onMapClick);
}

说明：

• polygons.some()方法会遍历多边形数组，只要有一个多边形包含点击点就返回true
• 若不需要弹窗提示，也可直接移除外部点击的响应逻辑，仅保留内部点击的处理
• 修正了原代码中Nominatim请求URL的参数错误（缺少?分隔符）

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