Adicione uma lista de recursos do lado do cliente que não funcionam com js4.10

Question

<\/HEAD> Criar um FeatureLayer com gráficos do lado do cliente - 4.10<\/title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } <\/style> <script src="https:\/\/js.arcgis.com\/4.10\/"><\/script> <script> require([ "esri\/views\/MapView", "esri\/Map", "esri\/layers\/FeatureLayer", "esri\/geometry\/Point", "esri\/widgets\/Legend", "esri\/config", "esri\/request", 'esri\/Graphic', ], function(MapView, Map, FeatureLayer, Point, Legend, esriConfig, esriRequest,Graphic ) { var map = new Map({ basemap: "dark-gray" }); \/\/- Criar MapView var view = new MapView({ container: "viewDiv", map: map, center: [-144.492, 62.771], zoom: 5 }); const geodata = [ { name: 'data1', value: 109, pnt: [-144.492, 62.771], }, { name: 'data2', value: 302, pnt: [-145.492, 62.771], }, { name: 'data3', value: 459, pnt: [-143.492, 62.771], }, ]; const features = geodata.map((item, i) => new Graphic({ geometry: { type: 'point', y: item.pnt[0], x: item.pnt[1], }, attributes: { ObjectID: i, name: item.name, value: item.value, }, })); view.when(()=> { const fields = [ { name: 'ObjectID', alias: 'ObjectID', type: 'oid', }, { name: 'name', alias: 'name', type: 'string', }, { name: 'value', alias: 'value', type: 'integer', }, ]; const renderer = { type: 'heatmap', field: 'value', colorStops: [ { color: 'rgba(63, 40, 102, 0)', ratio: 0, }, & nbsp ;& nbsp ;& nbsp ;{ & nbsp ;& nbsp ;& nbsp ;& nbsp ;color : '#4e2d87' , & nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0.166 , & nbsp ;& nbsp ;& nbsp ;} , & nbsp ;& nbsp ;& nbsp ;{ & nbsp ;& nbsp ;& nbsp ;& nbsp ;color : '#5d32a8' , & nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0.332 , & nbsp ;& nbsp ;& nbsp ;} , & nbsp ;& nbsp ;& nbsp ; & nbsp ;& nbsp ;{ & nbsp ;& nbsp ;& nbsp ;& nbsp ;color : '#7139d4' , & nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0.498 , & nbsp ;& nbsp ;& nbsp ;} , & nbsp ;& nbsp ;{ & nb sp;; color : '#853fff' , < br / > & nb sp;; ratio : 0.664 , < br / > & nb sp;; } , < br / >< br / > & nb sp;; { < br / > & nb sp;; color : '#c29f80' , < br / > & nb sp;; ratio : 0.83 , < br / > & nb sp;; } , < br / > & nb sp;; { < br / > & nb sp;; color : '#ffff00' , < br / > & nb sp;; ratio : 1 , < br / > & nb sp;; } , < br / > ], < br / > & nb sp;; maxPixelIntensity : 500 , < br / > & nb sp;; minPixelIntensity : 0 , < br / > & nb sp;; blurRadius : 10 , < br / > }; < br / >< br / > const layer = new FeatureLayer({ < br / > & nb sp;; source : features, // autocast como um array de esri/Graphic // criar uma instância de esri/layers/support/Field para cada objeto field fields : fields, // Isso é necessário ao criar uma camada a partir de Graphics objectIdField : 'ObjectID', // Isso deve ser definido ao criar uma camada a partir de Graphics renderer : renderer, // definir a visualização na camada id : '324234234234', outFields : ['ObjectID', 'name', 'value']}); map.add(layer); }); }); siga o exemplo ArcGIS API for JavaScript Sandbox Nao sei onde este problema está errado.<\/P><\/BODY><\/HTML>

RobertScheitlin__GISP · Accepted Answer

Your main issue is that you where creating your graphics with the X and Y reversed. You also have so watch out for commas after your last item in your object (i.e. line 31 and 61 had a comma but there was no other item following it in the array). Here is your code working. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Create a FeatureLayer with client side graphics - 4.11</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/views/MapView", "esri/Map", "esri/layers/FeatureLayer", "esri/geometry/Point", "esri/widgets/Legend", "esri/config", "esri/request", 'esri/Graphic' ], function(MapView, Map, FeatureLayer, Point, Legend, esriConfig, esriRequest, Graphic ) { var map = new Map({ basemap: "dark-gray" }); // Create MapView var view = new MapView({ container: "viewDiv", map: map, center: [-144.492, 62.771], zoom: 5 }); const geodata = [ { name: 'data1', value: 109, pnt: [-143.492, 62.771], }, { name: 'data2', value: 302, pnt: [-143.492, 62.771], }, { name: 'data3', value: 459, pnt: [-143.492, 62.771], } ]; const features = geodata.map((item, i) => new Graphic({ geometry: { type: 'point', x: item.pnt[0], y: item.pnt[1], }, attributes: { ObjectID: i, name: item.name, value: item.value, } })); view.when(() => { const fields = [{ name: 'ObjectID', alias: 'ObjectID', type: 'oid', }, { name: 'name', alias: 'name', type: 'string', }, { name: 'value', alias: 'value', type: 'integer', } ]; const renderer = { type: 'heatmap', field: 'value', colorStops: [{ color: 'rgba(63, 40, 102, 0)', ratio: 0, }, { color: '#4e2d87', ratio: 0.166, }, { color: '#5d32a8', ratio: 0.332, }, { color: '#7139d4', ratio: 0.498, }, { color: '#853fff', ratio: 0.664, }, { color: '#c29f80', ratio: 0.83, }, { color: '#ffff00', ratio: 1, }, ], maxPixelIntensity: 500, minPixelIntensity: 0, blurRadius: 10, }; const layer = new FeatureLayer({ source: features, // 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 }); map.add(layer); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍