在gis中，你如果用js来写热点图 不借助后台怎么搞，as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务，（注：热点图可以借助服务的形式发布，arcgis for javascript有相应的api支持的），这个时候就比较麻烦了，首先说明下热点图是啥？
热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js
因为arcigs for javascript api 是以dojo为基础写的，所以加载类库方式以下
<script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script src="https://www.jb51.net/jslibary/heatmap.js"></script> <script src="https://www.jb51.net/jslibary/heatmap-arcgis.js"></script>
写了工具类去使用这个类库
/** * 管理热点图展示 关闭 这里默认以社区为单位 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<areaCode.length;i++){ if(code==mapCode[i]){ resuCode = areaCode[i]; break; } } return resuCode; } }