How to write a heat map in javascript_javascript skills-JS Tutorial-php.cn

In gis, if you use js to write hotspot maps, how can you do it without using the backend? With as, it is easier to have corresponding class libraries and even official ones. Moreover, it is more troublesome to use js to publish REST services without using arcgis (note: heat maps can be published in the form of services, arcgis for javascript has corresponding API support). First, let’s explain what a heat map is?

The heat map is displayed in the form of points. By completing the surrounding changes, the color will also adjust the gradient accordingly, similar to the range of movement of a person in football. I am looking for There is a heapmap that can implement heapmap.js and heapmap-arcgis.js

Because arcigs for javascript api is written based on dojo, the method of loading the class library is as follows

<script type="text/javascript">
  var djConfig = {
   parseOnLoad: true


  };
 </script>

 <script src="jslibary/heatmap.js"></script>
 <script src="jslibary/heatmap-arcgis.js"></script>

Copy after login

Write a tool class to use this class library

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

}

Copy after login

The above is the key code shared with you on how to implement a heat map. I hope it will be helpful to your learning.