在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>
写了工具类去使用这个类库
/**
* Created by haibalai on 2015/9/23.
* 管理热点图展示 关闭 这里默认以社区为单位 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;
} }