Draw a Polyline with ArcType.RHUMB

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Using the mouse, I am unable to draw a Polyline with an ArcType of RHUMB.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845 })

});

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

var scene = viewer.scene;

var camera = viewer.camera;

var polyline;

var drawing = false;

var positions = ;

var firstClick = null;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(

function (click) {

    var clickPosition = viewer.camera.pickEllipsoid(click.position || click.endPosition, viewer.scene.globe.ellipsoid);

    if (!firstClick) {

        firstClick = clickPosition;

        positions.push(clickPosition);

    }

    if (drawing) {

        firstClick = null;

        positions = [];

    }

    drawing = !drawing;

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(

function (movement) {

    var mousePosition = viewer.camera.pickEllipsoid(movement.position || movement.endPosition, viewer.scene.globe.ellipsoid);

    if (drawing) {

        // remove previous line

        viewer.entities.remove(polyline);

        positions = [];

        positions.push(firstClick);

        positions.push(mousePosition);

        draw(positions);

    }     

    

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function draw(currentPositions) {

polyline = viewer.entities.add({

    polyline : {

        positions : new Cesium.CallbackProperty(function() {

            return currentPositions;

        }, false),

        material : Cesium.Color.BLUE,

        width : 5,

        arcType: Cesium.ArcType.RHUMB

    }

});

}

// adding help text

var paragraph0 = document.createElement(‘p’);

paragraph0.id = ‘help0’;

var node0 = document.createTextNode("To start drawing, left click and move mouse. ");

paragraph0.appendChild(node0);

var paragraph1 = document.createElement(‘p’);

paragraph1.id = ‘help1’;

var node1 = document.createTextNode("Left click again to stop drawing. ");

paragraph1.appendChild(node1);

var element = document.getElementById(‘toolbar’);

element.appendChild(paragraph0);

element.appendChild(paragraph1);

document.getElementById(‘help0’).style.fontSize = ‘16px’;

document.getElementById(‘help1’).style.fontSize = ‘16px’;

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

We have a requirement to allow the user to define a region by drawing a Polygon with ArcType RHUMB using the mouse. We are doing that successfully. Between the first mouse and second mouse clicks, as the mouse is being moved, we draw a line to show to the user the region. As we draw that initial line, however, as it does not seem to apply ArcType.RHUMB, it does not accurately represent the eventual shape of the polygon.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.61

Windows 10

Chrome Version 76.0.3809.100 (Official Build) (32-bit)

Firefox Developer Edition 66.0b14 (64-bit)

2

Thanks for the code example! This looks like a bug with dynamic polylines not taking into account the arc type. It is drawn as a geodesic regardless of what arcType is set. I opened a fix for this here:

https://github.com/AnalyticalGraphicsInc/cesium/pull/8191

So it should be available in the next CesiumJS 1.62 release.

3

Omar,

Thanks for the prompt reply! I look forward to the next release.

Larry