<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Maak een FeatureLayer met client side graphics - 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"
});
\/\/- Maak MapView aan
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 ;} ,
& nb sp;;type : 'heatmap' , < br / > colorStops : [ < br / > { 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 als een array van esri/Graphic fields : fields , // Dit is vereist bij het maken van een laag van Graphics objectIdField : 'ObjectID' , // Dit moet worden gedefinieerd bij het maken van een laag van Graphics renderer : renderer , // stel de visualisatie in op de laag id : '324234234234' , outFields : ['ObjectID', 'name', 'value'] }); map.add(layer); }); }); < /head>< br / >< br / >< body > < div id="viewDiv">< /div>< br / >< /body>< br / >< /html>
