随笔 - 87, 文章 - 0, 评论 - 1, 阅读 - 95666

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

功能展示就是这样的:

话不多说直接上方法：（因为做项目的时候封装了一个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);
       
    }