Bagaimana untuk menulis peta haba dalam kemahiran javascript_javascript

Dalam gis, jika anda menggunakan js untuk menulis peta hotspot, bagaimana anda boleh melakukannya tanpa menggunakan bahagian belakang Dengan as, lebih mudah untuk mempunyai perpustakaan kelas yang sepadan dan juga perpustakaan rasmi? Lebih-lebih lagi, adalah lebih menyusahkan untuk menggunakan js untuk menerbitkan perkhidmatan REST tanpa menggunakan arcgis (nota: peta haba boleh diterbitkan dalam bentuk perkhidmatan, arcgis untuk javascript mempunyai sokongan API yang sepadan Pertama, mari jelaskan apakah peta haba itu?

Peta haba dipaparkan dalam bentuk mata Dengan melengkapkan perubahan sekeliling, warna juga akan melaraskan kecerunan dengan sewajarnya, serupa dengan julat pergerakan seseorang. dalam bola sepak. Saya sedang mencari Terdapat heapmap yang boleh melaksanakan heapmap.js dan heapmap-arcgis.js

Oleh kerana arcigs untuk javascript api ditulis berdasarkan dojo, kaedah memuatkan perpustakaan kelas adalah seperti berikut

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


  };
 </script>

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

Tulis kelas alat untuk menggunakan perpustakaan kelas ini

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

}

Di atas ialah kod utama yang dikongsi dengan anda tentang cara melaksanakan peta haba, saya harap ia akan membantu pembelajaran anda.