I want to show the information of the model on popup. I’ve started with billboard, but as per the suggestion in the post I have created a normal html element and bind with the model.
The html content works great, If my camera is very close to the model. When I zoom-out, the position of html content is getting change. When I rotate the scene, again the position of the popup is getting change.
Also, when I snap with 2nd model, the popup of 1st model position is changing.
Is there any way to position the popup while rotating the scene and while snapping.?
The sandcastle code and the video describes my issue is given below.
Sandcastle Code:
// HTML
@import url(../templates/bucket.css); .canvaswrap { position: relative; } #popupBox { background-color: #333; border: 1px solid #fff; padding: 10px; color: #fff; }Loading...
Truck
// JavaScript Code:
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
infoBox : false,
selectionIndicator : false
});
function createModel(url, height, lat, long) {
var position = Cesium.Cartesian3.fromDegrees(lat, long, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 0
},
billboard: {
image: generateBillboard(“Sample popup”, 200, 300),
show: true,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
eyeOffset : new Cesium.Cartesian3(0.0,0.0,-100.0), // Negative Z will make it closer to the camera
pixelOffset : new Cesium.Cartesian2(0.0,-32.0) // Optional offset in pixels relative to center
}
});
viewer.trackedEntity = entity;
}
createModel(’…/…/SampleData/models/CesiumGround/Cesium_Ground.glb’, 0, -123.0744619, 44.0503706);
createModel(’…/…/SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb’, 0, -123.0745519, 44.0504506);
document.addEventListener(“keyup”, function (event) {
switch (event.keyCode) {
case 27: /* Remoce the selected object */
viewer.trackedEntity = undefined;
break;
default:
break;
}
});
var geoOverlay = document.getElementById(‘popup’);
viewer.container.appendChild(geoOverlay);
geoOverlay.style.position = ‘absolute’;
var anchor = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0);
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var tmp = new Cesium.Cartesian2();
var result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, anchor, tmp);
if (Cesium.defined(result)) {
//console.log("Result : " + result + "; temp : " + tmp);
geoOverlay.style.display = ‘block’;
geoOverlay.style.bottom = tmp.y + ‘px’;
geoOverlay.style.left = tmp.x + ‘px’;
} else {
// geoOverlay.style.display = ‘none’;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
function generateBillboard(content, width, height) {
var canvas = document.createElement(“canvas”);
canvas.width = width;
canvas.height = 600;
var ctx = canvas.getContext(“2d”);
var data = “data:image/svg+xml,” +
“” +
“” +
"
“” +
content +
“” +
“
“” +
“”;
var img = new Image();
img.src = data;
ctx.drawImage(img, 0, 0);
return canvas;
}
``
Appreciate your support.