1. A concise explanation of the problem you’re experiencing.
Trying to draw a dynamic polygon of user clicked positions, also, rather than just clicking blindly, it would be great to figure out how to have the shape appear as it is being drawn. I have saw the Drawing on Terrain Sandcastle (https://sandcastle.cesium.com/?src=Drawing%20on%20Terrain.html) but I’m trying to extend my current functionality to be able to draw different shapes by clicking on the appropriate button, so it’s similar to the dropdown selection.
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
Sandcastles:
and
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var drawing = false;
var selectedType = null;
var polygonPoints = ;
var tooltip = document.getElementById(‘tooltip’);
document.querySelector("#add-polygon").addEventListener(“click”, setEntity);
handler.setInputAction(function(movement) {
if (drawing) {
if (selectedType === ‘polygon’) {
moveTooltip(movement.endPosition, ‘left click to draw, right click to finish the shape’);
handler.setInputAction(function(click) {
console.log(‘point added’);
polygonPoints.push(viewer.scene.pickPosition(movement.endPosition));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(click) {
finishPolygon();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
function setEntity() {
var type = this.dataset.type;
selectedType = type;
drawing = true;
if (type === ‘polygon’) {
polygonPoints = ;
var data = {
id: ‘test’,
entity: ‘polygon’,
name: ‘test’,
description: ‘test’,
};
addPolygon(data);
}
}
function addPolygon(data)
{
var polygon = {
id: data.id,
name: data.name,
description: data.description,
allowPicking: true,
show: true,
polygon: {
show: true,
hierarchy: getPolygonPoints,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 9,
perPositionHeight: true,
material: Cesium.Color.BLUE.withAlpha(0.0)
},
label: {
disableDepthTestDistance: Number.POSITIVE_INFINITY,
text: data.name,
font: ‘9pt monospace’,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -10)
}
};
viewer.entities.add(polygon);
}
function finishPolygon()
{
console.log(‘finished drawing polygon’);
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
// polygonPoints = ;
finishShape();
}
var getPolygonPoints = new Cesium.CallbackProperty(function() {
return Cesium.PolygonHierarchy(polygonPoints);
}, false);
function finishShape()
{
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
hideTooltip();
selectedType = null;
}
function showTooltip()
{
tooltip.style.display = ‘block’;
}
function hideTooltip()
{
tooltip.style.display = ‘none’;
}
function moveTooltip(position, message)
{
tooltip.innerHTML = message;
tooltip.style.left = position.x + 30 + “px”;
tooltip.style.top = position.y - 30 + “px”;
showTooltip();
}
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
Would like to implement the ability to draw shapes.
4. The Cesium version you’re using, your operating system and browser.
1.62, OS X Mojave and Chrome