Field of View (fov) marker

[Eduard Witteveen]

Hello List,

I have a panoramic viewer, in combination with a openscales-map.
I am trying to create a fov (field of view) on the map, which has to
show the direction in which the panoramic-viewer is looking.

For this is started with a CustomMarker with a fov.png (a triangle) on
a fov-layer(FeatureLayer). But when i try to rotate this image, it
will rotate around the left upper corner, but not at the given
position.

How can i rotate an image, of in any otherway make a marker which
resembles the direction where the user is looking at.

I've looked on the discussion forum and in google, but i couldnt find
an answer for both the fov or rotation.

Can anyone give me some pointers to accomplish this task?

Please let me know,

Eduard

[Romaric Pascal]

Hello !

There are several ways to achieve what you want to achieve : 

 - use an affine transform through a matrix (http://livedocs.adobe.com/flash/9.0_fr/ActionScriptLangRefV3/flash/geom/Matrix.html) so that rotation is made from a certain point in your image

 - add your image to a sprite and offset it, so that when the sprite is rotated around its origin, your image is rotated accordingly

 - use a Flash symbol for the display of your field of view, with a custom origin on the symbol, so that it rotates around the right point.

Regards,
…

Rhum

2011/5/31 Eduard Witteveen <eywit...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "openscales-dev" group.
To post to this group, send email to opensca...@googlegroups.com.
To unsubscribe from this group, send email to openscales-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/openscales-dev?hl=en.

[Eduard Witteveen]

Hi!

Thank you for the quick and good pointers. First of all, i hereby post the current result, so i can help people with the same question.

But i am still not 100% happy with the current rotation, since the fov marker (currently 2 lines), still dance around the rotation point(don't stay at the same point), and i would like to make a circle at the end of the line's to give a better impression of a view port. Since i really want to use the viewport angle, i don't know how a image can help me with this.

Please let me know if someone has some good thoughts about this,...

<code>
Init:
                // fov
                _fovlayer = new FeatureLayer("Fov");
                _fovlayer.projection = new ProjProjection("EPSG:4326");
                _fovlayer.generateResolutions(19);
                _fovlayer.style = Style.getDefaultPointStyle();
                var location:Location = new Location(5.916667, 51.983333,new ProjProjection("EPSG:4326"));
                _fovMarker = new Sprite();
                _fovMarker.graphics.lineStyle(2.0, 0x00FF00, 0.0);
                _fovMarker.graphics.drawRect(0.0, 0.0, 40.0, 40.0);
                _fov = CustomMarker.createDisplayObjectMarker(_fovMarker, location);
                _fovlayer.addFeature(_fov);
                _map.addLayer(_fovlayer, false, true);

Rotation / Zoom:
                var lonlat:Location = new Location(MY_LONGITUDE, MY_LATITUDE, new ProjProjection("EPSG:4326"));
                var mappoint:Location = lonlat.reprojectTo(_map.baseLayer.projection);

                _fovMarker.graphics.clear();               
                _fovMarker.graphics.lineStyle(2.0, 0xFF0000, 1.0);
               
                var fov:Number = MY_FOV;
                var yaw:Number = MY_YAW;
                var startAngle:Number = yaw + 90 + (180 - fov / 2);
                var endAngle:Number = yaw + 90 + (180 + fov / 2);

                var size:Number = 20;
               
                var startX:Number = 20 + size * Math.cos(Math.PI * startAngle / 180.0);
                var startY:Number = 20 + size * Math.sin(Math.PI * startAngle / 180.0);
               
                var endX:Number = 20 + size * Math.cos(Math.PI * endAngle / 180.0);
                var endY:Number = 20 + size * Math.sin(Math.PI * endAngle / 180.0);
               
                _fovMarker.graphics.moveTo(20, 20);
                _fovMarker.graphics.lineTo(startX, startY);
               
                _fovMarker.graphics.moveTo(20, 20);
                _fovMarker.graphics.lineTo(endX, endY);
               
                _fov.point.x = mappoint.x;
                _fov.point.y = mappoint.y;               
                _fovlayer.redraw(true);
</code>

Regards,

Eduard