Question

我的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);
            }     
        }

类型对象返回未定义的值，而图层对象返回一堆不引用形状类型的参数。因此，我无法推断形状类型并执行正确的计算以获取其统计信息。

Answer 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对于理解继承树也很有用。

Answer 2

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

当您在Leaflet标准功能组上附加单击事件侦听器时，单击事件对象不具有layerType属性，因为您可以在docs上进行检查。

有关解决方案，请参阅IvanSanchez的答案。

单击时如何获得Leaflet形状的图层类型？

2 个答案:

矩形