Community
Select to view content in your preferred language

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

1664
3
08-01-2018 03:34 AM
OrCohen
by
New Contributor
‎08-01-2018 03:34 AM

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
by Esri Frequent Contributor
Esri Frequent Contributor
‎08-01-2018 08:01 AM

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 

成磊司
by
New Contributor
‎08-20-2018 06:37 PM

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
成磊司
by
New Contributor
‎08-14-2018 01:04 AM

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

0 Kudos