javascript 宣传页显示缩小时的两个平铺图层

gcuhipw9  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(242)

我试图添加两个瓷砖层和一个控制它们之间的切换。下面是代码:

const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
  attribution: 'OpenCycleMap'
});
const layer2: L.TileLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'OpenStreetMap'
});

L.map(SOME_DIV, {
  center: [54.1109, -115.5322],
  zoom: 5,
  layers: [layer1, layer2]
});

const baseMaps: Record<string, L.TileLayer> = {
  'Layer2': layer2,
  'Layer1': layer1
};

L.control.layers(baseMaps).addTo(this.__map);

当Map初始化时,我在第1层覆盖它之前短暂地看到了第2层。此外,如果缩小,第2层会在第1层覆盖它之前渲染。我注意到右下角的属性文本列出了两个属性。如果我在控件中选择一个,它只显示一个属性,问题就消失了。
因此,似乎两层都添加了,第1层在顶部。首先加载第2层,然后加载第1层。我希望只有一个层显示默认情况下与控制之间切换。
下面是一个演示:https://gifyu.com/image/SuuzJ

smtd7mpg

smtd7mpg1#

我通过在Map初始化时只添加一层来解决这个问题。
有更好的办法吗?

相关问题