Creating Lines

This section introduces how to create line objects based on input coordinates.

Creating a Line

Line objects are created using specific coordinates through the JSLineString object.

The visualization of lines involves the following steps:

1. Create a line object

2. Specify the shape and properties of the line

3. Create a layer and store the line

Below is the complete code for creating a line object.

function createLine() {
    // 1. Create a line object
    var line = Module.createLineString("MY_LINE");

    // 2. Specify the shape and properties of the line
    line.createbyJson({
        coordinates: [(coordinate: [[126.0, 37.0, 20], [126.002, 37.0, 20]]), (style: "XYZ")],
        type: 0,
        union: false,
        depth: true,
        color: new Module.JSColor(255, 255, 0, 0),
        width: 1,
    });

    // 3. Create a layer and store the line
    let layerList = new Module.JSLayerList(true);
    let layer = layerList.createLayer("LINE_LAYER", Module.ELT_3DLINE);
    layer.addObject(line, 0);
}

Let's delve into the details of the code step by step.

Step 1. Create a Line Object

Create a line object of type JSLineString through the Module.

var line = Module.createLineString("MY_LINE");

The object key value is used to distinguish objects, ensuring no duplication within the same layer.

Step 2. Specify the Shape and Properties of the Line

Add coordinate and property information to specify the shape of the line.

line.createbyJson({
    coordinates: [(coordinate: [[126.0, 37.0, 20], [126.002, 37.0, 20]]), (style: "XYZ")],
    type: 0,
    union: false,
    depth: true,
    color: new Module.JSColor(255, 255, 0, 0),
    width: 1,
});

Coordinates

A list of coordinates forming the line. Enter the longitude, latitude, and altitude values of the line points.

Type

Sets the type of line. Various line types such as solid, dashed, and arrow can be set.

Solid Line (type: 0)	Dashed Line (type: 3)	Arrow (type: 4)

Union

Determines whether the line is combined with the terrain.

If set to false, it is drawn as a regular line; if set to true, it is drawn on the terrain using the RTT (Render To Texture) method.

Choosing the RTT method means the line is drawn on the terrain texture, so the line follows the terrain's contours. However, since it is rendered based on an image, stair-stepping artifacts may be prominent at the line edges.

union = false	union = true

Depth

Sets whether the line object is rendered according to depth (distance). If set to true, lines farther away are obscured by closer objects, following the usual concept of distance.

If set to false, objects are drawn according to layer order, regardless of occlusion.

Color

Sets the line color with a JSColor value.

Width

Sets the thickness of the line.

Step 3. Create a Layer and Store the Line

Store the configured line object in a layer.

let layerList = new Module.JSLayerList(true);
let layer = layerList.createLayer("LINE_LAYER", Module.ELT_3DLINE);
layer.addObject(line, 0);

Line Creation Result

Following the steps above, you can add various types of lines to one layer and display them as shown below.

Interested in seeing live code for the line creation process? Please click here.