Simplest 3D Line

In the previous example, we demonstrated adding a vector line to a map. In this example, we will show how to add height to the line, so that it shows up above the globe in 3D space.

Simplest 3D Line

Simplest 3D Line

Add a Vector Layer and Add a 3D Line

As with the previous examples, we will be good citizens and create a namespace to encapsulate our example code and keep it from polluting the global namespace (window object). Also we create a base map layer and add it to the map. We've already seen all that, so let's skip on.

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();
  }

Adding a vertical dimension is going to be very easy. We will use a few different, but similar Altus classes, and instead of supplying only a latitude and longitude, we will provide an additional altitude parameter to our points:

 var addVectorLine3D = 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 3D line 
    var dynamicLine3D = new AltusUnified.DynamicLine3D("line3D1");
    var dynamicLine3DPoints = [
      new AltusUnified.GeographicPosition(26, -81, 0),
      new AltusUnified.GeographicPosition(35, -80, 1000000),
      new AltusUnified.GeographicPosition(47, -122, 1000000),
      new AltusUnified.GeographicPosition(48, -123, 0)
    ];
    pushToVector(dynamicLine3D.points(), dynamicLine3DPoints);

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

    vectorMap.addDynamicLine3D(dynamicLine3D, lineStyle);

    // Clean up
    deleteElements(dynamicLine3DPoints);
    deleteElements(colors);
    dynamicLine3D.delete();
    lineStyle.delete();
  }

Easy peazey!

Putting it all together


function createSimplest3DLineExample() {

  var addBaseMap = function (mapName, url) {
    console.log("adding base map " + mapName + " url:" + 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 addVectorLine3D = 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 3D line 
    var dynamicLine3D = new AltusUnified.DynamicLine3D("line3D1");
    var dynamicLine3DPoints = [
      new AltusUnified.GeographicPosition(26, -81, 0),
      new AltusUnified.GeographicPosition(35, -80, 1000000),
      new AltusUnified.GeographicPosition(47, -122, 1000000),
      new AltusUnified.GeographicPosition(48, -123, 0)
    ];
    pushToVector(dynamicLine3D.points(), dynamicLine3DPoints);

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

    vectorMap.addDynamicLine3D(dynamicLine3D, lineStyle);

    // Clean up
    deleteElements(dynamicLine3DPoints);
    deleteElements(colors);
    dynamicLine3D.delete();
    lineStyle.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,
    // addVectorLine: addVectorLine,
    addVectorLine3D: addVectorLine3D,
    setPosition: setPosition
  }
};

function onAltusEngineReady() {
  var Simplest3DLineExample = createSimplest3DLineExample();

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

  Simplest3DLineExample.addBaseMap("baseMap", tileProviderUrl);
  Simplest3DLineExample.addVectorLine3D();

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

See Demo


AltusMappingEngine Web v2.0.ut.2153.g60764257e master

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