So schreiben Sie eine Heatmap in Javascript_Javascript-Kenntnissen

Wenn Sie in GIS Hotspot-Karten mit js schreiben, wie können Sie dies ohne Verwendung des Backends tun? Mit as ist es einfacher, entsprechende Klassenbibliotheken und sogar offizielle zu haben. Darüber hinaus ist es schwieriger, REST-Dienste mit js zu veröffentlichen, ohne Arcgis zu verwenden (Hinweis: Heatmaps können in Form von Diensten veröffentlicht werden, Arcgis für Javascript verfügt über entsprechende API-Unterstützung. Lassen Sie uns zunächst erklären, was eine Heatmap ist.)

Die Wärmekarte wird in Form von Punkten angezeigt. Durch die Vervollständigung der Umgebungsänderungen wird auch der Farbverlauf entsprechend angepasst, ähnlich dem Bewegungsbereich einer Person im Fußball. Ich suche nach einer Heapmap, die heapmap.js und heapmap-arcgis.js implementieren kann

Da arcigs für die Javascript-API auf der Grundlage von Dojo geschrieben ist, ist die Methode zum Laden der Klassenbibliothek wie folgt

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


  };
 </script>

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

Schreiben Sie eine Werkzeugklasse, um diese Klassenbibliothek zu verwenden

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

}

Das Obige ist der Schlüsselcode, der Ihnen zur Implementierung einer Heatmap mitgeteilt wird. Ich hoffe, dass er Ihnen beim Lernen hilfreich sein wird.