1. A concise explanation of the problem you’re experiencing.
Using the mouse to draw an ArcType.RHUMB Polygon around the pole results in the browser becoming unresponsive. To help recreate, attached is a screen capture of the polygon just after the browser freeze.
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 polygon;
var drawing = false;
var positions = ;
var points = ;
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 (!drawing) {
drawing = true;
viewer.entities.remove(polyline);
viewer.entities.remove(polygon);
for (var i = 0; i < points.length; i++) {
viewer.entities.remove(points[i]);
}
points = ;
positions = ;
}
positions.push(clickPosition);
drawPoint(clickPosition);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(
function (click) {
var clickPosition = viewer.camera.pickEllipsoid(click.position || click.endPosition, viewer.scene.globe.ellipsoid);
drawing = !drawing;
positions.push(clickPosition);
drawPoint(clickPosition);
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
handler.setInputAction(
function (movement) {
if (drawing && positions.length > 0) {
var mousePosition = viewer.camera.pickEllipsoid(movement.position || movement.endPosition, viewer.scene.globe.ellipsoid);
if (mousePosition) {
viewer.entities.remove(polyline);
viewer.entities.remove(polygon);
if (positions.length === 1) {
drawPolyline([positions[0], mousePosition]);
}
var copy = positions.slice();
copy.push(mousePosition);
drawPolygon(copy);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
function drawPoint(position) {
var point = new Cesium.Entity({
position : position,
point: {
pixelSize: 5,
color: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1,
}
});
viewer.entities.add(point);
points.push(point);
}
function drawPolygon(positions) {
polygon = viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty(function() {
return new Cesium.PolygonHierarchy(positions);
}, false),
material: Cesium.Color.POWDERBLUE.withAlpha(0.4),
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1,
height: 0,
arcType: Cesium.ArcType.RHUMB,
}
});
}
function drawPolyline(positions) {
polyline = viewer.entities.add({
polyline : {
positions : new Cesium.CallbackProperty(function() {
return positions;
}, 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 double click 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 use the mouse to draw a polygon with ArcType RHUMB. This works perfectly except around the poles.
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)
