javascript如何写热点图

在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="jslibary/heatmap.js"></script> <script src="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对象便于遍历graphicif（"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; }}

以上就是为大家分享的如何实现热点图的关键代码，希望对大家的学习有所帮助。