javascript - 有一个 xyztileLayer 只覆盖世界的某个区域

Question

我想将以下 xyz 图 block 图层叠加到传单 map 上。

http://weatheroo.net/radar/data/2019/07/15/18/40/{z}/{x}/{y}.png

这是德国的天气雷达复合 Material ，这就是它只覆盖中欧的原因。

边界框:

new L.LatLng(45.530, 1.07006),
new L.LatLng(55.7750629, 17.095451751)

https://jsfiddle.net/6jtr38e7/

图像出现，但不适合边界。 感谢您的支持。

Answer 1

我看到的主要问题是示例选项中缺少模板参数。

您的网址模板字符串有 5 个额外属性:year、month、day、hour 和 分钟。您需要将它们包含在 TileLayer 选项中。磁贴服务器似乎需要两位数的数字来表示这些属性，因此请确保以正确的格式传递它们。这是一个例子:

L.tileLayer('http://weatheroo.net/radar/data/{year}/{month}/{day}/{hour}/{minute}/{z}/{x}/{y}.png', {
    detectRetina: false,
    minZoom: 1,
    maxZoom: 6,
    minNativeZoom: 1,
    maxNativeZoom: 6,
    zIndex: 830,
    className: 'tiles_radar',
    crossOrigin: false,
    year: "2019",
    month: "07",
    day: "14",
    hour: "18",
    minute: "40",
    bounds:[
        new L.LatLng(45.530, 1.07006),
        new L.LatLng(55.7750629, 17.095451751)
    ]
})

如果您需要上述属性的动态值，您可以使用函数来获取所需的值。下面是一个使用当前日期和时间并将相关日期和时间格式化为两位数以生成图 block url 的示例:

L.tileLayer('http://weatheroo.net/radar/data/{year}/{month}/{day}/{hour}/{minute}/{z}/{x}/{y}.png', {
    detectRetina: false,
    minZoom: 1,
    maxZoom: 6,
    minNativeZoom: 1,
    maxNativeZoom: 6,
    zIndex: 830,
    className: 'tiles_radar',
    crossOrigin: false,
    year: () => (new Date()).getFullYear().toString(),
    month: () => `0${((new Date()).getMonth() + 1)}`.slice(-2),
    day: () => `0${((new Date()).getDate())}`.slice(-2),
    hour: `0${((new Date()).getHours())}`.slice(-2),
    minute: `0${((new Date()).getMinutes())}`.slice(-2),
    bounds:[
        new L.LatLng(45.530, 1.07006),
        new L.LatLng(55.7750629, 17.095451751)
    ]
})

还有一件事:我注意到 weatheroo.net 不支持 https，但 jsfiddle 将所有图 block url 重定向到 https。因此，即使更新选项后，该示例也无法在 jsfiddle 中运行。在本地或使用其他服务尝试。