如何强制Kendo UI Map的瓦片图层重新加载瓦片？

核心思路 #

直接操作目标瓦片图层的tileSource对象，更新URL模板并清除缓存，最后触发图层重绘——而非通过修改地图options间接操作，这是解决瓦片不刷新问题的关键。

修正后的代码 #

var baseUrl = "foo";

function refreshTrafficLayer(jsMapSelector) {
    var kMap = $(jsMapSelector).data("kendoMap");
    // 提前退出无效场景，简化逻辑
    if (!kMap || !trafficLayerEnabled) return;

    var trafficLayer = kMap.layers[TRAFFICLAYER];
    // 确保目标图层为瓦片类型
    if (!trafficLayer || trafficLayer.type !== "tile") return;

    // 初始化保存原始URL模板
    if (baseUrl === "foo") {
        baseUrl = trafficLayer.options.urlTemplate;
    }

    // 生成带时间戳的URL，兼容已有参数的情况
    var timestamp = new Date().getTime();
    var paramSeparator = baseUrl.includes("?") ? "&" : "?";
    var updatedUrl = baseUrl + paramSeparator + "timestamp=" + timestamp;

    // 更新tileSource的URL模板
    trafficLayer.tileSource.options.urlTemplate = updatedUrl;
    // 清除已加载的瓦片缓存，避免浏览器复用旧资源
    trafficLayer.tileSource.clearCache();
    // 强制图层重新请求瓦片并渲染
    trafficLayer.refresh();
}

为什么之前的方法无效 #

• 直接修改trafficLayer.options.urlTemplate或替换currentLayers中的图层配置后调用setOptions，Kendo UI Map不会主动销毁旧图层实例并创建新实例，因此无法触发瓦片重新加载。
• 仅调用kMap.trigger("reset")不会清除瓦片缓存，浏览器仍会复用已加载的旧瓦片。

补充说明 #

• 若使用的Kendo UI版本较旧，trafficLayer.refresh()方法不存在，可尝试调用kMap.trigger("reset")替代，但需确保已执行clearCache()。
• 若需要强制所有图层重新加载，可遍历kMap.layers，对每个瓦片图层执行上述更新缓存和重绘的操作。

内容的提问来源于stack exchange，提问作者Lex W.