热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js
因为arcigs for javascript api 是以dojo为基础写的，所以加载类库方式以下
写了工具类去使用这个类库
/** * 管理热点图展示 关闭 这里默认以社区为单位 url可改 热点图需要在主页面加上热点 div层 类似map的div * 这个版本先以一个xml来展示 以后改为json的格式 */var heatlayermanager = function(){ var map; var heatlayer; var graphiclayer; var polygontemp; var queryvo= new queryvo(); var ajaxtool; var locateparameter = new locateparameter(); var symboltool; var ismouseinfo = true; //查询社区的url来覆盖 人口信息 var parambackfun; function renderquery(queryvo1,polygon,roundflag,parambackfun1) { parambackfun = parambackfun1; var layername = queryvo1.layername; graphiclayer.clear(); var url = locateparameter.geturl(layername); if(url != ) { var querytask = new esri.tasks.querytask(url); var query = new esri.tasks.query(); if(layername != shi) { query.geometry = polygon; } else { query.where = fid >= 0 } query.returngeometry = true; query.outspatialreference = map.spatialreference; if(roundflag == false) { query.spatialrelationship = esri.tasks.query.spatial_rel_contains; } query.outfields = [*]; querytask.execute(query, handle); } } function handle(idresults) { graphiclayer.clear(); var param = new object(); param.codearr = []; for (var i = 0, il = idresults.features.length; i < il; i++) { var idresult = idresults.features[i]; var polygon = idresult.geometry; var gra = new esri.graphic(polygon); var attributes = idresult.attributes; param.codearr[i] = attributes[locateparameter.getcodename(queryvo.layername)]; var graattribute = new object(); graattribute[code] = attributes[locateparameter.getcodename(queryvo.layername)]; gra.setattributes(graattribute); gra.setsymbol(symboltool.getsymbol(heat)); graphiclayer.add(gra); } parambackfun(param); } //查询java后台 组织json参数 function ajaxquery(param) { param.startdate = queryvo.startdate; param.enddate = queryvo.enddate; param.layername = queryvo.layername; param.tjfs = queryvo.tjfs; var str = json.stringify(param); //alert(ajaxquery-param: +str); //--------------------------------------测试环境用 ajaxtool.getliudongdata1(str,ajaxback); //------------------------------------- //--------------------------------------真实环境用 // ajaxtool.getliudongdata(str,ajaxback); //------------------------------------- } function ajaxback(obj,num1) { //组装 map对象便于遍历graphic if('2'==queryvo.tjfs){ alert(时间段); var arr = obj.codearr; }else{ var arr = obj.codearr; var mapobj = new object(); for(var i = 0, l = arr.length; i < l; i++) { var arrobj = arr[i]; mapobj[arrobj.code] = arrobj; //alert(ajaxback: +arrobj.code); } //--------------------------------------真实环境用 //var graarr = graphiclayer.graphics; //var dataarr = []; //for(var j = 0, m = graarr.length; j < m; j++) //{ // var gra = graarr[j]; // var codevalue = gra.attributes[code]; // // 暂时码值转换 // var codeobj; // if(shi==queryvo.layername){ // //alert(changeareacode(codevalue)); // codeobj = mapobj[changeareacode(codevalue)]; // }else{ // codeobj = mapobj[codevalue]; // } // //alert(codevalue: +codevalue); // if(codeobj!=null){ // var pcount = codeobj.pcount; // var point = gra.geometry.getcentroid(); // var feobj = { // attributes: {count:number(pcount)}, // geometry: { // spatialreference: map.spatialreference, // type: point, // x: point.x, // y: point.y // // } // } // dataarr.push(feobj); // } // gra.attributes[codevaue] = codeobj; //} //------------------------------------- //--------------------------------------测试环境用 var graarr = graphiclayer.graphics; var dataarr = []; var pcountnum = 0.1; for(var j = 0, m = graarr.length; j < m; j++) { var gra = graarr[j]; var codevalue = gra.attributes[code]; var codeobj = mapobj[440304008001]; var pcount = pcountnum; var point = gra.geometry.getcentroid(); var feobj = { attributes: {count:number(pcount)}, geometry: { spatialreference: map.spatialreference, type: point, x: point.x, y: point.y } } if(num1 == undefined) { num1 = 0.01 } pcountnum = pcountnum + num1; dataarr.push(feobj); gra.attributes[codevaue] = codeobj; } //------------------------------------- heatlayer.setdata(dataarr); } } /** * 外界返回鼠标移动查询填充图层 * @returns {*} */ this.getheatlocatelayer = function() { return graphiclayer; } /** * 外界返回热点图层 * @returns {*} */ this.getheatlayer = function() { return heatlayer; } /** * 初始化热点图 * @param healayerdiv 主页heatlayer div的id * @param map1 */ this.init = function initheatlayer(healayerdiv,map1) { map = map1; heatlayer = new heatmaplayer({ config: { uselocalmaximum: true, radius: 40, gradient: { 0.45: rgb(000,000,255), 0.55: rgb(000,255,255), 0.65: rgb(000,255,000), 0.95: rgb(255,255,000), 1.00: rgb(255,000,000) } }, map: map, domnodeid: healayerdiv, opacity: 0.85 }); graphiclayer = new esri.layers.graphicslayer(); map.addlayer(heatlayer); map.addlayer(graphiclayer); ajaxtool = new ajaxtool(); symboltool = new symboltool(); // map.resize(); } this.ajaxbackfun= function(obj,num1) { ajaxback(obj,num1); } /** * 根据查询数据渲染热点图 * 现在可能是固定死的xml，下次 转json 可能要有参数 以后定 */ this.addrender = function(queryvo1,polygon) { addrenderfun(queryvo1,polygon,ajaxquery) } //简化方法类 增加回调 function addrenderfun(queryvo1,polygon,parambackfun1) { polygontemp = polygon; queryvo = queryvo1; renderquery(queryvo,polygon,false,parambackfun1); } /** * * @param queryvo1 * @param polygon * @param parambackfun1 */ this.addrendercallback = function(queryvo1,polygon,parambackfun1) { addrenderfun(queryvo1, polygon, parambackfun1); } /** * 清除热点图的数据 */ this.clearheatlayer = function() { heatlayer.cleardata(); } function changeareacode(code){ var resucode=; var areacode = [440305,440326,440306,440309,440308, 440304,440303,440327,440317,440307]; var mapcode = [440305002,440306007,440306001,440306012,440308001, 440304003,440303005,440307012,440307009,440307006]; for(i=0;i