在gis中，你如果用js来写热点图 不借助后台怎么搞，as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务，（注：热点图可以借助服务的形式发布，arcgis for javascript有相应的api支持的），这个时候就比较麻烦了，首先说明下热点图是啥
热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js
因为arcigs for javascript api 是以dojo为基础写的，所以加载类库方式以下
1 <script type="text/javascript"> 2 var djConfig = { 3 parseOnLoad: true 4 5 6 }; 7 </script> 8 9 <script src='/images/loading.gif' data-original="jslibary/heatmap.js"></script>10 <script src='/images/loading.gif' data-original="jslibary/heatmap-arcgis.js"></script> 写了工具类去使用这个类库
1 /** 2 * Created by haibalai on 2015/9/23. 3 * 管理热点图展示 关闭 这里默认以社区为单位 url可改 热点图需要在主页面加上热点 div层 类似map的div 4 * 这个版本先以一个 5 */ 6 var HeatLayerManager = function() 7 { 8 var map; 9 10 var heatLayer; 11 12 var graphicLayer; 13 14 var polygonTemp; 15 16 var queryVo= new QueryVO(); 17 18 var ajaxTool; 19 20 var locateParameter = new LocateParameter(); 21 22 var symbolTool; 23 24 var isMouseInfo = true; 25 26 //查询社区的url来覆盖 人口信息 27 var paramBackFun; 28 function renderQuery(queryVo1,polygon,roundFlag,paramBackFun1) 29 { 30 paramBackFun = paramBackFun1; 31 var layerName = queryVo1.layerName; 32 graphicLayer.clear(); 33 var url = locateParameter.getUrl(layerName); 34 if(url != "") 35 { 36 var querytask = new esri.tasks.QueryTask(url); 37 var query = new esri.tasks.Query(); 38 39 if(layerName != "shi") 40 { 41 query.geometry = polygon; 42 } 43 else 44 { 45 query.where = "FID >= 0" 46 } 47 query.returnGeometry = true; 48 query.outSpatialReference = map.spatialReference; 49 if(roundFlag == "false") 50 { 51 query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS; 52 } 53 query.outFields = ["*"]; 54 querytask.execute(query, handle); 55 } 56 } 57 58 59 60 function handle(idResults) 61 { 62 graphicLayer.clear(); 63 64 var param = new Object(); 65 param.codearr = []; 66 for (var i = 0, il = idResults.features.length; i < il; i++) 67 { 68 var idResult = idResults.features[i]; 69 70 var polygon = idResult.geometry; 71 72 var gra = new esri.Graphic(polygon); 73 74 var attributes = idResult.attributes; 75 76 param.codearr[i] = attributes[locateParameter.getCodeName(queryVo.layerName)]; 77 78 var graattribute = new Object(); 79 graattribute["code"] = attributes[locateParameter.getCodeName(queryVo.layerName)]; 80 gra.setAttributes(graattribute); 81 gra.setSymbol(symbolTool.getSymbol("heat")); 82 graphicLayer.add(gra); 83 } 84 paramBackFun(param); 85 86 } 87 88 //查询java后台 组织json参数 89 function ajaxQuery(param) 90 { 91 param.startDate = queryVo.startDate; 92 param.endDate = queryVo.endDate; 93 param.layerName = queryVo.layerName; 94 param.tjfs = queryVo.tjfs; 95 var str = JSON.stringify(param); 96 97 //alert("ajaxQuery-param: "+str); 98 //--------------------------------------测试环境用 99 ajaxTool.getLiuDongData1(str,ajaxBack);100 //-------------------------------------101 102 103 //--------------------------------------真实环境用104 // ajaxTool.getLiuDongData(str,ajaxBack);105 //-------------------------------------106 }107 108 function ajaxBack(obj,num1)109 {110 //组装 map对象便于遍历graphic111 if('2'==queryVo.tjfs){112 alert("时间段");113 var arr = obj.codearr;114 115 }else{116 var arr = obj.codearr;117 var mapobj = new Object();118 for(var i = 0, l = arr.length; i < l; i++)119 {120 var arrobj = arr[i];121 mapobj[arrobj.CODE] = arrobj;122 //alert("ajaxBack: "+arrobj.CODE);123 }124 125 //--------------------------------------真实环境用126 //var graarr = graphicLayer.graphics;127 //var dataarr = [];128 //for(var j = 0, m = graarr.length; j < m; j++)129 //{130 // var gra = graarr[j];131 // var codeValue = gra.attributes["code"];132 // // 暂时码值转换133 // var codeobj;134 // if("shi"==queryVo.layerName){135 // //alert(changeAreaCode(codeValue));136 // codeobj = mapobj[changeAreaCode(codeValue)];137 // }else{138 // codeobj = mapobj[codeValue];139 // }140 // //alert("codeValue: "+codeValue);141 // if(codeobj!=null){142 // var pcount = codeobj.PCOUNT;143 // var point = gra.geometry.getCentroid();144 // var feobj = {145 // attributes: {count:Number(pcount)},146 // geometry: {147 // spatialReference: map.spatialReference,148 // type: "point",149 // x: point.x,150 // y: point.y151 //152 // }153 // }154 // dataarr.push(feobj);155 // }156 // gra.attributes["codeVaue"] = codeobj;157 //}158 //-------------------------------------159 160 //--------------------------------------测试环境用161 var graarr = graphicLayer.graphics;162 var dataarr = [];163 var pcountnum = 0.1;164 for(var j = 0, m = graarr.length; j < m; j++)165 {166 var gra = graarr[j];167 var codeValue = gra.attributes["code"];168 var codeobj = mapobj["440304008001"];169 var pcount = pcountnum;170 var point = gra.geometry.getCentroid();171 var feobj = {172 attributes: {count:Number(pcount)},173 geometry: {174 spatialReference: map.spatialReference,175 type: "point",176 x: point.x,177 y: point.y178 179 }180 181 }182 if(num1 == undefined)183 {184 num1 = 0.01185 }186 pcountnum = pcountnum + num1;187 dataarr.push(feobj);188 189 gra.attributes["codeVaue"] = codeobj;190 }191 //-------------------------------------192 193 heatLayer.setData(dataarr);194 }195 }196 197 /**198 * 外界返回鼠标移动查询填充图层199 * @returns {*}200 */201 this.getHeatLocateLayer = function()202 {203 return graphicLayer;204 }205 206 /**207 * 外界返回热点图层208 * @returns {*}209 */210 this.getHeatlayer = function()211 {212 return heatLayer;213 }214 215 216 /**217 * 初始化热点图218 * @param healayerdiv 主页heatlayer div的id219 * @param map1220 */221 this.init = function initHeatLayer(healayerdiv,map1)222 {223 map = map1;224 heatLayer = new HeatmapLayer({225 config: {226 "useLocalMaximum": true,227 "radius": 40,228 "gradient": {229 0.45: "rgb(000,000,255)",230 0.55: "rgb(000,255,255)",231 0.65: "rgb(000,255,000)",232 0.95: "rgb(255,255,000)",233 1.00: "rgb(255,000,000)"234 }235 },236 "map": map,237 "domNodeId": healayerdiv,238 "opacity": 0.85239 });240 241 242 graphicLayer = new esri.layers.GraphicsLayer();243 map.addLayer(heatLayer);244 map.addLayer(graphicLayer);245 246 ajaxTool = new AjaxTool();247 symbolTool = new SymbolTool();248 249 // map.resize();250 251 }252 253 this.ajaxBackFun= function(obj,num1)254 {255 ajaxBack(obj,num1);256 }257 258 /**259 * 根据查询数据渲染热点图260 * 现在可能是固定死的261 */262 this.addRender = function(queryVo1,polygon)263 {264 addRenderFun(queryVo1,polygon,ajaxQuery)265 266 }267 268 //简化方法类 增加回调269 function addRenderFun(queryVo1,polygon,paramBackFun1)270 {271 polygonTemp = polygon;272 queryVo = queryVo1;273 274 renderQuery(queryVo,polygon,"false",paramBackFun1);275 }276 277 /**278 *279 * @param queryVo1280 * @param polygon281 * @param paramBackFun1282 */283 284 this.addRenderCallBack = function(queryVo1,polygon,paramBackFun1)285 {286 addRenderFun(queryVo1, polygon, paramBackFun1);287 }288 289 290 /**291 * 清除热点图的数据292 */293 this.clearHeatLayer = function()294 {295 heatLayer.clearData();296 }297 298 function changeAreaCode(code){299 var resuCode="";300 var areaCode = ["440305","440326","440306","440309","440308",301 "440304","440303","440327","440317","440307"];302 var mapCode = ["440305002","440306007","440306001","440306012","440308001",303 "440304003","440303005","440307012","440307009","440307006"];304 for(i=0;i<areaCode.length;i++){305 if(code==mapCode[i]){306 resuCode = areaCode[i];307 break;308 }309 }310 return resuCode;311 }312 313 }
原标题：javascript的 热点图怎么写
关键词：JavaScript
我知道了 