Creating Polygons

This section introduces how to create polygons based on input coordinates.

Creating a Polygon

Polygons are created using specific coordinates through the JSPolygon object.

The visualization of polygons involves the following steps:

1. Create a polygon object

2. Specify the shape of the polygon

3. Set properties for the polygon

4. Store the polygon in a layer

The coordinates entered for the polygon all form a closed curve, and separated polygons are distinguished as Parts.

Depending on the composition of Parts, they can be formed in various shapes.

Single Part Polygon	Multiple Parts Polygon	Polygon with Holes

Below is the complete code for creating a polygon object.

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

function createPolygon() {
    // 1. Create a polygon object
    var polygon = Module.createPolygon("MY_POLYGON");

    // 2. Set coordinates and parts
    var vertex = new Module.JSVec3Array();
    vertex.push(new Module.JSVector3D(126.9288, 37.526449, 15.0));
    vertex.push(new Module.JSVector3D(126.927471, 37.525806, 15.0));
    vertex.push(new Module.JSVector3D(126.928596, 37.5246, 15.0));
    vertex.push(new Module.JSVector3D(126.929996, 37.525416, 15.0));

    var part = new Module.Collection();
    part.add(4);

    polygon.setPartCoordinates(vertex, part);

    // 3. Set polygon color (optional)
    var polygonStyle = new Module.JSPolygonStyle();

    polygonStyle.setFill(true);
    polygonStyle.setFillColor(new Module.JSColor(255, 0, 0));

    polygonStyle.setOutLine(true);
    polygonStyle.setOutLineWidth(2.0);
    polygonStyle.setOutLineColor(new Module.JSColor(0, 0, 255));

    polygon.setStyle(polygonStyle);

    // 5. Store the polygon in a layer
    var layerList = new Module.JSLayerList(true);
    var layer = layerList.createLayer("POLYGON_LAYER", Module.ELT_POLYHEDRON);
    layer.addObject(polygon, 0);
}

Step 1. Create a Polygon Object

Create a polygon object of type JSPolygon through the Module.

var polygon = Module.createPolygon("MY_POLYGON");

Step 2. Specify the Shape of the Polygon

Add coordinate and part information to specify the shape of the polygon.

var vertex = new Module.JSVec3Array();
vertex.push(new Module.JSVector3D(126.9288, 37.526449, 15.0));
vertex.push(new Module.JSVector3D(126.927471, 37.525806, 15.0));
vertex.push(new Module.JSVector3D(126.928596, 37.5246, 15.0));
vertex.push(new Module.JSVector3D(126.929996, 37.525416, 15.0));

var part = new Module.Collection();
part.add(4);

polygon.setPartCoordinates(vertex, part);

Polygons are fundamentally formed as closed curves, and the direction of the coordinates distinguishes the exterior and interior.

• Clockwise (CW) configuration of coordinates: Determined as exterior, forming the outline of the polygon.

• Counterclockwise (CCW) configuration of coordinates: Determined as interior, forming holes in the polygon.

A closed curve is designated as one part, and the polygon in the code above consists of one part with four points.

If a polygon consists of two parts (two holes and one exterior), it is configured as follows:

var vertex = new Module.JSVec3Array();
var part = new Module.Collection();

// Outside Circle
vertex.push(128.674986, 35.217478);
vertex.push(128.676652, 35.216556);
vertex.push(128.67549, 35.215182);
vertex.push(128.673796, 35.216007);
part.add(4);

// Inside Circle (Hole)
vertex.push(128.67637, 35.216512);
vertex.push(128.675038, 35.217213);
vertex.push(128.675953, 35.216049);
part.add(3);

// Inside Circle (Hole)
vertex.push(128.674922, 35.217041);
vertex.push(128.674217, 35.216088);
vertex.push(128.675412, 35.215423);
vertex.push(128.675856, 35.215953);
part.add(4);

Set the specified coordinates and parts using the setPartCoordinates API.

The order of the parts can be freely set, but at least one part must be configured clockwise (CW) to form the exterior of the polygon.

Step 3. Set Properties for the Polygon (Optional)

In addition to the polygon coordinates, you can specify the color of the polygon.

The default color of the polygon is white with 0% transparency, and if no specific color is designated, the default color is applied.

You can optionally specify the color of the polygon's outline and fill.

var polygonStyle = new Module.JSPolygonStyle();

// Polygon fill color
polygonStyle.setFill(true);
polygonStyle.setFillColor(new Module.JSColor(255, 0, 0));

// Polygon outline color
polygonStyle.setOutLine(true);
polygonStyle.setOutLineWidth(2.0);
polygonStyle.setOutLineColor(new Module.JSColor(0, 0, 255));

polygon.setStyle(polygonStyle);

Step 4. Store the Polygon in a Layer

Create a layer and add the polygon object to it.

var layerList = new Module.JSLayerList(true);
var layer = layerList.createLayer("POLYGON_LAYER", Module.ELT_POLYHEDRON);
layer.addObject(polygon, 0);

Polygon Creation Result

By following the steps above, you can add multiple polygons to one layer and display them as shown below.

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

Interested in seeing live code for polygons with specified heights? Please click here.