maptalks / maptalks.js

A light and plugable JavaScript library for integrated 2D/3D maps.
https://maptalks.org
BSD 3-Clause "New" or "Revised" License
4.3k stars 503 forks source link

UAV pose marker 3D #1576

Open Janphr opened 2 years ago

Janphr commented 2 years ago

Hey,

is there an optimized marker for 3D usage? I want to visualize the pose of an UAV, which works well, as long as you don't change the point of view. Also, I'm using a jquery dialog as container and when I change the size of the dialog, the size of the marker changes too and weirdly moves as well. Other layers, like the LineString, are not affected.

This is how I create the marker:

this._poses[data.name] = new maptalks.VectorLayer(data.name, [
                new maptalks.Marker(
                    [data.pose.x, data.pose.y], {
                        properties: {
                            altitude: 0
                        },
                        symbol: {
                            'markerType': 'path',
                            'markerPath': this._pose_marker_path,
                            'markerWidth': 28,
                            'markerHeight': 40,
                            'markerDx': 0,
                            'markerDy': 6,
                            'markerOpacity': .5,
                            'markerFill': '#bbb',

                            'markerRotation': orientation // marker rotation in degree, clock-wise
                        }
                    }
                ),
                new maptalks.Marker(
                    [data.pose.x, data.pose.y],
                    {
                        properties: {
                            altitude: data.pose.z
                        },
                        symbol: {
                            'markerType': 'path',
                            'markerPath': this._pose_marker_path,
                            'markerFill': '#000',
                            'markerWidth': 28,
                            'markerHeight': 40,
                            'markerDx': 0,
                            'markerDy': 6,
                            'markerOpacity': 1,

                            'markerRotation': orientation // marker rotation in degree, clock-wise
                        }
                    }
                )
            ], {
                enableAltitude: true,        // enable altitude
                altitudeProperty: 'altitude' // altitude property in properties, default by 'altitude'
            })

with

_pose_marker_path: 'M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z',

Direct view: direct Opposite side: opposite Side view: side Shrunk dialog window: shrunk

Thanks!

fuzhenn commented 2 years ago

Thanks for submiting this issue. But I am not very clear about the problem you described, could you provide a reproduction example on codepen? Thanks~

Janphr commented 2 years ago

Okay,

https://codepen.io/janphr/pen/bGYeMzX when you change the size of the map window, the size of the marker changes too (either by changing the size of the browser or the lower window in CodePen) and when you rotate around the marker, its orientation changes as well (good to see on the 'shadow' marker on the ground)

So I'd like to have the size and orientation of the objects independent of the zoom level and POV of the camera. This works well for the LineString, but not for the Marker for some reason.

Thanks!