billboard's position is not the position of mouse click when i draw at cesium with mouse click

CesiumJS
1

I'm trying to draw in cesium with mouse click.But there is something wrong when i get the position of mouse click to add entity or primitive.If i set terrainProvider will cause problems,if not,it's ok

mouseHandler.setInputAction(function(movement) {
            if(movement.position != null) {
                var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid);
               
                if (cartesian) {
                  var cartographic = ellipsoid.cartesianToCartographic(cartesian);
                // 将弧度转为度的十进制度表示
                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                var height = that.viewer.scene.globe.getHeight(cartographic);
                
                /**
                          *if i use this,the entity's position is not the
                        position of mouse click
                          */
                var e = that.viewer.entities.add({
                  position : Cesium.Cartesian3.fromDegrees(longitude , latitude),
                  point : {
                    color : Cesium.Color.SKYBLUE,
                    pixelSize : 10,
                    outlineColor : Cesium.Color.YELLOW,
                    outlineWidth : 3,
                    heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
                      }
                  });

/*
*if i use this,the billboard will can't see when i zoom to big level
*/
      var b = new Cesium.BillboardCollection();
        this.scene.primitives.add(b);
        b.add({
            show : true,
            position : Cesium.Cartesian3.fromDegrees(longitude,latitude),
            image: this._options.iconUrl,
            heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
           /*
            *//if i use this parameter，this billboard can always see but if i change camera the position will change too
            *disableDepthTestDistance : Number.POSITIVE_INFINITY*/
          });
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Cesium version is 1.39
thanks for help

2

Hi,

To get an accurate height at a certain location, you may need to use sampleTerrainMostDetailed. There is an example of using it here.

Additionally, you may want to disable DepthTestAgainstTerrain when the billboard is clamped to ground. An example of that is here.

Thanks,

Gabby

1 Like
3

Hi Gabby,thanks for help.
I used sampleTerrainMostDetailed follow the example,but it still has problem. The billboard’s position still is not the position where my mouse click

like this​

1.png

​​
2.png

​​
3.png

​​
4.png

​

here is my code

mouseHandler.setInputAction(function(movement) {

if(movement.position != null) {

var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid);

if (cartesian) {

var cartographic = ellipsoid.cartesianToCartographic(cartesian);

// 将弧度转为度的十进制度表示

var longitude = Cesium.Math.toDegrees(cartographic.longitude);

var latitude = Cesium.Math.toDegrees(cartographic.latitude);

// 获取实际高程

var height = that.viewer.scene.globe.getHeight(cartographic);

var terrainSamplePositions = ;

terrainSamplePositions.push(cartographic);

var promise=Cesium.sampleTerrainMostDetailed(that.viewer.terrainProvider, terrainSamplePositions)

Cesium.when(promise, function(posi){

	var ellipsoid = that.ellipsoid;

that.viewer.scene.globe.depthTestAgainstTerrain = true;

    that.viewer.entities.suspendEvents();

    that.viewer.entities.removeAll();

    for (var i = 0; i < posi.length; ++i) {

    	var position = posi[i];

    	[console.info](http://console.info)(ellipsoid.cartographicToCartesian(position))

    	[console.info](http://console.info)("height is :::"+position.height.toFixed(1))

    	that.viewer.entities.add({

    		name : position.height.toFixed(1),

    		position : ellipsoid.cartographicToCartesian(position),

    		billboard : {

    			verticalOrigin : Cesium.VerticalOrigin.BOTTOM,

    			scale : 0.7	,

    			image : 'images/icon/Buffer.png'

    		},

    		label : {

    			text : position.height.toFixed(1),

    			font : '10pt monospace',

    			horizontalOrigin : Cesium.HorizontalOrigin.CENTER,

    			pixelOffset : new Cesium.Cartesian2(0, -14),

    			fillColor : Cesium.Color.BLACK,

    			outlineColor : Cesium.Color.BLACK,

    			showBackground : true,

    			backgroundColor : new Cesium.Color(0.9, 0.9, 0.9, 0.7),

    			backgroundPadding : new Cesium.Cartesian2(4, 3)

    		}

    	});

    }

    that.viewer.entities.resumeEvents();

});

}

}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4

OK, here is a working example, using Scene.pickPosition (which picks the actual position where you clicked) instead of pickEllipsoid(which picks the point on the ellipsoid surface, without taking terrain into account).

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=5790158569d478d739312dc8e7efefb6