<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Crear un FeatureLayer con gráficos del lado del cliente - 4.10<\/title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
<\/style>
<link rel="stylesheet" href="https:\/\/js.arcgis.com\/4.10\/esri\/css\/main.css">
<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"
});
\/\/- Crear 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 = {
& nbsp ;& nbsp ;& nbsp ;type : 'heatmap' ,
& nbsp ;& nbsp ;& nbsp ;field : 'value' ,
& nbsp ;& nbsp ;& nbsp ;colorStops : [
& nbsp ;& nbsp ;& nbsp ;{
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;color : 'rgba(63, 40, 102, 0)' ,
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0 ,
& nbsp ;& nbsp ;& nbsp ;} ,
& nbsp ;& nbsp ;{
& nbsp ;& nbsp ;& nbsp ;& nbsp ;color : '#4e2d87' ,
& nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0.166 ,
& nbsp ;& nbsp ;} ,
& nbsp ;{
& nbsp ;& nbsp ;color : '#5d32a8' ,
& nbsp ;& nbsp ;ratio : 0.332 ,
} , & nb sp;< br / > < br / > & nb sp;< br / > { < br / > color : '#7139d4' , < br / > ratio : 0.498 , < br / > } , < br / > { < br / > color : '#853fff' , < br / > ratio : 0.664 , < br / > } , < br / >< br / > { < br / > color : '#c29f80' , < br / > ratio : 0.83 , < br / > } , < br / > { < br / > color : '#ffff00' , < br / > ratio : 1 , < br / > } , < br / > ] , < br / > maxPixelIntensity : 500 , < br / > minPixelIntensity : 0 , < br / > blurRadius : 10 , < br / > } ; < br />
const layer = new FeatureLayer({ < br / > source : features, // autocast como un array de esri/Graphic
// crear una instancia de esri/layers/support/Field para cada objeto field
fields : fields, // Esto es requerido al crear una capa a partir de Graphics
objectIdField : 'ObjectID', // Esto debe definirse al crear una capa a partir de Graphics
renderer : renderer, // establecer la visualización en la capa
id : '324234234234',
outFields : ['ObjectID', 'name', 'value'] }); map.add(layer); }); });
