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

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();
            }
          })
   }

通过这种方法，可以对地图中的某几个source进行刷新，可以很大程度上，减少网络请求，避免了对影像等图层的刷新。目前在Mapbox GL JS2以上版本测试可用，之前的版本没有测试过。