diff --git a/docs/plugins/markers.md b/docs/plugins/markers.md index 10d7fe084..e5774e508 100644 --- a/docs/plugins/markers.md +++ b/docs/plugins/markers.md @@ -340,6 +340,14 @@ Size of the marker in pixels. _(This option is ignored for polygons and polylines)._ +#### `rotation` + +- type: `string | number` + +Rotation applied to the marker, in degrees or radians. + +_(This option is ignored for polygons and polylines)._ + #### `orientation` (only for `imageLayer`, `videoLayer`) - type: `'front' | 'horizontal' | 'vertical-left' | 'vertical-right'` diff --git a/packages/markers-plugin/src/markers/AbstractStandardMarker.ts b/packages/markers-plugin/src/markers/AbstractStandardMarker.ts index d7fba84c8..3237473b0 100644 --- a/packages/markers-plugin/src/markers/AbstractStandardMarker.ts +++ b/packages/markers-plugin/src/markers/AbstractStandardMarker.ts @@ -101,6 +101,10 @@ export abstract class AbstractStandardMarker extends AbstractDomMarker { ...this.config.hoverScale, }; } + + if (!utils.isNil(this.config.rotation)) { + element.style.rotate = MathUtils.radToDeg(this.config.rotation) + 'deg'; + } } /** diff --git a/packages/markers-plugin/src/markers/Marker.ts b/packages/markers-plugin/src/markers/Marker.ts index 0426b1995..916e80eee 100644 --- a/packages/markers-plugin/src/markers/Marker.ts +++ b/packages/markers-plugin/src/markers/Marker.ts @@ -159,6 +159,9 @@ export abstract class Marker { if (utils.isNil(this.config.opacity)) { this.config.opacity = 1; } + if (!utils.isNil(this.config.rotation)) { + this.config.rotation = utils.parseAngle(this.config.rotation); + } this.state.anchor = utils.parsePoint(this.config.anchor); } diff --git a/packages/markers-plugin/src/markers/Marker3D.ts b/packages/markers-plugin/src/markers/Marker3D.ts index dd57b137b..3c775a029 100644 --- a/packages/markers-plugin/src/markers/Marker3D.ts +++ b/packages/markers-plugin/src/markers/Marker3D.ts @@ -106,6 +106,7 @@ export class Marker3D extends Marker { this.state.size = this.config.size; mesh.position.set(0.5 - this.state.anchor.x, this.state.anchor.y - 0.5, 0); + mesh.rotation.set(0, 0, -this.config.rotation ?? 0); this.viewer.dataHelper.sphericalCoordsToVector3(this.state.position, group.position); group.lookAt(0, group.position.y, 0); diff --git a/packages/markers-plugin/src/model.ts b/packages/markers-plugin/src/model.ts index cf40e5e41..3a09e03df 100644 --- a/packages/markers-plugin/src/model.ts +++ b/packages/markers-plugin/src/model.ts @@ -94,6 +94,10 @@ export type MarkerConfig = { * Size of the marker (required for `image`, recommended for `html`, ignored for others) */ size?: Size; + /** + * Rotation applied to the marker (ignored for `polygon` and `polyline`) + */ + rotation?: string | number; /** * Applies a perspective on the image to make it look like placed on the floor or on a wall (only for `imageLayer`) */ @@ -185,7 +189,8 @@ export type MarkerConfig = { data?: any; }; -export type ParsedMarkerConfig = Omit & { +export type ParsedMarkerConfig = Omit & { + rotation?: number; scale?: | { zoom?: [number, number]; yaw?: [number, number] } | ((zoomLevel: number, position: Position) => number);