Mapbox 动画过程中动态矢量瓦片禁止发送请求

背景

我们项目中数据基本用的全是动态矢量瓦片，选择此方案原因是客户方希望自己采集的数据能实时更新到应用地图中，且数据变更是非常频繁，而我们的应用地图的样式也是根据客户方随时调整，面对频繁的需求变更，针对此背景，我们使用动态瓦片，实时加载实时切片，在采集时，采集哪个数据，就加载对应的数据源，其量不会有什么性能压力，而在配全要素专题数据作为底图时，压力就上来，随随便便浏览几下就是上千甚至上网的请求，即时底层做了请求调度，服务器和浏览器的性能大大降低。

解决方案

针对上述背景中描述的问题，服务端对每个数据图层做了数据缓存，减少数据库的压力；客户端改造思路是在地图浏览过程中不在发送矢量瓦片请求，地图停止动态浏览后再根据当前视口发送请求，具体方法如下：

1、修改mapbox部分源码，地图对象新增参数控制地图浏览过程中是否加载数据开关，我是在打包后的文件中修改的，直接搜索 class Map定位到地图类对应的代码部分，在构造类中新增参数_isMoveStopRequest，默认false；

地图调用方式：

const mapObj = new mapboxgl.Map({
        container: "tcmap",
        style: style ? style : _config.style,
        attributionControl: false,
        localFontFamily: "Microsoft YaHei Bold",
        localIdeographFontFamily: "Microsoft YaHei Bold",
        isMoveStopRequest: true, // 参数，控制地图浏览过程中是否调用动态瓦片
        // 其它参数
      });

2、调整数据缓存更新机制

在Style类中搜索函数_updateSources，修改数据更新逻辑

_updateSources(transform) {
        const updateAllSource = ()=>{
            for (const id in this._sourceCaches) {
                this._sourceCaches[id].update(transform);
            }
        }

        if(this.map._isMoveStopRequest){
            if(this.map.isMoving()){
                for (const id in this._sourceCaches) {
                    this._sourceCaches[id]._source.type !== "vector" && this._sourceCaches[id].update(transform);
                }
            }else {
                updateAllSource() 
            }
        }else {
            updateAllSource()
        }
    }