有个项目需要用热区图,经研究发现,热区图渲染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" });