使用循环在Leaflet上搜索数据

Question

是否可以从不同的层和不同的propertyName查找数据？我有几个具有不同属性的GeoJSON数据文件。目前，我只能搜索一个GeoJSON。

对于循环和调用数据，我正在使用以下代码：

maplink_var = [source1.geojson,source2.geojson,etc]; 

var <?= $i['maplink_var']; ?> = new L.GeoJSON(<?= $i['maplink_var']; ?>, {
  style: function(feature) {
      ...
    },
  onEachFeature: function(feature, marker) {
      ...
    }
});

及以下是查找数据的代码：

var searchControl = new L.Control.Search({
  layer: source1,source2,source3,
  propertyName: ['propNameSource1','propNameSource2','propNameSource3'],
  marker: false,
  moveToLocation: function(latlng, title, map) {
    var zoom = map.getBoundsZoom(latlng.layer.getBounds());
    map.setView(latlng, zoom); // access the zoom
  }
});

searchControl.on('search:locationfound', function(e) {
  e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
  if(e.layer._popup) e.layer.openPopup();
}).on('search:collapsed', function(e) {
  featuresLayer.eachLayer(function(layer) { 
    featuresLayer.resetStyle(layer);
  }); 
});

map.addControl( searchControl ); 

如果在属性名称上给出数组，在加载时堆栈，并且没有任何数据出现，则会出现错误。

Answer 1

如documentation中所述，layer是L.LayerGroup。因此，您可以像这样（source）传递多个层：

var searchControl = new L.Control.Search({
  layer: L.layerGroup([source1, source2, source3]),
  ...
})

与propertyName一样：所有GeoJSON文件的属性名称必须相同。创建L.GeoJSON（未测试）时，请尝试以下操作：

onEachFeature: function(feature, layer) {
  const p = feature.properties
  p.title = p.propNameSource1 || p.propNameSource2 || p.propNameSource3 //create new property 'title'
}

title是propertyName的默认设置，因此创建L.Control.Search时甚至不需要设置它。