Reference Source
public class | source

AngleMeasurementsPlugin

Extends:

Plugin → AngleMeasurementsPlugin

Viewer plugin for measuring angles.

Overview

Example 1: Creating AngleMeasurements Programmatically

In our first example, we'll use an XKTLoaderPlugin to load a model, and then use a AngleMeasurementsPlugin to programmatically create two AngleMeasurements.

Note how each AngleMeasurement has origin, corner and target, which each indicate a 3D World-space position on the surface of an Entity. These can be aon the same Entity, or on different Entitys.

[Run example]

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
import {AngleMeasurementsPlugin} from "../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js";

const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
});

viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
viewer.scene.camera.look = [10.97, 5.82, -11.22];
viewer.scene.camera.up = [0.36, 0.83, 0.40];

const xktLoader = new XKTLoaderPlugin(viewer);

const angleMeasurements = new AngleMeasurementsPlugin(viewer);

const model = xktLoader.load({
     src: "./models/xkt/duplex/duplex.xkt"
});

model.on("loaded", () => {

     const myMeasurement1 = angleMeasurements.createMeasurement({
         id: "myAngleMeasurement1",
         origin: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [0.044, 5.998, 17.767]
         },
         corner: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [0.044, 5.998, 17.767]
         },
         target: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
             worldPos: [4.738, 3.172, 17.768]
         },
         visible: true
     });

     const myMeasurement2 = angleMeasurements.createMeasurement({
         id: "myAngleMeasurement2",
         origin: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
             worldPos: [0.457, 2.532, 17.766]
         },
         corner: {
             entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
             worldPos: [0.457, 2.532, 17.766]
         },
         target: {
             entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
             worldPos: [0.436, 0.001, 22.135]
         },
         visible: true
     });
});

Example 2: Creating AngleMeasurements Interactively

In our second example, we'll use an XKTLoaderPlugin to load a model, then we'll use the AngleMeasurementPlugin's AngleMeasurementsControl to interactively create AngleMeasurements with mouse or touch input.

After we've activated the AngleMeasurementsControl, the first click on any Entity begins constructing a AngleMeasurement, fixing its origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after that will fix its target and complete the AngleMeasurement.

The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing another AngleMeasurement, and so on, until deactivated again.

[Run example]

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
import {AngleMeasurementsPlugin} from "../src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js";

const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
});

viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
viewer.scene.camera.look = [10.97, 5.82, -11.22];
viewer.scene.camera.up = [0.36, 0.83, 0.40];

const xktLoader = new XKTLoaderPlugin(viewer);

const angleMeasurements = new AngleMeasurementsPlugin(viewer);

const model = xktLoader.load({
    src: "./models/xkt/duplex/duplex.xkt"
});

angleMeasurements.control.activate();  // <------------ Activate the AngleMeasurementsControl

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: Object)

Member Summary

Public Members
public get

Gets the AngleMeasurementsControl, which creates AngleMeasurements from user input.

public get

Gets the existing AngleMeasurements, each mapped to its AngleMeasurement#id.

Method Summary

Public Methods
public

clear()

Destroys all AngleMeasurements.

public

Creates an AngleMeasurement.

public

Destroys this AngleMeasurementsPlugin.

public

Destroys a AngleMeasurement.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object)

Fires an event at this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

on(event: String, callback: Function)

Subscribes to an event fired at this Plugin.

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: Object) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg Object
  • optional

Plugin configuration.

cfg.id String
  • optional
  • default: "AngleMeasurements"

Optional ID for this plugin, so that we can find it within Viewer#plugins.

cfg.container HTMLElement
  • optional

Container DOM element for markers and labels. Defaults to document.body.

Public Members

public get control: AngleMeasurementsControl source

Gets the AngleMeasurementsControl, which creates AngleMeasurements from user input.

public get measurements: {String: AngleMeasurement} source

Gets the existing AngleMeasurements, each mapped to its AngleMeasurement#id.

Public Methods

public clear() source

Destroys all AngleMeasurements.

public createMeasurement(params: Object): AngleMeasurement source

Creates an AngleMeasurement.

The AngleMeasurement is then registered by AngleMeasurement#id in AngleMeasurementsPlugin#measurements.

Params:

NameTypeAttributeDescription
params Object

AngleMeasurement configuration.

params.id String

Unique ID to assign to AngleMeasurement#id. The AngleMeasurement will be registered by this in AngleMeasurementsPlugin#measurements and Scene.components. Must be unique among all components in the Viewer.

params.origin.worldPos Number[]

Origin World-space 3D position.

params.origin.entity Entity

Origin Entity.

params.corner.worldPos Number[]

Corner World-space 3D position.

params.corner.entity Entity

Corner Entity.

params.target.worldPos Number[]

Target World-space 3D position.

params.target.entity Entity

Target Entity.

params.visible Boolean
  • optional
  • default: true

Whether to initially show the AngleMeasurement.

public destroy() source

Destroys this AngleMeasurementsPlugin.

Destroys all AngleMeasurements first.

Override:

Plugin#destroy

public destroyMeasurement(id: String) source

Destroys a AngleMeasurement.

Params:

NameTypeAttributeDescription
id String

ID of AngleMeasurement to destroy.