javascript如何写热点图
在gis中，你如果用js来写热点图不借助后台怎么搞，as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务，（注：热点图可以借助服务的形式发布，arcgisforjavascript有相应的api支持的），这个时候就比较麻烦了，首先说明下热点图是啥？
热点图是以点的形式展示，通过补全周边变化颜色也会相应的调整渐变，类似于足球某个人的运动范围那种，我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js
因为arcigsforjavascriptapi是以dojo为基础写的，所以加载类库方式以下
<scripttype="text/javascript">
vardjConfig={
parseOnLoad:true
};
</script>
<scriptsrc="jslibary/heatmap.js"></script>
<scriptsrc="jslibary/heatmap-arcgis.js"></script>
写了工具类去使用这个类库
/**
*管理热点图展示关闭这里默认以社区为单位url可改热点图需要在主页面加上热点div层类似map的div
*这个版本先以一个xml来展示以后改为json的格式
*/
varHeatLayerManager=function()
{
varmap;
varheatLayer;
vargraphicLayer;
varpolygonTemp;
varqueryVo=newQueryVO();
varajaxTool;
varlocateParameter=newLocateParameter();
varsymbolTool;
varisMouseInfo=true;
//查询社区的url来覆盖人口信息
varparamBackFun;
functionrenderQuery(queryVo1,polygon,roundFlag,paramBackFun1)
{
paramBackFun=paramBackFun1;
varlayerName=queryVo1.layerName;
graphicLayer.clear();
varurl=locateParameter.getUrl(layerName);
if(url!="")
{
varquerytask=newesri.tasks.QueryTask(url);
varquery=newesri.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);
}
}
functionhandle(idResults)
{
graphicLayer.clear();
varparam=newObject();
param.codearr=[];
for(vari=0,il=idResults.features.length;i<il;i++)
{
varidResult=idResults.features[i];
varpolygon=idResult.geometry;
vargra=newesri.Graphic(polygon);
varattributes=idResult.attributes;
param.codearr[i]=attributes[locateParameter.getCodeName(queryVo.layerName)];
vargraattribute=newObject();
graattribute["code"]=attributes[locateParameter.getCodeName(queryVo.layerName)];
gra.setAttributes(graattribute);
gra.setSymbol(symbolTool.getSymbol("heat"));
graphicLayer.add(gra);
}
paramBackFun(param);
}
//查询java后台组织json参数
functionajaxQuery(param)
{
param.startDate=queryVo.startDate;
param.endDate=queryVo.endDate;
param.layerName=queryVo.layerName;
param.tjfs=queryVo.tjfs;
varstr=JSON.stringify(param);
//alert("ajaxQuery-param:"+str);
//--------------------------------------测试环境用
ajaxTool.getLiuDongData1(str,ajaxBack);
//-------------------------------------
//--------------------------------------真实环境用
//ajaxTool.getLiuDongData(str,ajaxBack);
//-------------------------------------
}
functionajaxBack(obj,num1)
{
//组装map对象便于遍历graphic
if('2'==queryVo.tjfs){
alert("时间段");
vararr=obj.codearr;
}else{
vararr=obj.codearr;
varmapobj=newObject();
for(vari=0,l=arr.length;i<l;i++)
{
vararrobj=arr[i];
mapobj[arrobj.CODE]=arrobj;
//alert("ajaxBack:"+arrobj.CODE);
}
//--------------------------------------真实环境用
//vargraarr=graphicLayer.graphics;
//vardataarr=[];
//for(varj=0,m=graarr.length;j<m;j++)
//{
//vargra=graarr[j];
//varcodeValue=gra.attributes["code"];
////暂时码值转换
//varcodeobj;
//if("shi"==queryVo.layerName){
////alert(changeAreaCode(codeValue));
//codeobj=mapobj[changeAreaCode(codeValue)];
//}else{
//codeobj=mapobj[codeValue];
//}
////alert("codeValue:"+codeValue);
//if(codeobj!=null){
//varpcount=codeobj.PCOUNT;
//varpoint=gra.geometry.getCentroid();
//varfeobj={
//attributes:{count:Number(pcount)},
//geometry:{
//spatialReference:map.spatialReference,
//type:"point",
//x:point.x,
//y:point.y
//
//}
//}
//dataarr.push(feobj);
//}
//gra.attributes["codeVaue"]=codeobj;
//}
//-------------------------------------
//--------------------------------------测试环境用
vargraarr=graphicLayer.graphics;
vardataarr=[];
varpcountnum=0.1;
for(varj=0,m=graarr.length;j<m;j++)
{
vargra=graarr[j];
varcodeValue=gra.attributes["code"];
varcodeobj=mapobj["440304008001"];
varpcount=pcountnum;
varpoint=gra.geometry.getCentroid();
varfeobj={
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()
{
returngraphicLayer;
}
/**
*外界返回热点图层
*@returns{*}
*/
this.getHeatlayer=function()
{
returnheatLayer;
}
/**
*初始化热点图
*@paramhealayerdiv主页heatlayerdiv的id
*@parammap1
*/
this.init=functioninitHeatLayer(healayerdiv,map1)
{
map=map1;
heatLayer=newHeatmapLayer({
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=newesri.layers.GraphicsLayer();
map.addLayer(heatLayer);
map.addLayer(graphicLayer);
ajaxTool=newAjaxTool();
symbolTool=newSymbolTool();
//map.resize();
}
this.ajaxBackFun=function(obj,num1)
{
ajaxBack(obj,num1);
}
/**
*根据查询数据渲染热点图
*现在可能是固定死的xml，下次转json可能要有参数以后定
*/
this.addRender=function(queryVo1,polygon)
{
addRenderFun(queryVo1,polygon,ajaxQuery)
}
//简化方法类增加回调
functionaddRenderFun(queryVo1,polygon,paramBackFun1)
{
polygonTemp=polygon;
queryVo=queryVo1;
renderQuery(queryVo,polygon,"false",paramBackFun1);
}
/**
*
*@paramqueryVo1
*@parampolygon
*@paramparamBackFun1
*/
this.addRenderCallBack=function(queryVo1,polygon,paramBackFun1)
{
addRenderFun(queryVo1,polygon,paramBackFun1);
}
/**
*清除热点图的数据
*/
this.clearHeatLayer=function()
{
heatLayer.clearData();
}
functionchangeAreaCode(code){
varresuCode="";
varareaCode=["440305","440326","440306","440309","440308",
"440304","440303","440327","440317","440307"];
varmapCode=["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;
}
}
returnresuCode;
}
}
以上就是为大家分享的如何实现热点图的关键代码，希望对大家的学习有所帮助。