cesium 局部自定义底图图片更改

今天遇见一个需求就是根据按钮选择切换局部的底图样式，设计那边提供的底图是一张图片，然后根据不同的选择，切换不同的图片

功能展示就是这样的:

 

话不多说直接上方法：（因为做项目的时候封装了一个class类，cesium的初始化以及各种功能都是在类中写的，下面的方法就是添加自定义图片地图的方法，this.viewer是cesium实例）

addImage(url) {
        if (!url) return
　　　　　// 为了避免图层叠加效果不好，所以每一次叠加新的图片的时候都会清除上一次叠加的图片
        if (this.myImageLayer) {
            this.viewer.imageryLayers.remove(this.myImageLayer);
        }

        const provider = new Cesium.SingleTileImageryProvider({
　　　　    // url 是底图图片的地址，保存在本地项目的文件夹中，通过require的方式引入地址

            url: url,
　　　　　　// retangle 中的那个矩形，分别是左下角，右上角的经纬度，记住一定要找专业工具定位，否则手动调整你永远也调整不齐和下面的局部底图轮廓对不上
            rectangle: new Cesium.Rectangle.fromDegrees(110.8477134921535, 23.4309905034903, 111.6621391816419, 24.1719699011482),
        })
　　　　　　// 下面这行代码也很重要哈，没有这行代码页面就没有展示的效果
        this.myImageLayer = this.viewer.imageryLayers.addImageryProvider(provider);
       
    }

* 要特别说明一下提供的底图要透明背景的，否则就会带着背景色，渲染上去就是一个矩形并且是带着背景色的矩形，哈哈哈哈哈，那时候你还会莫名奇妙找原因