Since arcGIS for JSAPI changed from 3 to 4, it has changed a lot. Many examples on the original network seem to be outdated. For example, the combination of Echart and ArcGIS is for 3.x, but not in the era of 4.

The same goes for the thermal map.

Now I will give an example, independent of arcGIS server, directly render:

The idea is to draw, and draw in FeatureLayer. So how do I draw that? The heatmap has a special renderer: HeatmapRenderer. Assign the style to the renderer, and then the renderer, point data, and so on will participate in the construction of FeatureLayer.

<! DOCTYPEhtml>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
	<title>heatMap</title>
	<link rel="stylesheet" type="text/css" href="http://192.168.0.211/pubzy/arcgis_js_api/4.10/esri/css/main.css" />
	<style>
		html.body.#map {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
	</style>
	<script src="http://192.168.0.211/pubzy/media/js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="http://192.168.0.211/pubzy/arcgis_js_api/4.10/init.js"></script>
</head>

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

<script>
 require(["esri/map"."esri/views/MapView"."esri/Basemap"."esri/geometry/Extent"."esri/layers/TileLayer"."esri/layers/FeatureLayer"."esri/renderers/HeatmapRenderer"."dojo/domReady!"].function (Map,
MapView,
BaseMap,
Extent,
TileLayer,  
FeatureLayer,
HeatmapRenderer) {
  
  	let map, view;
	(function () {// Load the base map, etc
		map = new Map({
			basemap: getBaseMap({
				"title": "Image map"."thumbnailUrl": "Images /map/ image.gif"."type": "tile"."layer": "http://192.168.0.206:6080/arcgis/rest/services/HNJCZS/HNJCZSYXT/MapServer"})}); view =new MapView({
			container: "map".map: map,
			extent: new Extent({
			  "xmin": 105."ymin": 18."xmax": 115."ymax": 20."spatialReference": { "wkid": 4326}})}); view.ui._removeComponents(["attribution"]); }) ();function getBaseMap(basemapcof) {
		let baselayer = new TileLayer({
			url: basemapcof.layer,
		});
		return new BaseMap({
			baseLayers: baselayer,
			title: basemapcof.title,
			thumbnailUrl: ".. /" + basemapcof.thumbnailUrl,
		});
	}
	
    var heatmapRenderer = new HeatmapRenderer({// Set the renderer
      colorStops: [{ ratio: 0.4.color: "rgba(0, 255, 0, 0)" },
	    { ratio: 0.75.color: "rgba(255, 140, 0, 1)" },
		{ ratio: 0.9.color: "rgba(255, 0, 0, 1)"}].blurRadius: 8.maxPixelIntensity: 230.minPixelIntensity: 10
    });

    var heatDataUrl = "data/heatJson.json";
    $.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){// Read the data and set the point data set
		var features = [];
		for (var i = 0; i < data.heatData.length; i++) {
			var x = data.heatData[i].lng;
			var y = data.heatData[i].lat;
			features.push({
				geometry: {
					type: "point".x: x,
					y: y
				},
				attributes: {
					ObjectID: i,// Important!!}}); }var featureLayer = new FeatureLayer({
			  source: features,// point data set
			  title: "Thermal map".objectIdField: "ObjectID".// Important!!
			  renderer: heatmapRenderer/ / the renderer
		});
		
		map.add(featureLayer);
    });

});
</script>
</html>
Copy the code

Point data is very simple, JSON format, just longitude and latitude

{" heatData ": [{" LNG" : "108.51293787947446", "lat" : "18.899562096488552"}, {" LNG ":" 108.38702921054004 ", "lat" : "19.1517613376567 23"},...Copy the code

Can be downloaded from the resources LXQJSS. Making. IO/data/heatJs…

But this position is in Hangzhou, I changed it to Hainan. Hainan’s can be downloaded here:

Hainan thermal map data

This download score is automatically set by CSDN, I usually set it to 1. To be honest, CSDN does a lot of bad stuff.

Heatmaps have a name for themselves: HeatMap.

Reference: ArcGIS JS API: Thermal map

Arcgis for JSAPI has two examples on its official website. One seems to show layers directly, and the other relies on CSVLayer, which seems quite complicated.

Developers.arcgis.com/javascript/…

Developers.arcgis.com/javascript/…