javascript如何写热点图

在gis中，你如果用js来写热点图 不借助后台怎么搞，as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务，(注：热点图可以借助服务的形式发布，arcgis for javascript有相应的api支持的)，这个时候就比较麻烦了，首先说明下热点图是啥？

热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个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

if(code==mapCode[i]){

resuCode = areaCode[i];

break;

}

}

return resuCode;

}

}

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

C++实现图的邻接矩阵存储和广度、深度优先遍历实例分析

分享一个iOS下实现基本绘画板功能的简单方法

asp.net生成缩略图示例方法分享

深入解析PHP中逗号与点号的区别

第三篇Bootstrap网格基础

去掉字符串前后所有空格的正则表达式

Android中制作进度框和环形进度条的简单实例分享

Highcharts入门之简介

如何获得Linux系统的内置模块和设备驱动列表

比较简单的百度网盘文件直链PHP代码

用CSS实现textArea中的placeholder换行功能

深入解析C++和JAVA的字符串

ASP.NET比较常用的26个性能优化技巧

Linux如何提高大文件的拷贝效率以节约时间