Mapbox GL JS active map refresh method

Mapbox The vector tile technology used has many advantages , Such as ： You can set the style dynamically 、 Clearly displayed at different scales , Small amount of data, etc . But in Web When developing , One criticism is the refresh of vector tiles . After we change a vector tile , How to make the browser actively request new tiles , Instead of periodically asking . After the data source is updated , How to quickly display , It is a thing that affects the user experience .Mapbox It has its own caching mechanism , It is different from the caching mechanism that depends entirely on the browser . How to refresh tiles efficiently , There are two ways ：

Mapbox GL JS V2 Above version

Mapbox GL JS 2.0 The above version provides relevant API

map.triggerRepaint();

triggerRepaint All layers on the map will be refreshed . You can refer to Official documents

Through the interior API Refresh

This method is also what my colleagues told me , Specifically, spit it out

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

In this way , You can check some of the maps source refresh , To a large extent , Reduce network requests , Avoid refreshing layers such as images . Currently in Mapbox GL JS2 The above version tests are available , The previous version has not been tested .