解决mapBox切换底图图层会消失问题解决mapBox切换底图图层消失原因 mapbox-gl 中的layers和

消失原因

mapbox-gl 中的layers和sources是在style中绑定的，当直接以字符串的形式修改底图的时候，相关的layers和sources会被清空;

解决方法(不用再重新添加图片)

步骤 1.定义全局变量记录当前底图的id；

2.获取新底图数据；

3.通过map.getStyle()获取图层信息保存到变量中；

4.用新底图sources和layers替换旧底图sources和layers，其他图层都需要保留；

5.用map.setStyle(newLayersInfo)；

6.把新底图id存入定义记录当前底图的全局变量中；

  /**
     * 底图切换
     * @param newBaseInfo 新底图
     * @param oldBaseId 旧底图id
     */
    cutBasemap(newBaseInfo,oldBaseId){
        const newLayersInfo={...newBaseInfo}
        const currentStyle = MAP_OBJ.getStyle();
        newLayersInfo.sources = Object.assign(
            {},
            currentStyle.sources,
            newLayersInfo.sources
        );
        currentStyle.layers= currentStyle.layers.filter(v=>v.id!==oldBaseId)
        newLayersInfo.layers=[...newLayersInfo.layers,...currentStyle.layers]
        MAP_OBJ.setStyle(newLayersInfo);
        window.mapBase=newBaseInfo.layers.id
    }