flyto a polygon with 45 degree camera angle and polygon placed in center of view

CesiumJS
1

Hi,
  I have few polygons created and rendered on cesium, all i want is which ever polygon is selected from the parent page the cesium should flyto that polygon with camera orientation of 45 degree, and the camera zoomed to that polygon

While using -85 degree, the cesium do fly to the polygon with polygon in center and highlighted but the view is from top view. where as when i change it to -45 degree the polygon get highlighted but the polygon is not in the view, the camera point some where else far. The code i have used is below. where highlight is the polygon.

cesiumViewer.flyTo(highlight, {
offset : new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0),
        Cesium.Math.toRadians(-85.0),20)
}).then(function(){
  viewer.selectedEntity= highlight;
});

i want same functionality but the camera orientation should be 45 degree. camera facing the polygon and polygon in center of view.

2

I just tried this in a simple Sandcastle example and the polygon seems to be in view.

How far off from view is the polygon for you when using -45 degrees? Also, just out of curiosity, what happens when you first flyTo with -90 degrees and then tilt, like below?

viewer.flyTo(blueBox, {

offset : new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0),

Cesium.Math.toRadians(-90.0),2000000)

}).then(function(){

viewer.flyTo(blueBox, {

offset : new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0),

Cesium.Math.toRadians(-45.0),2000000)

}).then(function(){

viewer.selectedEntity= blueBox;

});

});

``

3

Hi i have tried the above code.
You can find my sampe code below.

i can still see the offset .

a blue polygon is created and renders but the camera point away from the polygon with offset

you can paste this on sandcastle to check

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var blueBox = viewer.entities.add({

name : “Blue Box”,

polygon : {

    hierarchy : Cesium.Cartesian3.fromDegreesArray([-0.13032468377502937, 51.531591668408, -0.1302013021603443, 51.531615028195894, -0.130458794225774, 51.53188867053307, -0.13065191327484627, 51.53193538979208, -0.13045342980774421, 51.532012142756415, -0.1300296407833912, 51.53159500552131, -0.12987407266052742, 51.53166508484391, -0.13026031075867195, 51.532055524809444, -0.1303139549389698, 51.532142288791434, -0.13059290467651863, 51.5321523000095, -0.13080748139771003, 51.5320521877299, -0.13080748139771003, 51.53197543483309, -0.13066800652893562, 51.53192871561518]),

material : Cesium.Color.ROYALBLUE.withAlpha(0.5)

}

});

viewer.flyTo(blueBox, {

offset : new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0),

Cesium.Math.toRadians(-45.0),200)

}).then(function(){

viewer.selectedEntity = blueBox;

});

4

I think this might be a bug. If you add height:0 to your polygon, it works correctly.

I opened an issue to track this:

https://github.com/AnalyticalGraphicsInc/cesium/issues/7116

5

I am even using tilesets. So the polygon covers tilesets with the colour provided for the polygon. In case if i set height as 0 the polygon moves below the earth and the tileset are not covered with the polygon.

Or is there a way to color a tileset which lie inside a polygon

6

I just want to get rid of the offset which the camera is applying. Camera angle 45 degree and polygon in center of view

AB

7

I think another workaround you can try, if the issue is just the camera position/offset, is to use another entity, like a point, and place it in the right place, and have that be the entity that the camera tracks, instead of the polygon.

8

Hi,
I cannot add any extra point in the map. I can compute through lat and longitude. Can you suggest me any of the way to fly to a polygon with 45 degree view. Like taking center of polygon or so. I have tried with first lat longitude of a polygon , with look at camera view. It sets the point in center if we look at from 90 degree but when 45 is used the polygon seems to be a bit out of the view.

Arti Bundiwal

9

The point you add need not be visible.

Here’s an example where I add the point to the center of the polygon based on its coordinates and then fly to the invisible point instead.

Sandcastle link.

You can fly the camera directly to a position (see the flyTo docs), but you’ll have to compute the correct offset yourself.

10

Hi ,
Adding a dynamic point based on the polygon really worked for me.

Thank you soo much.

The code was really helpful.

AB

11

Hi ,
Your code really worked the only problem i am facing is after i zoom out a lot out of the earth and then i click on a button to get back to the polygon. The map zoom in to that polygon sometime but it take me directly to the underground. Is there a way to set max zoom limit and dont let user zoom out of that.

AB

12

What does the button you click on do? Does it run something like viewer.zoomTo ?

Generally I believe that uses the entity’s bounding sphere to figure out how close to zoom. I wonder if the easiest way to adjust that would be, instead of using a point like we talked about above, use something like a sphere/box that you can make bigger (and would still be hidden).

13

I tried with the point you mentioned before. I have a page where all the polygon created are listen so when i click on any of the polygon name. The cesium fly to that polygon and the center point is calculated the way you mentioned. As i am using tileset so for the point i have set height as 30 so my polygon reside in the center of view. The only problem is when i zoom out too much and after that when i click on any of the polygon name listed the cesium does fly but it touches the ground or some where else

Arti Bundiwal

14

Another option you can try is using the camera’s flyTo function:

https://cesiumjs.org/Cesium/Build/Documentation/Camera.html?classFilter=Camera#flyTo

Which should let you control the destination so you can make sure it goes to the correct spot. Otherwise, if you can share another Sandcastle example of what your app is doing, (by clicking “Share” in Sandcastle and pasting the link you get there) it might be easier to figure out what’s going on.