topic Arcgis js api 4.8 - Heatmap renderer won't work on feature layer in ArcGIS JavaScript Maps SDK Questions

Arcgis js api 4.8 - Heatmap renderer won't work on feature layer

OrCohen — Wed, 01 Aug 2018 10:34:14 GMT

Hey !

I'm using the new Arcgis js api 4.8, and try to use the new feature of the Heatmap layer.

I try it both on feature layer from url, and feature layer created from graphics array source.

All others renderers work on those feature layers (uniqueValue, classBreaks, simple..) and only the Heatmap renderer does not work.

I try use with with custom values on the renderer and without any custom options and both ways does not work for me.

Any ideas why ? In the examples of the heatmap, there is only use in CSVlayer.

Re: Arcgis js api 4.8 - Heatmap renderer won't work on feature layer

ReneRubalcava — Wed, 01 Aug 2018 15:01:02 GMT

Do you have a sample of one not working? Make sure you have WebGL enabled, as that is required for Heatmap renderer.

Since you need to define the stops manually, you can try creating it in the webmap and looking at the output renderer object like this sample. heatmap

Re: Arcgis js api 4.8 - Heatmap renderer won't work on feature layer

成磊司 — Tue, 14 Aug 2018 08:04:26 GMT

我这边也试了很多方法，确实没有看到4.8 API中支持的feature of the Heatmap layer，请问，楼主有方案了吗？可以分享吗？

Re: Arcgis js api 4.8 - Heatmap renderer won't work on feature layer

成磊司 — Tue, 21 Aug 2018 01:37:46 GMT

WebGL已经开启了，但是热力图渲染FeatureLayer还是没有效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Data-driven continuous color - 4.8</title>

var view = new MapView({
container: "viewDiv",
map: map,
center: [-110.050200, 40.125524],
zoom: 4
});

var renderer = {
type: "heatmap",
field: "Value",
colorStops: [
{ ratio: 0, color: "rgba(255, 255, 255, 0)" },
{ ratio: 0.2, color: "rgba(255, 255, 255, 1)" },
{ ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
{ ratio: 0.8, color: "rgba(255, 140, 0, 1)" },
{ ratio: 1, color: "rgba(255, 0, 0, 1)" }
],
minPixelIntensity: 0,
maxPixelIntensity: 10
};

var featureLayer = new FeatureLayer({
fields: [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "Value",
alias: "Value",
type: "double"
}],
objectIdField: "ObjectID",
geometryType: "point",
spatialReference: { wkid: 4326 },
renderer: renderer ,
source: [{
geometry: new Point({
x: -120,
y: 40
}),
attributes: {
ObjectID: 1,
Value: 2
}
},
{
geometry: new Point({
x: -100,
y: 38
}),
attributes: {
ObjectID: 2,
Value: 3
}
}
],
});

map.add(featureLayer);
});
</script>
</head>

</html>