Question

当使用Stefano Cudini的插件 Leaflet.Control.Search 以及Leaflet的内置函数 L.control.layers 时，我遇到了困难。

只要所有图层都已打开，找到位置就没有任何问题。

关闭其中一个图层后，Leaflet-Search无法找到位置，并且在搜索框中输入以下错误消息时出现：

Uncaught TypeError: Cannot read property 'layerPointToLatLng' of null
at e.getBounds (leaflet.js:5)
at e._searchInLayer (leaflet-search.js:555)
at leaflet-search.js:594
at eachLayer (leaflet.js:5)
at e._searchInLayer (leaflet-search.js:593)
at leaflet-search.js:605
at eachLayer (leaflet.js:5)
at e._recordsFromLayer (leaflet-search.js:604)
at e._fillRecordsCache (leaflet-search.js:744)
at leaflet-search.js:706

如果再次打开隐藏图层，则搜索功能将恢复正常操作。

我创建了一个显示问题的JS Bin，但您无法看到有关确切错误的详细信息，因为它只显示“脚本错误”。尝试搜索网站 - 可用的名称是1000,1100,1110和1111.它将起作用。然后从图层控件中关闭其中一个图层组并再次尝试 - 它将显示错误。再次打开并继续正常工作。

如果有人可以给我一个建议，告诉我我做错了什么或者可以实施哪些解决办法，我将不胜感激。提前谢谢！

简称代码：

网站在两个数组中定义：

var sites1 = [
{"loc":[51.582521, -0.118155],"Site":"1000"},
{"loc":[51.587454, -0.106052],"Site":"1100"}
];

将数组循环并添加到图层组中：

var layerSites1 = L.layerGroup();

for(var i in sites1) {
var title = sites1[i].Site, 
loc = sites1[i].loc,        
marker = new L.circle(new L.latLng(loc),
       {radius: 100,title: title,color: 'red'})
       .bindPopup('Site: '+ title);

layerSites1.addLayer(marker);
}

两个图层组定义为叠加层：

var overlays = {

    "Sites1": layerSites1,
    "Sites2": layerSites2
};

L.control.layers(baseLayers,overlays).addTo(mymap);

然后将它们添加到公共图层组，用于通过Leaflet Search进行搜索：

var layerAll = L.layerGroup([layerSites1,layerSites2]);

传单搜索的定义如下：

var controlSearch = new L.Control.Search({
    position:'topright',        
    layer: layerAll,
    initial: false,
    hideMarkerOnCollapse: true,
    zoom: 17

});

mymap.addControl(controlSearch);

Answer 1

事实上，解决方案相当容易。我只需要在leaflet-search.js源代码中添加 try-catch语句。

在当前的插件版本中，尝试是为第528行的_searchInLayer函数添加的。 catch 需要在第599行添加（原来是第598行，然后再添加＆＃ 34;尝试＆＃34; 528）。

就像提交搜索的主层组中的一个层组一样，关闭时，不会抛出异常，显示工具提示并显示搜索的位置并突出显示。

现在更新的代码如下所示：

_searchInLayer: function(layer, retRecords, propName) {
try {
var self = this, loc;

if(layer instanceof L.Control.Search.Marker) return;

if(layer instanceof L.Marker || layer instanceof L.CircleMarker)
{
  if(self._getPath(layer.options,propName))
  {
    loc = layer.getLatLng();
    loc.layer = layer;
    retRecords[ self._getPath(layer.options,propName) ] = loc;
  }
  else if(self._getPath(layer.feature.properties,propName))
  {
    loc = layer.getLatLng();
    loc.layer = layer;
    retRecords[ self._getPath(layer.feature.properties,propName) ] = loc;
  }
  else {
    //throw new Error("propertyName '"+propName+"' not found in marker"); 
    console.warn("propertyName '"+propName+"' not found in marker"); 
  }
}
if(layer instanceof L.Path || layer instanceof L.Polyline || layer instanceof L.Polygon)
{
  if(self._getPath(layer.options,propName))
  {
    loc = layer.getBounds().getCenter();
    loc.layer = layer;
    retRecords[ self._getPath(layer.options,propName) ] = loc;
  }
  else if(self._getPath(layer.feature.properties,propName))
  {
    loc = layer.getBounds().getCenter();
    loc.layer = layer;
    retRecords[ self._getPath(layer.feature.properties,propName) ] = loc;
  }
  else {
    //throw new Error("propertyName '"+propName+"' not found in shape"); 
    console.warn("propertyName '"+propName+"' not found in shape"); 
  }
}
else if(layer.hasOwnProperty('feature'))//GeoJSON
{
  if(layer.feature.properties.hasOwnProperty(propName))
  {
    if(layer.getLatLng && typeof layer.getLatLng === 'function') {
      loc = layer.getLatLng();
      loc.layer = layer;            
      retRecords[ layer.feature.properties[propName] ] = loc;
    } else if(layer.getBounds && typeof layer.getBounds === 'function') {
      loc = layer.getBounds().getCenter();
      loc.layer = layer;            
      retRecords[ layer.feature.properties[propName] ] = loc;
    } else {
      console.warn("Unknown type of Layer");
    }
  }
  else {
    //throw new Error("propertyName '"+propName+"' not found in feature");
    console.warn("propertyName '"+propName+"' not found in feature"); 
  }
}
else if(layer instanceof L.LayerGroup)
{
  layer.eachLayer(function (layer) {
    self._searchInLayer(layer, retRecords, propName);
  });
}
  }
catch(err) {

}
},

如何在L.control.layers关闭layerGroup时使Leaflet-Search工作？

1 个答案: