cesium-动态添加entity闪白材质

此问题出现在entity需要贴图时，由于cesium在生成entity时会默认指定白色材质，在entity生成完成之后才开始贴图逻辑，因此导致，每次鼠标点击生成entity时，有一个闪白的效果 cesium-动态添加entity闪白材质

要解决这个问题有两种思路，一种是，当entity材质贴完之后再进行显示，当然要准确做到这一点需要修改cesium底层

简单一点，我们可以设置定时器来控制entity的显示即可。

一种方式：

var sStartFlog = false;
setTimeout(function() {
    sStartFlog = true;
}, 700);

//当变700毫秒为7的时候，仍然可以看见闪白的效果

semiMinorAxis: new Cesium.CallbackProperty(function() {
    if (sStartFlog) {
        s1 = s1 + data.circleSize / 20;
        if (s1 >= data.circleSize) {
            s1 = data.circleSize;
        }
    }
    return s1;
}, false),
semiMajorAxis: new Cesium.CallbackProperty(function() {
    if (sStartFlog) {
        s2 = s2 + data.circleSize / 20;
        if (s2 >= data.circleSize) {
            s2 = data.circleSize;
        }
    }
    return s2;
}, false),

完成代码：

let viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
        url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles"+"&tk=ebf64362215c081f8317203220f133eb",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        maximumLevel:18, //天地图的最大缩放级别
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false
    }),
    selectionIndicator : false,
    infoBox : false,
    //terrainProvider: Cesium.createWorldTerrain(),
    shouldAnimate : true,
    baseLayerPicker:true,
    // selectedImageryProviderViewModel:cs[7],

});

//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
    Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56); //Rectangle(west, south, east, north)

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(117.21579, 31.80749, 15000.0),

});
var rotation = Cesium.Math.toRadians(30);
function getRotationValue() {
    rotation += 0.05;
    return rotation;
}

let entity= viewer.entities.add({
    id: "_2",
    name: "椭圆",
    position: Cesium.Cartesian3.fromDegrees(117.21579, 31.80749,150000.0),
    ellipse: {
        semiMinorAxis :1000, //直接这个大小 会有一个闪白的材质；直接加载不会出现这个问题
        semiMajorAxis : 1000,
        material: "./circle2.png",
        //rotation: new Cesium.CallbackProperty(getRotationValue, false),
        stRotation: new Cesium.CallbackProperty(getRotationValue, false),
        zIndex: 2,
    }
});

viewer.trackedEntity=entity
data={
    circleSize:2000,
    maxR:2000,
    deviationR:1
}



var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
   var  s1=0.001
    var s2=s1
    var sStartFlog = false;
    setTimeout(function() {
        console.log("延迟开放加载标志")
        sStartFlog = true;
    }, 70);
    var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5); //四舍五入 小数点后保留五位
    var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); //四舍五入  小数点后保留五位
    // var height = Math.ceil(viewer.camera.positionCartographic.height);   //获取相机高度
    if (cartesian) {
        viewer.entities.removeById("_2");
        console.log("添加entity")
       let en= viewer.entities.add({
            id: "_2",
            name: "椭圆",
            position: Cesium.Cartesian3.fromDegrees(lon, lat,150000.0),
            ellipse: {
                semiMinorAxis :new Cesium.CallbackProperty(function() {
                    console.log("半径回调")
                    if (sStartFlog) {
                        s1 = s1 + data.circleSize / 20;
                        if (s1 >= data.circleSize) {
                            s1 = data.circleSize;
                        }
                    }
                    return s1;
                }, false), //直接这个大小 会有一个闪白的材质 因为cesium材质默认是白色 所以我们先将大小设置为0
                semiMajorAxis :new Cesium.CallbackProperty(function() {
                    if (sStartFlog) {
                        s1 = s1 + data.circleSize / 20;
                        if (s1 >= data.circleSize) {
                            s1 = data.circleSize;
                        }
                    }
                    return s1;
                }, false),
                material: "./circle2.png",
                stRotation: new Cesium.CallbackProperty(getRotationValue, false),
                zIndex: 2,
            }
        })

    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

cesium-动态添加entity闪白材质

相关推荐