<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>クライアントサイドグラフィックスでFeatureLayerを作成する - 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"
});
\/\/- 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,
},
{
color: '#4e2d87',
      ratio: 0.166,
& nbsp    },
& nbsp    { < br />& nbsp     color : '#5d32a8' , < br />& nbsp     ratio : 0.332 , < br />& nbsp    } ,& nbsp  
& nbsp  { < br />& nbsp    color : '#7139d4' , < br />& nbsp    ratio : 0.498 , < br />& nbsp   } , < br />& nbsp  { < br />& nbsp    color : '#853fff' , < br />& nbsp   ratio : 0.664 , < br />& nbsp } , < br />
& nbsp { < br />& nbsp color : '#c29f80' , < br />& nbsp ratio : 0.83 , < br />& nbsp } , < br />& nbsp { < br />& nbsp color : '#ffff00' , < br />& nbsp ratio : 1 , < br />& nbsp } , < br />& nbsp ] , < br />& nbsp maxPixelIntensity : 500 , < br />& nbsp minPixelIntensity : 0 , < br />& nbsp blurRadius : 10 , < br />} ; < br />
const layer = new FeatureLayer({ < br />& nbsp source : features , // esri/Graphicの配列として自動キャストされます
// 各フィールドオブジェクトに対してesri/layers/support/Fieldのインスタンスを作成します
fields : fields , // Graphicsからレイヤーを作成するときに必要です
objectIdField : 'ObjectID' , // Graphicsからレイヤーを作成するときに定義する必要があります
renderer : renderer , // レイヤーのビジュアライゼーションを設定します
id : '324234234234' , < br / > outFields : ['ObjectID', 'name', 'value'] }); map.add(layer); }); }); < /head>< /body>< /html>
