How to create a FeatureLayer for 3D maps?

Question

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 · Accepted Answer

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 ) {‍‍‍‍‍‍‍‍‍‍‍