javascript如何写热点图

192 阅读 0 评论 127 点赞

我是靠谱客的博主勤奋砖头，最近开发中收集的这篇文章主要介绍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对象便于遍历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;
 }

}

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