1 官網的例子參考
https://developers.arcgis.com/javascript/3/jssamples/renderer_heatmap.html
2 簡單發布一個點圖層featureserver，一個自己的熱力圖簡單demo
2.1 在浙江范圍內隨意繪制幾個點
image.png
2.2 將其發布為featureserver服務
image.png
2.3調用代碼
<!DOCTYPE html>
<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"
/>
<link rel="stylesheet" type="text/css"
/>
<script type="text/javascript" src="http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/init.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
require([
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/map",
"esri/renderers/HeatmapRenderer",
"dojo/domReady!"
],
function (ArcGISTiledMapServiceLayer, FeatureLayer, Map, HeatmapRenderer){
map = new Map("map", {
center: [120.243, 30.256],
zoom: 7,
minZoom: 7,
maxZoom: 9
});
var tiledUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var TiledLayer = new ArcGISTiledMapServiceLayer(tiledUrl);
map.addLayer(TiledLayer);
var heatFeatureServiceURL = "http://10.10.5.155:6080/arcgis/rest/services/heatmap/heatmap/FeatureServer/1";
var heatmapFeatureLayerOptions = {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
};
var heatmapFeatureLayer = new FeatureLayer(heatFeatureServiceURL, heatmapFeatureLayerOptions);
var heatmapRenderer = new HeatmapRenderer();
heatmapFeatureLayer.setRenderer(heatmapRenderer);
map.addLayer(heatmapFeatureLayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
2.4 運行后看到一個不好看的效果
image.png
2.5代碼解讀
heatmapFeatureLayer.setRenderer(heatmapRenderer);
可以看到，熱力圖只是一個點圖層(featureLayer)通過設置渲染方式后生成的，而如何設置渲染方式將會影響最終的熱力圖效果。
參考: arcgis js api:HeatmapRenderer
end 2 簡單demo結束
3 設置HeatmapRenderer，配置熱力圖顯示效果
3.1 采用官網提供的一個配置設置如下
var heatmapRenderer = new HeatmapRenderer({
colors: ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"],
blurRadius: 22,
maxPixelIntensity: 250,
minPixelIntensity: 10
});
對應的顯示效果改變了：
image.png
3.2 引用前人翻譯的api官網上對參數的解釋如下，中文解釋原文鏈接
blurRadius ：Number類型（可選的）。點的影響半徑（以像素為單位），每個點的大部分點遍布在其上。默認值：10
colors：String[]類型（必須的）。一組CSS顏色字符串（#RGB或#RRGGBB
或rgb（r，g，b）或rgba（r，g，b，a））。需要至少2個元素，以便于描述
渲染器將使用的顏色斜坡。
field：String類型（可選的）。用于加權熱力圖點的屬性字段的名稱。
maxPixelIntensity：Number類型（可選的）。在顏色斜坡中分配最終顏色的 像素強度值。高于此數字的值也將被分配最終的顏色漸變顏色。默認值： 100。
minPixelIntensity：Number類型（可選的）。在顏色斜坡中分配初始顏色的像素強度值。低于此數字的值也將分配初始顏色漸變顏色。默認值：0。
4 不依賴arcgis featureserver服務的熱力圖如何實現
4.1先看效果圖 訪問鏈接：https://lxqjss.github.io/test/heatMapWithoutServer.html
image.png
4.2 請求的點位數據已經上傳到github上供測試調用：
https://lxqjss.github.io/data/heatJson.json
4.3 具體代碼如下
<!DOCTYPE html>
<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"
/>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://js.arcgis.com/3.23/init.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
var map;
require(["esri/map","esri/renderers/HeatmapRenderer", "dojo/domReady!"], function (Map,HeatmapRenderer) {
map = new Map("map", {
zoom: 8,
// maxZoom: 8,
// minZoom: 8,
center: [120.243, 29.056],
logo: false
});
var tiledUrl = "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var TiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(tiledUrl);
map.addLayer(TiledLayer);
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "ID",
"type": "esriFieldTypeInteger",
"alias": "ID"
}]
}
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: null
};
var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
opacity: 1
});
var heatmapRenderer = new HeatmapRenderer({
colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 255, 0)", "rgb(255, 0, 0)"],
blurRadius: 8,
maxPixelIntensity: 230,
minPixelIntensity: 10
});
featureLayer.setRenderer(heatmapRenderer);
map.addLayer(featureLayer);
var heatDataUrl = "https://lxqjss.github.io/data/heatJson.json";
$.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){
for (var i = 0; i < data.heatData.length; i++) {
var x = data.heatData[i].lng;
var y = data.heatData[i].lat;
var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));
featureLayer.add(new esri.Graphic(point));
}
});
});
</script>
</html>
5 帶權重值的熱力圖
比如一個點位代表著一棟樓，每棟樓產生的數據有不同；如果要展示每個點位代表的數值形成的熱力圖，就要做一些設置。
5.1 帶權重值的數據（只多了一個num字段，看下圖）
調用數據 ： https://lxqjss.github.io/data/heatJson2.json
image.png
5.2 代碼如下
<!DOCTYPE html>
<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"
/>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://js.arcgis.com/3.23/init.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
var map;
require(["esri/map","esri/renderers/HeatmapRenderer", "dojo/domReady!"], function (Map,HeatmapRenderer) {
map = new Map("map", {
zoom: 8,
// maxZoom: 8,
// minZoom: 8,
center: [120.243, 29.056],
logo: false
});
var tiledUrl = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var TiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(tiledUrl);
map.addLayer(TiledLayer);
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "num",
"type": "esriFieldTypeInteger",
"alias": "num"
}]
}
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: null
};
//創建FeatureLayer圖層
var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
opacity: 1
});
var heatmapRenderer = new HeatmapRenderer({
field: "num",
colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 255, 0)", "rgb(255, 0, 0)"],
blurRadius: 12,
// maxPixelIntensity: 20,
// minPixelIntensity: 2
});
featureLayer.setRenderer(heatmapRenderer);//heatmapRendererhtml中創建的渲染器
map.addLayer(featureLayer);
var heatDataUrl = "https://lxqjss.github.io/data/heatJson2.json";
$.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){
for (var i = 0; i < data.heatData.length; i++) {
var x = data.heatData[i].lng;
var y = data.heatData[i].lat;
var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));//初始化起點
var graphic =new esri.Graphic(point);
graphic.setAttributes( {"num":Number(data.heatData[i].num)});
featureLayer.add(graphic);
}
});
});
</script>
</html>
2018.6.21再次更新熱力圖樣式如下
image.png
var heatmapRenderer = new HeatmapRenderer({
field : "num",
colors : [ "rgba(0, 0, 255, 0)","rgba(0, 0, 255, 0.4)","rgba(0, 0, 255, 0.7)", "rgb(117,211,248)", "rgb(0, 255, 0,0.5)", "rgb(0, 255, 0,1)","rgb(255, 255, 0,0.5)","rgb(255, 255, 0,1)", "rgb(255, 0, 0,0.8)", ],
// TODO blurRadius和maxPixelIntensity要隨著層級和數據的變化而改變
blurRadius : 8,
maxPixelIntensity : 100000,
minPixelIntensity : 0
});
參考：
https://developers.arcgis.com/javascript/3/jsapi/featurelayer-amd.html#featurelayer2
https://developers.arcgis.com/javascript/3/jsapi/heatmaprenderer-amd.html
前人經驗 ：
https://blog.csdn.net/u014572215/article/details/77336221?locationNum=9&fps=1
http://www.lxweimin.com/p/7c1cee69c318
