alterwiel

3D Lines with slope from points

Blog Post created by alterwiel on Jul 22, 2018

While attempting to create a map showing 3D lines that have slope and elevation I browsed Geonet to see if there were any examples or help and somewhere found someone else that was trying to do a similar thing, but they were connecting horizontal pipes to vertical ones using Z-values. After some time I came up with this code that uses 2 attributes from each feature for the Z-values. The attributes are DownsStreamInvertLevel and UpstreamInvertLevel. I broke each line's geometry down to it's points and used the x and y points plus the invert levels to create an array of x y z values for a path. Using this path I created a new Polyline with

hasZ: true

After each path had been processed I created a new Graphic with the resulting polyline, then pushed the graphic to an array. Once all features had been processed I added the array to a graphics layer that I had previously added to the map. As you can see I also had to change the projection of the points.

Here's the code:

results.features.forEach(function (item) {
     var line;
     var paths = [];
     item.geometry.paths.forEach(function (path, i) {
          var projectedPoint;
          var pointNumber = 0;
          path.forEach(function (value, j) {
               var point = item.geometry.getPoint(i, j);
               projectedPoint = projection.project(point, {
                    wkid: 3857
               });
               if (pointNumber === 0)
                    paths.push([projectedPoint.x, projectedPoint.y, -item.attributes.UpstreamInvertLevel]);
               else
                    paths.push([projectedPoint.x, projectedPoint.y, -item.attributes.DownstreamInvertLevel]);
               pointNumber = pointNumber + 1;
          });
          line = new Polyline({
               hasZ: true,
               hasM: false,
               paths: paths,
               spatialReference: { wkid: 3857 }
          });
     });
     graphic = new Graphic({
          geometry: line,
          symbol: lineSymbol,
          attributes: item.attributes,
          popupTemplate: wwMainPopupTemplate
     });
     graphicArray.push(graphic);
});

Outcomes