<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Créer un FeatureLayer avec des graphiques côté client - 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"
});
\/\/- Créer 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 ;& nbsp ;& nbsp ;color : 'rgba(63, 40, 102, 0)',
& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;ratio : 0,
& nbsp ;& nbsp ;& nbsp ;& nbsp ;},
& 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 ; color : '#7139d4',
& nbsp ;& nbsp ;& nbsp ; ratio : 0.498,
& nbsp ;& nbsp ; },
& nb sp; { < br / > color : '#853fff' , ratio : 0.664 , } , < br / >< br / > { 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 , // Ceci est requis lors de la création d'une couche à partir de Graphics objectIdField : 'ObjectID' , // Ceci doit être défini lors de la création d'une couche à partir de Graphics renderer : renderer , // définir la visualisation sur la couche id : '324234234234' , outFields : ['ObjectID' , 'name' , 'value'] }); map.add(layer); }); }); < /head>< /div>
