Question

我有2个基本层（map和satellite），用户可以在两个基本层之间进行切换。卫星图层的最大缩放高2倍。我正在使用Leaflet提供的L.control.Layers()来管理图层

var mapLayer = L.tileLayer('map-tiles.example.com/{z}/{x}/{y}.png', {
    maxZoom: 18,
})

var satelliteLayer = L.tileLayer('satellite-tiles.example.com/{z}/{x}/{y}.png', {
    maxZoom: 20,
})

var baseLayers = {
    'Map': mapLayer,
    'Satellite': satelliteLayer
}

var layerControls = L.control.layers(baseLayers).addTo(map);

如果用户在卫星视图中放大到19或20，则只有在放大到18或更低时，他才能切换回地图图层（单选按钮处于禁用状态）。

我希望用户即使在缩放19或20时也可以切换到地图图层。当用户切换到地图图层时，缩放比例将设置为18。

是否可以通过Leaflet的图层控件实现此目的？还是我必须构建一个自定义图层控件？

Answer 1

是否可以通过Leaflet的图层控件实现此目的？

不是默认行为，不是。如果您选中relevant portion of the source code，则会看到L.Control.Layers 总是在图层超出其min / {{1时，会禁用复选框/单选按钮}}范围。

还是我必须构建自定义图层控件？

是的，您可以maxzoom中的create your own subclass禁用此功能，用不执行任何操作的功能替换相关方法：

L.Control.Layers

您可以检查working example in this plunkr。

Answer 2

让// demo.ts type Fn = (obj) => string; interface Person { name: string; } interface Monster { size: string; } const somePerson: Person = { name: "Bob" }; const someMonster: Monster = { size: "HUGE" }; sayHello(someMonster); // ERROR, 'name' is missing in type. Sure, expected. // sayHello requires an obj of type Person export function sayHello(obj: Person): string { return `Hello ${obj.name}`; } // Simple function that runs any function, passing obj to it export function runAnyFunction<T>(fn: Fn, obj: T): void { const res = fn(obj); console.log(res); } // Person has name, this works runAnyFunction<Person>(sayHello, { name: "Bob" }); // I'm passing sayHello, which should require an object with a `name` // but it does not error runAnyFunction<Monster>(sayHello, { size: "HUGE" });在19-20缩放中可选的一种简单解决方法是在18处使用图块图层maxNativeZoom选项，并将mapLayer增加到20。

然后，如果您仍然希望在选择maxZoom时将缩放比例自动缩小至18，请在地图"baselayerchange"事件上使用侦听器，选中mapLayer并进行修改（{{ 1}}）。

传单-允许以高于最大缩放的比例切换到另一个基本层

2 个答案: