cesium大屏效果提升_cesium 效果

1、灵感：由于我工作项目中经常会利用自己的服务单独发布一个地图影像（图一），可能我们会给个地图一个背景颜色，来使之变得好看点，但是总感觉差点意思。过于单调，然后再Mars3D官方发现一效果比较中意Mars3D突出行政区显示，于是自己复现了一下（图二）

其实代码很简单，就是绘制圆形，然后贴圆图片纹理

let rotation = Cesium.Math.toRadians(50)
function getRotationValue() {
        rotation += 0.005
        return rotation
}    
function initCircle(radius: number, image: string, scale = 1.0) {
 
        var circleEntity: any = viewer?.entities.add({
            name: 'Circle',
            position: Cesium.Cartesian3.fromDegrees(111.221492, 34.929269),
            ellipse: {
                semiMinorAxis: radius * scale, // 圆的半短轴（单位：米）
                semiMajorAxis: radius * scale, // 圆的半长轴（单位：米）
                material: new Cesium.ImageMaterialProperty({
                    image: image,
                    transparent: true
 
                }),
                height: 0.0, // 圆的高度
                extrudedHeight: 0.0, // 圆柱的高度，如果需要立体效果可以设置非0值
 
            }
        });
        console.log(circleEntity, 'circleEntity');
        viewer?.zoomTo(circleEntity)
 
    }
    function addCircle1() {
 
        initCircle(500000, calibPng, 1.1)
        initCircle(500000, calibValuePng, 1.0)
        initCircle(500000, calibDirPng, 1.0)
        initCircle(500000, anhuiPng, 0.8)
 
        var circleEntity: any = viewer?.entities.add({
            name: 'Circle',
            position: Cesium.Cartesian3.fromDegrees(111.221492, 34.929269),
            ellipse: {
                semiMinorAxis: 500000 * 1.3, // 圆的半短轴（单位：米）
                semiMajorAxis: 500000 * 1.3, // 圆的半长轴（单位：米）
                material: new Cesium.ImageMaterialProperty({
                    image: ringPng,
                    transparent: true
 
                }),
                height: 0.0, // 圆的高度
                extrudedHeight: 0.0, // 圆柱的高度，如果需要立体效果可以设置非0值
                rotation: new Cesium.CallbackProperty(getRotationValue, false),
                stRotation: new Cesium.CallbackProperty(getRotationValue, false),
            }
        });
    
    }

图片我就不附上了，找UI设计吧