javascript如何写热点图_javascript技巧

热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js

因为arcigs for javascript api 是以dojo为基础写的，所以加载类库方式以下

 var djConfig = {
 parseOnLoad: true


 };
 

 
 

写了工具类去使用这个类库

/**
 * 管理热点图展示 关闭 这里默认以社区为单位 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