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"
href="http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css"
href="http://10.10.5.155:8080/arcgis_js_api_3.20/library/3.20/3.20/esri/css/esri.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"
href="https://js.arcgis.com/3.23/esri/css/esri.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"
href="https://js.arcgis.com/3.23/esri/css/esri.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
https://www.jianshu.com/p/7c1cee69c318
网友评论