有个项目需要用热区图,经研究发现,热区图渲染HeatmapRenderer在ArcGIS js API出现在3.11以后的版本(Added at v3.11),需求是要在自定义的图层里,临时绘制的,不是实际的图层,实现热区图效果,既然不是实际的图层,那也只能在GraphicsLayer存放要素类,但是,HeatmapRenderer仅支持FeatureLayer类型的图层,使用GraphicsLayer没有效果,最后,想到的解决办法是,创建了一个空的FeatureLayer图层,每当需要显示的时候,读取数据,将graphic一个个添加到该图层里即可。其实,FeatureLayer就是GraphicsLayer的一个扩展类。
代码
EsriMethods.addFHeatMapLayer=function() {
//=====================================
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "ID",
"type": "esriFieldTypeInteger",
"alias": "ID"
}]
};
var featureCollection = {
layerDefinition: layerDefinition,
featureSet:null
};
var hFeatureLayer = new EsriDojo.FeatureLayer(featureCollection,{
mode: EsriDojo.FeatureLayer.MODE_SNAPSHOT,
opacity:1});
//hFeatureLayer.graphics=EsriMap.heatMapLayer.graphics;
EsriMap.map.addLayer(hFeatureLayer);
var heatmapRenderer = new EsriDojo.HeatmapRenderer({
// field: "ID",
blurRadius: 10,
maxPixelIntensity: 30,
minPixelIntensity: 0
});
//var heatmapRenderer = new EsriDojo.HeatmapRenderer();
heatmapRenderer.setColorStops([
{ ratio: 0, color: "rgb(255, 219, 0, 0)"},
{ ratio: 0.6, color: "rgb(250, 146, 0)"},
{ ratio: 0.85, color: "rgb(250, 73, 0)" },
{ ratio: 0.95, color: "rgba(250, 0, 0)" }
]);
hFeatureLayer.setRenderer(heatmapRenderer);
return hFeatureLayer;
}
更新:
if(EsriMap.heatMapLayer)
EsriMap.heatMapLayer.clear();//清除
else{
EsriMap.heatMapLayer=EsriMethods.addFHeatMapLayer();
}
var data = {
sDate : $('#sDateInput').val(),
eDate : $('#eDateInput').val(),
district: district
};
$.ajax({
type : 'POST',
url : 'rest/system/case/AllCaseByDateToMap/',
data : JSON3.stringify(data),
success : function(result) {
if (result.code == "SUCCESS") {
var jsonStr = result.data;
var jsonObj = eval(jsonStr);
//转json
//====================
for(var i=0;i<jsonObj.length;i++){
var item=jsonObj[i];
var currentItem={
ID:item.ID,
X:item.X,
Y:item.Y
};
var s=new EsriDojo.SpatialReference({"wkid":4326});
var pt=new EsriDojo.Point(item.X,item.Y,s);
var g= new EsriDojo.Graphic(pt,EsriMap.heatMarkerSymbol,currentItem,null);
//g.setAttributes(currentItem);
//g.setSymbol(EsriMap.markerSymbol);
EsriMap.heatMapLayer.add(g);
}
} else {
alert("错误");
}
},
dataType : "json",
contentType : "application/json"
});