如何强制 Kendo UI Map 中的图块图层重新加载其图块？

Question

我有一个 Web 应用程序，它使用 Kendo UI Map 显示地理地图，另外 2 个图层显示地理围栏和标记（气泡）。这些图块通常由 Google 提供，但也可以使用 OSM 等其他来源。我也希望能够暂时（比如 15 分钟）显示交通密度。据我所知，不可能从 Google 检索流量密度数据作为单独的数据，但可以在其之上渲染普通的 Google 图块并显示流量数据。

这有效。不幸的是，如果用户不缩放或平移地图，图块图层将是静态的，因此不久之后交通数据就会过时。所以我希望能够定期更新图块。

我认为我只需要更改地图底层（带有地理图块的图层）的 URL 即可。但可惜的是，事情似乎并没有那么简单。我费了九牛二虎之力才让它正常工作，向 ChatGPT 寻求帮助（完全没用），但无济于事。

导致图块层重新加载的 JavaScript 函数如下所示：

var baseUrl = "foo";

function refreshTrafficLayer(jsMapSelector) {

    var kMap = $(jsMapSelector).data("kendoMap");
    if (kMap) {
        if (trafficLayerEnabled) {

            var currentLayers = kMap.options.layers;
            var trafficLayer = kMap.layers[TRAFFICLAYER];

            // load the initial url that was supplied at construction time
            if (baseUrl == "foo") {
                baseUrl = trafficLayer.options.urlTemplate;
            }

            // force a unique url to avoid caching
            url = baseUrl + "&timestamp=" + new Date().getTime();
            
            // I have tried this:
            trafficLayer.options.urlTemplate = url;

            //and I have tried this:
            var newTileLayer = {
                type: "tile",
                urlTemplate: url
            };
            currentLayers[TRAFFICLAYER] = newTileLayer;
            
            // And tried several other variations on creating a new
            // layer and inserting it into the map, but none works

            // Set the updated layers options to the map
            kMap.setOptions({
                layers: currentLayers
            });

            // with or without this doesn't make any difference
            kMap.trigger("reset");
        }
    }
}

我还在互联网上搜索了有关在 Kendo UI Map 中重新加载图块的任何内容，但一无所获。如何强制重新加载图块层？

注意：我知道解决方法是重新加载整个页面，这将导致生成新地图。但是我想避免这种情况，因为地图不是页面上显示的唯一内容，重新加载整个页面会导致令人不安的闪烁。

/编辑：如果我可以强制重新加载 all 图层而不仅仅是平铺图层，那也可以。

Answer 1

看起来，当调用

setOptions

时，地图将重用初始加载时的缓存图像。如果您有一个绑定到数据源的图层，调用

dataSource.read()

将强制更新，但在当前情况下，我能想到的唯一选择是销毁地图，然后使用相同的选项重新初始化它。

let map = $("#map").getKendoMap();
let options = map.options;
map.destroy()
$("#map").kendoMap(options);

如果您检查此示例中的网络请求，则单击刷新按钮时地图似乎会获取不同的图块（不会显示图块，因为端点不希望时间戳作为 URL 的一部分，但重要的是地图未使用缓存的图块图像）。