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

849
3
08-01-2018 03:34 AM
OrCohen
New Contributor

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.

3 Replies
ReneRubalcava
Frequent Contributor II

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 

成磊司
New Contributor

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>

<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css">
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/geometry/Point",
"esri/Graphic",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/renderers/HeatmapRenderer",
"dojo/domReady!"
], function (
Map, MapView, FeatureLayer, Legend, Point, Graphic, Query, QueryTask, HeatmapRenderer,
) {
var map = new Map({
basemap: "streets"
});

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>

<body>
<div id="viewDiv"></div>
</body>

</html>

0 Kudos
成磊司
New Contributor

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

0 Kudos