首页 > 编程 > JavaScript > 正文

javascript如何写热点图

2019-11-20 11:03:25
字体:
来源:转载
供稿:网友

在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; }}

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表