单击时如何获得传单形状的图层类型？答案

【问题标题】：How do I get a Leaflet shape's layer type when clicking on it?单击时如何获得传单形状的图层类型？
【发布时间】：2019-07-11 09:05:30
【问题描述】：

我的 Leaflet 项目允许用户绘制形状（线条、矩形和多边形）。用户可以单击形状以获取其统计信息（面积、周长等）。

我在我的 FeatureGroup() 上尝试了一个单击事件，其中添加了我绘制的所有形状。我不确定这是否是最好的方法。然后在单击时，调用一个接受事件的函数。层类型是从事件对象中推断出来的。


 //Handlers for when drawn shapes are clicked
        editableLayers.on('click', onLayerClick);

        function onLayerClick(e)
        {
            let type = e.layerType,
                layer = e.layer;
            if (type === 'polygon') {
                polygons.push(e.layer);
                let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                console.log("New polygon area: " + area);
            }

            if (type === 'rectangle') {
                rectangles.push(e.layer);
                let area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
                console.log("New rectangle area: " + area);
            }     
        }

type 对象返回一个未定义的，layer 对象返回一堆不引用形状类型的参数。因此，我无法推断形状类型并执行正确的计算来获取它们的统计数据。

【问题讨论】：

不是完全重复，但包含有用的信息...stackoverflow.com/questions/18014907/…

标签： javascript leaflet leaflet.draw

【解决方案1】：

我会利用instanceof operator 来完成这项任务，例如：

function onLayerClick(ev) {
  var targetLayer = ev.sourceTarget;
  if (targetLayer instanceof L.Rectangle) {
     // Do something
  } else if (targetLayer instanceof L.Polygon) {
     // Do something
  } else if (targetLayer instanceof L.Polyline) {
     // Do something
  } else {
     // Do something
  }
}

请注意，由于how inheritance works，L.Rectangle 的任何实例也是L.Polygon、L.Polyline 和L.Path 的实例 - 这就是为什么代码应该首先检查最具体的子类的原因。

记得查看 Leaflet 参考，特别是告诉您有关继承树的位，e.g.：

矩形

用于在地图上绘制矩形叠加层的类。扩展多边形。

Leaflet class diagram 也有助于理解继承树。

【讨论】：

【解决方案2】：

根本原因是event.layerType是Leaflet.draw插件添加的特殊属性，只有当用户创建了新功能时。

当您在 Leaflet 标准功能组上附加点击事件侦听器时，点击事件对象没有这样的 layerType 属性，您可以在 docs 上查看。

至于解决方案，请参阅 IvanSanchez 的回答。

【讨论】：