How to create a FeatureLayer for 3D maps?

VincentLantaca1 · ‎04-25-2018

Hello,

I am trying to create my own FeatureLayer and render points with 3D symbols. I am trying to use the sample code Thematic visualization with realistic 3D symbols as an example.

When I try to make a new FeatureLayer from a graphics array, however, I am getting an error:

dojo.js:249 [esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 'esri.geometry.Polygon', 'esri.geometry.Mesh', or a plain object that can auto-cast (having .type = 'extent', 'multipoint', 'point', 'polyline', 'polygon', 'mesh')

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
   <title>Thematic visualization with realistic 3D symbols - 4.7</title>

   <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
   <script src="https://js.arcgis.com/4.7/"></script>

   <style>
      html,
      body,
      #viewDiv {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
      }
   </style>

   <script>
      require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/widgets/Legend",
            "dojo/domReady!"
         ],
         function(
            Map, SceneView, FeatureLayer, Legend, Point
         ) {

            /*****************************************************************
             * Set the Renderer and Layer for the trees. The symbol references
             * a hosted 3D symbol resource that resembles a tree.
             * Four visual variables are used to modify this symbol on the
             * client. One for the crown height (height axis),
             * another for crown diameter from north to south (depth axis), and
             * another for crown diameter from east to west (width axis).
             *
             * The color visual variable shades each tree based on its
             * carbon storage.
             *****************************************************************/

            var renderer = {
               type: "simple", // autocasts as new SimpleRenderer()
               symbol: {
                  type: "web-style", // autocasts as new WebStyleSymbol()
                  styleName: "EsriRealisticTreesStyle",
                  name: "Helianthus"
               },
               label: "tree",
               visualVariables: [{
                  type: "color",
                  field: "ObjectID", // Carbon storage
                  stops: [{
                     color: "#ec9df9"
                  }],
                  legendOptions: {
                     title: "title"
                  }
               }]
            };

            var fields = [
               {
                  name: "ObjectID",
                  alias: "ObjectID",
                  type: "old"
               }
            ];

            // Create Feature Layer
            var newflayer = new FeatureLayer({
               source: [], // autocast as an array of esri/Graphic
               // create an instance of esri/layers/support/Field for each field object
               fields: fields, // This is required when creating a layer from Graphics
               objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
               renderer: renderer, // set the visualization on the layer
               outFields: ["*"],
               spatialReference: {
                  wkid: 3857
               },
               geometryType: "point" // Must be set when creating a layer from Graphics
            });

            newflayer.source.add({
               geometry: new Point({
                  x: -9177356,
                  y: 4246783
               }),
               attributes: {
                  ObjectID: 1
               }
            });

            var map = new Map({
               //basemap: "streets-night-vector",
               basemap: "osm",
               ground: "world-elevation",
               layers: [newflayer]
            });

            var view = new SceneView({
               container: "viewDiv",
               map: map,
               camera: {
                  position: {
                     x: -9177356,
                     y: 4246783,
                     z: 723,
                     spatialReference: {
                        wkid: 3857
                     }
                  },
                  heading: 0,
                  tilt: 83
               },
               // Set dock options on the view's popup
               popup: {
                  dockEnabled: true,
                  dockOptions: {
                     breakpoint: false
                  }
               },
               // enable shadows to be cast from the features
               environment: {
                  lighting: {
                     directShadowsEnabled: true
                  }
               }
            });

            view.when(function() {
               var legend = new Legend({
                  view: view
               });
               view.ui.add(legend, "top-right");
            });

         });
   </script>
</head>

<body>
   <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm just trying to see if I can add a WebStyleSymbol at the center of the view. As far as I can tell, the error comes when I call newflayer.source.add(). I am declaring a Point object, but I'm not sure what I am doing wrong.

Thanks in advanced

KenBuja · ‎04-26-2018

You have a problem with agreement between the require modules and function arguments. It should look like this

      require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/widgets/Legend",
            "dojo/domReady!"
         ],
         function(
            Map, SceneView, FeatureLayer, Point, Legend
         ) {‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎04-26-2018

You have a problem with agreement between the require modules and function arguments. It should look like this

      require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/widgets/Legend",
            "dojo/domReady!"
         ],
         function(
            Map, SceneView, FeatureLayer, Point, Legend
         ) {‍‍‍‍‍‍‍‍‍‍‍