使用 MapBox.js 独立添加 TileMill 交互式图层时不起作用

Question

我有一个学生正在使用 MapBox.js (v1.6.0) 来显示他们在 TileMill 中制作的一些图块。这些图块使用 TileMill (documentation) 提供的工具提示功能来添加一些交互性。我的学生还使用 MapBox Streets 图层来提供道路等的详细视图。问题是，当我在地图中同时使用这两个图层时，瓷砖的交互性不起作用。

这是不起作用的代码：

var map = L.mapbox.map("map");

var tilesOSM = L.mapbox.tileLayer("username.id1");
var tilesTileMill = L.mapbox.tileLayer("username.id2");

map
    .addLayer(tilesOSM)
    .addLayer(tilesTileMill)
    .setView(L.latLng(61, -160.5), 4)
    .setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));

我们已经尝试了这段代码的多次迭代，但我们让它工作的唯一方法是使用 L.mapbox.map(3) 方法，然后使用 L.map.addLayer( ） 功能。

var map = L.mapbox.map("map", "username.id2", {});

map
    .addLayer(L.mapbox.tileLayer("username.id1"), true)
    .setView(L.latLng(61, -160.5), 4)
    .setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));

我的问题是三个方面。

1. 这两种实现有什么区别？
2. 为什么使用 L.mapbox.tileLayer() 创建的 tileLayer 与使用 L.mapbox.map(3) 创建并自动添加的不同？
3. 是否有计划在 API 的未来更改中解决这种不连续性，或者是否会在 TileMill 2 中放弃对交互式磁贴的支持？

Answer 1

这两种实现有什么区别？

如果您签出what L.mapbox.map does internally，它会为您指定的图层添加一个gridLayer 和gridControl。基本上，地图构造函数会做出它可以做出的所有安全假设，并自动进行它们以方便使用。

为什么使用 L.mapbox.tileLayer() 创建的 tileLayer 与使用 L.mapbox.map(3) 创建和自动添加的不同？

相同 - 当您使用 L.mapbox.map(3) 时，混合了一个 gridLayer 和 gridControl，这就是使事物具有交互性的原因。

是否有计划在 API 的未来更改中解决这种不连续性

与 API 设计相比，这并不是一个不连续性：我们决定将 tileLayers 与 gridLayers 和 gridControls 分离，以便您可以混合和匹配它们 - 如果您想切换交互功能来自哪个层，或者在不禁用交互功能的情况下禁用交互性瓦片层，你可以。

TileMill 2 中是否会放弃对交互式图块的支持？

不，您可以使用 TileMill 2 并查看它如何支持交互性。我们不会将其移除或逐步淘汰，但矢量图块将有新的交互方法。

对于你的第二个例子，你会想要这样的：

var map = L.mapbox.map("map", "username.id2", {});
var gridLayer = L.mapbox.gridLayer("username.id1").addTo(map);
var gridControl = L.mapbox.gridControl(gridLayer).addTo(map);

map
    .addLayer(L.mapbox.tileLayer("username.id1"), true)
    .setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));