how to add imagery layer at a certain height

CesiumJS
1

When Initialization I use a polygon entity as my ‘basemap’, it has extrudedHeight property.

I have two questions:

1 I want to add a road imagery tile layer, how to control the layer on the polygon entity

2 I have other tile imagery basemap, when I switch the basemap between polygon entity and tile imagery , how can I control the z-value of point or polyline, I tried first removing then adding, but I have 25 000 points (all line points sum), It’s low efficiency , so how can I control z-value.

thanks

QQ图片20170729224335.png
QQ图片20170729224335.png1060×750 17.6 KB

2

Hello,

Can you provide a code sample for more context? I do not believe you can add imagery onto the polygon entity itself.

Thanks,

Gabby

3

thank you，gabby.

I can’t add imagery onto the polygon, it is my first question.

there is my code , I hide all background, and add an marker entity.

my questions:
1 how to add imagery onto the polygon( had extrudedHeight property)
2 when I hide polygon entity basemap, how can I change other’s height added on the basemap except removing then adding.

var transparentBaseLayer = new Cesium.SingleTileImageryProvider({
    url : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII="
});
var viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false,
    animation:false,
    fullscreenButton:false,
    geocoder:false,
    homeButton:false,
    infoBox:false,
    sceneModePicker:true,
    selectionIndicator:false,
    timeline:false,
    navigationHelpButton:false,       
    navigationInstructionsInitiallyVisible:false,
    sceneMode:Cesium.SceneMode.SCENE3D,//COLUMBUS_VIEW,
    skyBox : false,
    skyAtmosphere : false,
    contextOptions : {
        webgl : { 
          alpha : true,
          preserveDrawingBuffer:true
      }
    },
    //camera:new Cesium.Camera(scene),
    imageryProvider: transparentBaseLayer
    //terrainProvider: terrainProvider
});

viewer._cesiumWidget.creditContainer.style.display='none';//logo
setView();

viewer.scene.screenSpaceCameraController.enableLook = false;

viewer.scene.fog.enabled=false;
viewer.screenSpaceEventHandler.setInputAction(function(){},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );

viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
viewer.scene.fxaa = false;

var scene = viewer.scene;

var ellipsoid = scene.globe.ellipsoid;
var entity = viewer.entities.add({
    label : {
        show : true,
        outlineColor: Cesium.Color.BLACK,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        style : Cesium.LabelStyle.FILL_AND_OUTLINE
    }
});

function setView(){
    viewer.camera.setView( { 
        destination : Cesium.Cartesian3.fromDegrees(116.28, 39, 100000),
        orientation: {
            heading : Cesium.Math.toRadians(-0), // east, default value is 0.0 (north)
            pitch : Cesium.Math.toRadians(-40),    // default value (looking down)
            roll : 0.0                             // default value
        } 
    });
}


var ellipsoid = viewer.scene.globe.ellipsoid;
 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 handler.setInputAction(function(pos){
     console.log(viewer.selectedEntity);
     var cartesian = viewer.camera.pickEllipsoid(pos.position, ellipsoid);
     console.log(cartesian);
     if (cartesian) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
      
     }
 },Cesium.ScreenSpaceEventType.LEFT_CLICK);


var source = new Cesium.GeoJsonDataSource('bj');
viewer.dataSources.add(source);
source.load('./110100.json', {
  strokeWidth: 2,
  markerSymbol: '?'
}).then(function(){
    var p = source.entities.values;  
    for (var i = 0; i < p.length; i++) {
         p[i].polygon.extrudedHeight = 5000;
         //p[i]._show = false;
         var color = Cesium.Color.fromRandom({
            alpha : 1.0
         });
         var colorList = p[i].properties.COLOR;             
         p[i].polygon.material = Cesium.Color.fromBytes(17,49,167,255);
         p[i].polygon.outlineColor = Cesium.Color.fromBytes(51,147,201,255);
         p[i].polygon.outlineWidth = 5;
       
    }
});



var pinBuilder = new Cesium.PinBuilder();

var pos = [ 116.36231409957851, 39.92141312293574 ];
var _entity = new Cesium.Entity({
    position : Cesium.Cartesian3.fromDegrees(pos[0], pos[1],5000),
    show:true,
    billboard : {
        text: 'test',
        show:true,
        font:'12px 微软雅黑',
        showBackground:true,
        image : './markerblue.png',
        heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
        pixelOffsetScaleByDistance:new Cesium.NearFarScalar(1.5e2, 0.0, 8.0e6, 10.0),
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM // default: CENTER
       
    }
});
_entity.addProperty("testp");
_entity.testp = 'abc';
viewer.entities.add(_entity);

在 2017年8月1日星期二 UTC+8下午9:42:11，Gabby Getz写道：

4

Hello,

Maybe our Visualizing Spatial Data Tutorial will help: https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/#heights-and-extrusions