Overview
The PolylinePrimitive class creates a series of connected line segments passing through multiple points in 3D space. It extends the kernel Polyline class and implements the IPrimitive interface for selection and editing capabilities.
Constructor
new PolylinePrimitive(polylineConfig?: PolylineOptions)
Configuration object for the polyline primitive
PolylineOptions
Unique identifier for the polyline object. Auto-generated if not provided.
points
Array<Array<number>>
required
Array of point coordinates, where each point is [x, y, z]
Polyline color as hexadecimal number (e.g., 0xFF0000 for red)
Properties
Gets or sets the polyline color. Updates appearance automatically.
Indicates whether the polyline is currently selected
Indicates whether the polyline is in edit mode
Returns 'PolylinePrimitive' - the type identifier
Methods
getOPConfig()
Returns the current configuration of the polyline.
getOPConfig(): PolylineOptions
PolylineOptions - Current polyline configuration
setOPGeometry()
Updates the polyline geometry based on current property values. Called automatically when properties change.
attachPoint()
Adds a new point to the end of the polyline.
attachPoint(point: Array<number>): void
Point coordinates as [x, y, z] to append to the polyline
Examples
Create a Simple Polyline
import { PolylinePrimitive } from 'openplans';
const polyline = new PolylinePrimitive({
points: [
[0, 0, 0],
[5, 0, 0],
[5, 5, 0],
[10, 5, 0]
],
color: 0x0000FF // Blue
});
Create a Triangle
const triangle = new PolylinePrimitive({
points: [
[0, 0, 0],
[10, 0, 0],
[5, 8, 0],
[0, 0, 0] // Close the shape
],
color: 0xFF0000 // Red
});
Add Points Dynamically
const path = new PolylinePrimitive({
points: [
[0, 0, 0],
[5, 0, 0]
],
color: 0x00FF00 // Green
});
// Add more points
path.attachPoint([5, 5, 0]);
path.attachPoint([10, 5, 0]);
path.attachPoint([10, 10, 0]);
Create a Zigzag Path
const zigzag = new PolylinePrimitive({
points: [
[0, 0, 0],
[2, 2, 0],
[4, 0, 0],
[6, 2, 0],
[8, 0, 0],
[10, 2, 0]
],
color: 0xFFFF00 // Yellow
});
Change Polyline Color
// Change to cyan
polyline.lineColor = 0x00FFFF;
Get Polyline Configuration
const config = polyline.getOPConfig();
console.log(config);
// Output:
// {
// ogid: 'auto-generated-id',
// points: [
// [0, 0, 0],
// [5, 0, 0],
// [5, 5, 0],
// [10, 5, 0]
// ],
// color: 0x00FFFF
// }
Create a 3D Path
const path3D = new PolylinePrimitive({
points: [
[0, 0, 0],
[5, 0, 5],
[10, 5, 10],
[15, 5, 5],
[20, 0, 0]
],
color: 0xFF00FF // Magenta
});
