Mapbox GL JS主动刷新地图的方法

最新推荐文章于 2023-12-01 17:10:24 发布

原创最新推荐文章于 2023-12-01 17:10:24 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#GIS #Mapbox #瓦片 #刷新 #缓存

MapBox 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了在MapboxGLJS中处理矢量瓦片刷新的问题，包括使用官方API `map.triggerRepaint()` 刷新整个地图，以及通过访问内部API针对性地刷新特定source。通过`sourceCaches`对象可以清除指定source的缓存，减少不必要的网络请求，提高用户体验。这两种方法适用于MapboxGLJS V2以上的版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mapbox使用的矢量瓦片技术有很多的有点，如：可以动态设置样式、在不同比例尺下清晰显示，数据量小等。但在Web开发时，有一个诟病就是矢量瓦片的刷新问题。我们更改了一个矢量瓦片后，如何让浏览器主动去请求新的瓦片，而不是周期性地去请求。数据源更新后，如何快速显示，是一个影响用户体验的东西。Mapbox有自己的缓存机制，与完全靠浏览器的缓存机制不同。如何高效地刷新瓦片，这里提供两种方法：

Mapbox GL JS V2以上版本

Mapbox GL JS 2.0以上版本提供了相关的API

map.triggerRepaint();

triggerRepaint会对地图上全部图层进行刷新。可以参考官方文档

通过内部API刷新

这个方法也是同事告诉我的，具体写法吐下

const style = map.style;
const sourceCaches = style._sourceCaches;
if(sourceCaches){
          ["source名称1","source名称2"].forEach(item=>{
            const cache = sourceCaches[`other:${item}`];
            if(cache){
              cache.clearTiles();
            }
          })
   }