Drawing Points on terrain not working

Hi!

I am trying to re-use the example on Sandcastle Drawing on terrain, the idea is to build a tool for adding different types of soil, lines, including points. I managed to create styled lines and polygons but not points. Please, See below how I am trying to insert a points.

viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
function createPoint(worldPosition) {
    var point = viewer.entities.add({
        position : worldPosition,
        point : {
            color : Cesium.Color.WHITE,
            pixelSize : 5,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
    });
    return point;
}
var drawingMode = 'line';
function drawShape(positionData) {
    var shape;
    if (drawingMode === 'line') {
        shape = viewer.entities.add({
            polyline : {
                positions : positionData,
                clampToGround : true,
                width : 3
            }
        });
    }
    if (drawingMode === 'point') {
        shape = viewer.entities.add({
        position : worldPosition,
        point : {
           color : Cesium.Color.BLACK,
            pixelSize : 10,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
        });
    }
    else if (drawingMode === 'polygon') {
        shape = viewer.entities.add({
            polygon: {
                hierarchy: positionData,
                material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
            }
        });
    }
    return shape;
}
var activeShapePoints = ;
var activeShape;
var floatingPoint;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event) {
    // We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
    // we get the correct point when mousing over terrain.
    var earthPosition = viewer.scene.pickPosition(event.position);
    // `earthPosition` will be undefined if our mouse is not over the globe.
    if (Cesium.defined(earthPosition)) {
        if (activeShapePoints.length === 0) {
            floatingPoint = createPoint(earthPosition);
            activeShapePoints.push(earthPosition);
            var dynamicPositions = new Cesium.CallbackProperty(function () {
                return activeShapePoints;
            }, false);
            activeShape = drawShape(dynamicPositions);
        }
        activeShapePoints.push(earthPosition);
        createPoint(earthPosition);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function(event) {
    if (Cesium.defined(floatingPoint)) {
        var newPosition = viewer.scene.pickPosition(event.endPosition);
        if (Cesium.defined(newPosition)) {
            floatingPoint.position.setValue(newPosition);
            activeShapePoints.pop();
            activeShapePoints.push(newPosition);
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
    activeShapePoints.pop();
    drawShape(activeShapePoints);
    viewer.entities.remove(floatingPoint);
    viewer.entities.remove(activeShape);
    floatingPoint = undefined;
    activeShape = undefined;
    activeShapePoints = ;
}
handler.setInputAction(function(event) {
    terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

var options = [{
    text : 'Draw Lines',
    onselect : function() {
        terminateShape();
        drawingMode = 'line';
    }
}, {
    text : 'Points',
    onselect : function() {
        terminateShape();
        drawingMode = 'point';
    }
}, {
    text : 'Draw Polygons',
    onselect : function() {
        terminateShape();
        drawingMode = 'polygon';
    }
}];

I hope this is possible?

Thanks for a great work and support!

BR, Abel Gonzalez

It’s definitely possible. I think your issue is that you’re using a variable that isn’t defined in your drawShape function. When the drawinMode is point you set its position to worldPosition but that’s not defined in that function.

Let me know if that helps. If you’re still having trouble, making a Sandcastle example makes it easier for me to run your example. Just go to Sandcastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) and then click on “Share” and paste the link you get here.

Thanks a lot for your time Omar!

I have changed the position and even tested without it and still no respons. Here is the shared coded:

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=tVhtUyI5EP4rKb8wVHEB3XXvTt2tU+SUWlwpQa279UrjTMOkNpNMJRmQu+K/X2deYAZY0NpavghJd6fz9NMvccI0mXCYgiYfiYQpaYPhSUTv0jWv5qc/20paxiXoWoOQ/x4kwY8BAb7lSnZlwH1mlSZHZMSEgUYmwOVInamXlVULWqOpvlYTHoDTyU/0NTAL90qLYJjJePUHOa8fP8jMQZr5cs+DMVhqUB7kIGY+dCYg7SWTgUAhDZGaQFfGiT1N3fNy+4MVheEsBtrr/Dl8PL++Pet1Htu9bvuzO26UyFSTZC71FZfWmzrH+spwt1MvQJggfLHbR/RyL9E0yoChLAi8XMx94lwXb1yx1SiLOEtHpKTlPr4SqgRU2/2k95fdYadRFYz5C4gB/xdQ+HBlLwQ+Du0NjECD9GFh7bK6Ttu906v+4/D68eLm+vbL+dLIPPuaBsR90WATLTOfcQm3HRiBZlMux1cqAISkJpA0tTKkbn8Qshi8Ao9zZlkFT+O280P4iHgVkx8Lo/UySqnK7hBkGIuZM7AOczlIBrfLDjbWRX3BonioLrRKZIDiViewQWzKAxvi9rvq1rwEbIHofMudU5h/4NIbifXWG2/i4VnvtP15g3CZi/utDQI/TMgdMALWnO9hKWZjJX+IQqi/Ec6Qg2baD2c70YywtGjOxFG57KaYXuU7WCNj0HbmrSc+nXIbnoo4ZF6L/lqvvxqVPGuLHMuzlmFyTiDNy7TaGQTi6z/Ha5v5ykgoZhHSfp77bi3M6m+1iww2F2mvKOgMVY3zMNemBmy5dBdlwwOnvYhXs0nugSQY36fckvFBAo25/60oq09IMI0EkMYCC4gaLWR9FmGMUuGOEDw2igdPxChiQ2YXB0yBYJvBNUDea42tLs+iaQiSRCoxCADBVqOLlkaXJQyYtmHhyZJU615mF6MFVYpg4flPFRtPWEeEIM94axnACOtX4LitEp26gvc0RCqb+4M+j4V6BrosKHlAcl2vYrxeSQQnvcYHKkCOsY65/GnVV4lf4QNet9w3qycdVxXXz4kTE27XSbvMTLKI+/1F7aqwrs2EeGYIcpE/i+7j1TflbJ4Ta86sHDxvZIPMlkugH8sGt+pkWa+UoW/FYCe4aBtd3Tn1LMadt2bfBjpVCFClkwsXxuYNyQAy2HTvDceW7Na3k3KRYe6Od0wkUFHeTUsVe68k73fszl8bnKvr20Hn8er6ruPUsRLcgONUmtVZk8JSxW0tS/icZAQjSLLRNxUsllMFWpq/sFZFXCKBMo4uUNt+5SWp1+QKkdW+mTmzwoztsiXbheRqZVlUv+M1t7fvVtva/K2cX4XteGcYb7oXl5Ukc4mg4qJcfV0YfnGDWe3chbiHvptaPiugXPrCcu+nwqkKyTf4VGx9ZwpfEnDl9Aydn3ByNrZuOzq9eD+bqH6OB9mwV/LBMWCA4feZsQLchDdUCjuGvgKZeHmM8uT7W6kIhwhiFaYYYVh7iRu9XNdNn8Rm+TrNxgqh1LdTuxjZsEDjNybf0ZFW0TmMkSrG+2X/4IAetA5/a5D3H+j+74eHDRySWy3aqjeqnaxQ9w7T7Qap/q2Xn8dlB4aaSTNSOio8waFS85f3tHve+TLsDv9yinuNvRNjZwI+ZeD8waNYaUsSLTxKmxaiWCDGpvmc+N/wze2bFJaTZqF0EvAJ4cHHh72V/xM87Ln3kTG4M0pE+g542Pt00kT5ihqmd4DBusaxRbCZEwn3P/WyRUrpSRN/rmvZLFwli/8D

BR

Abel

You need to extract a point from the array that is in positionData, something like this:

shape = viewer.entities.add({

position: positionData.getValue()[0],

point: {

color: Cesium.Color.BLACK,

pixelSize: 10,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}

});

``

That change will get the first point clicked drawn. Subsequently clicked points are not drawn, presumably because you expected all points in the array to be drawn in a single entity. Unfortunately, that isn’t how an entity works. You’ll need to create an entity for each point you wish to draw.

Scott

Hi Scott!

Thanks for
your advice and example! I have tested with your code but as you said I can
only get one point. Then back to drawing lines I get this error: Uncaught
TypeError: positionData.getValue is not a function (on line 32)

see it On Sandcastle

I assume I
would have to add a new function in order to call back the point?

I am not
god with JavaCript att all, can you please advise me on which should be the
best way to build a drawing tool for multi styled points. This example on Sandcastle)
I understand is made to draw line and polygons only. Maybe is there a working
demo/example I could check?

Thank you for your time and have a great weekend!

Abel

Hey Abel,

The best advice I can give you is to spend some time learning more about JavaScript. This will make it far easier to move forward with building something like this.

I think what you should try is to start from scratch, add the functions for mouse move, and mouse click. Then add creating a point, and when you get that working, move onto lines. That way you will understand what every piece of the code there is doing.

Hi Omar!

I will try learning javascript. The thing is that idon’t have much time over after work and family, but this is definitely in my plans.

Have a good time and thanks for your time and advice!

Br.

Abel

Den tis 30 okt. 2018 15:32Omar Shehata omar.sameh.shehata@gmail.com skrev:

I definitely wish you the best of luck! I’m curious, what kind of application are you building this for?

Hi Omar!

I have done this app https://3d.sokigo.com/plan/ but the idea is to create tools such as measuring and adding objects. This is to be used by planners and achitectors in municipalities. My app is still under development.

Thanks for asking!

Br

Abel

That looks pretty cool Abel! We actually do have a commercial set of measuring tools that might help you out here. We don’t have a product page up for it yet but if you want to try it out just send an email to Tim (tim@cesium.com).

Thanks Omar!

I think will try to build it up by my self, I going to try at least, but if I don’t succeed then i will get in contact with Tim.

Have a nice day!

BR

Abel

Can you help me to draw square on the same. Here its mentioned only point and polygons