Simplest Polygon

This tutorial will show you the basics of creating and positioning a simple polygon.

Simplest Polygon

Simplest Polygon

Add a Vector Layer and Add a Polygon

As with the previous examples, we will first create a base raster layer for ground level tiles (see the Simplest Line Tutorial). Let's skip ahead and add a vector layer with a polygon.

In the Simplest Line example, we saw that we could add a line with the following code:

 var addVectorLine = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // Add a line 
    var dynamicLine = new AltusUnified.DynamicLine("line1");
    var dynamicLinePoints = [
      new AltusUnified.GeographicPosition2D(35, -80),
      new AltusUnified.GeographicPosition2D(47, -122)
      // you could add more 2D positions here to create a poly-line
    ];
    pushToVector(dynamicLine.points(), dynamicLinePoints);

    var colors = [new AltusUnified.Color(255, 0, 0), new AltusUnified.Color(0, 0, 255)];
    var lineStyle = new AltusUnified.LineStyle(colors[0], 8, colors[1], 0);

    vectorMap.addDynamicLine(dynamicLine, lineStyle);

    // Clean up
    deleteElements(dynamicLinePoints);
    deleteElements(colors);
    dynamicLine.delete();
    lineStyle.delete();
  }

Now we will use polygon classes to achieve what we want, and we will add several more points like as follows:

 var addPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);
    vectorMap.setForce3DLines(true);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a polygon
    var dynamicPolygon = new AltusUnified.DynamicPolygon("poly1");
    var dynamicPolygonPoints = [
        new AltusUnified.GeographicPosition2D(20, -112),
        new AltusUnified.GeographicPosition2D(15, -116),
        new AltusUnified.GeographicPosition2D(15, -122),
        new AltusUnified.GeographicPosition2D(20, -126),
        new AltusUnified.GeographicPosition2D(25, -122),
        new AltusUnified.GeographicPosition2D(25, -116),
        new AltusUnified.GeographicPosition2D(20, -112),
    ];
    pushToVector(dynamicPolygon.points(), dynamicPolygonPoints);
    var colors3 = [new AltusUnified.Color(0, 0, 0), new AltusUnified.Color(255, 0, 50), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 3, colors3[2], 2);
    polygonStyle.setDashArray2(20, 20);
    vectorMap.addDynamicPolygon(dynamicPolygon, polygonStyle);

    // You will see the polygon change from black to red in 3 seconds
    polygonStyle.fillColor().r = 255;
    polygonStyle.fillColor().g = 0;
    polygonStyle.fillColor().b = 0;
    vectorMap.updatePolygonStyle(polygonStyle, 3.0);

    deleteElements(dynamicPolygonPoints);
    deleteElements(colors3);
    dynamicPolygon.delete();
    polygonStyle.delete();
  }

Putting it all together


function createSimplestPolygonExample() {

  var addBaseMap = function (mapName, url) {

    // setup tile source
    var internetTileProvider = new AltusUnified.InternetTileProvider(mapName, url);

    // create map description
    var mapDesc = AltusUnified.VirtualMap.defaultRasterMapDesc();
    var newMap = new AltusUnified.VirtualMap(mapName, mapDesc, internetTileProvider);

    // add map to scene
    AltusUnified.scene.addMap(newMap);

    newMap.delete();
    mapDesc.delete();
    internetTileProvider.delete();
  };

  /*C2*/
  var addVectorLine = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // Add a line 
    var dynamicLine = new AltusUnified.DynamicLine("line1");
    var dynamicLinePoints = [
      new AltusUnified.GeographicPosition2D(35, -80),
      new AltusUnified.GeographicPosition2D(47, -122)
      // you could add more 2D positions here to create a poly-line
    ];
    pushToVector(dynamicLine.points(), dynamicLinePoints);

    var colors = [new AltusUnified.Color(255, 0, 0), new AltusUnified.Color(0, 0, 255)];
    var lineStyle = new AltusUnified.LineStyle(colors[0], 8, colors[1], 0);

    vectorMap.addDynamicLine(dynamicLine, lineStyle);

    // Clean up
    deleteElements(dynamicLinePoints);
    deleteElements(colors);
    dynamicLine.delete();
    lineStyle.delete();
  }
  /*C2*/

  /*C3*/
  var addPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);
    vectorMap.setForce3DLines(true);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a polygon
    var dynamicPolygon = new AltusUnified.DynamicPolygon("poly1");
    var dynamicPolygonPoints = [
        new AltusUnified.GeographicPosition2D(20, -112),
        new AltusUnified.GeographicPosition2D(15, -116),
        new AltusUnified.GeographicPosition2D(15, -122),
        new AltusUnified.GeographicPosition2D(20, -126),
        new AltusUnified.GeographicPosition2D(25, -122),
        new AltusUnified.GeographicPosition2D(25, -116),
        new AltusUnified.GeographicPosition2D(20, -112),
    ];
    pushToVector(dynamicPolygon.points(), dynamicPolygonPoints);
    var colors3 = [new AltusUnified.Color(0, 0, 0), new AltusUnified.Color(255, 0, 50), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 3, colors3[2], 2);
    polygonStyle.setDashArray2(20, 20);
    vectorMap.addDynamicPolygon(dynamicPolygon, polygonStyle);

    // You will see the polygon change from black to red in 3 seconds
    polygonStyle.fillColor().r = 255;
    polygonStyle.fillColor().g = 0;
    polygonStyle.fillColor().b = 0;
    vectorMap.updatePolygonStyle(polygonStyle, 3.0);

    deleteElements(dynamicPolygonPoints);
    deleteElements(colors3);
    dynamicPolygon.delete();
    polygonStyle.delete();
  }
  /*C3*/

  /*C4*/
  var pushToVector = function(vector, array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        vector.push_back(array[i]);
    }
  }
  /*C4*/

  /*C5*/
  var deleteElements = function(array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        array[i].delete();
    }
    array.length = 0;
  }
  /*C5*/

  /*C6*/
  function setPosition(lat, lon, altitude) {
    // create position object
    var pos = new AltusUnified.GeographicPosition(lat, lon, altitude);

    // create orientation object - camera pointed like standard 2D map view
    var orientation = new AltusUnified.Orientation(0, 90, 0);

    // create default scale object
    var scale = new AltusUnified.vec3d(1, 1, 1);

    // set transfrom to scene
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);

    pos.delete();
    orientation.delete();
    scale.delete();
  }
  /*C6*/

  return {
    addBaseMap: addBaseMap,
    addPolygon: addPolygon,
    setPosition: setPosition
  }
};

function onAltusEngineReady() {
  var SimplestPolygonExample = createSimplestPolygonExample();

  var tileProviderUrl = "https://a.tiles.mapbox.com/v3/dxjacob.h43n70g0/{z}/{x}/{y}.png";

  SimplestPolygonExample.addBaseMap("baseMap", tileProviderUrl);
  SimplestPolygonExample.addPolygon();

  //Position over US/Canada border - position, orientation, and scale
  SimplestPolygonExample.setPosition(47.5, -101.505561, 15000000);
};

See Demo


AltusMappingEngine Web v2.0.ut.2131.g1fd674f master

COPYRIGHT (C) 2017, BA3, LLC ALL RIGHTS RESERVED