javascript - 使用 LEaflet 查看多个 geoJSon 文件

Question

我创建了一个 JavaScript 模板，用于将 GEOJson 文件加载到传单 map 上。这些文件可以是多边形、多多边形、标记、图标等。我的问题是如何能够 fitBounds 所有这些文件？当我现在调用 fitBounds 时，仅使用第一个文件，其余文件将被忽略。

我基本上所做的是在我的主 HTML/JavaScript 文件中，我只需要提供一个文件名和一个我想要作为覆盖层的名称，并且可以有一个或多个。在我的模板 javascript 中，我使用

加载所有这些文件

    var myStuff = L.geoJson(data,
              {
                style:mystyle},
              OnEachFeature, pointToLoayer
              //more complex but just to give a better understanding...
               });
                myStuff.addTo(map);
                map.fitBounds(myStuff);

除了 fitBounds 部分之外，我尝试做的所有事情都有效。 “数据”是我正在加载的文件，但 fitBounds 只影响第一个。有人有主意吗？

如果有人感到困惑，我可以提供更多详细信息...

Answer 1

首先，您的代码中有一个错误:fitBounds 采用 L.LatLngBounds论据

所以你的代码应该是:

map.fitBounds(myStuff.getBounds());

如果你想使用fitBounds，你只能有一个GeoJSON层

但是，您可以将数据添加到图层

var myStuff = L.geoJson(data1);
myStuff.addData(data2);
myStuff.addData(data3);

myStuff.addTo(map);
map.fitBounds(myStuff.getBounds());

如果你绝对想保留很多层，你必须自己计算边界矩形..

var myStuff1 = L.geoJson(data1);
var bounds1 = myStuff1.getBounds();
var myStuff2 = L.geoJson(data2);
var bounds2 = myStuff2.getBounds();

myStuff.addTo(map);
map.fitBounds(bestBounds(bounds1, bounds2));

function bestBounds(bounds1, bounds2) {
// clever computation to get west,east,north,south
}