你的位置:首页 > Java教程

[Java教程]javascript的 热点图怎么写


 在gis中,你如果用js来写热点图 不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务,(注:热点图可以借助服务的形式发布,arcgis for javascript有相应的api支持的),这个时候就比较麻烦了,首先说明下热点图是啥

热点图是以点的形式展示,通过补全周边变化颜色也会相应的调整渐变,类似于足球某个人的运动范围那种,我找了下有个heapmap可以实现heapmap.js和heapmap-arcgis.js

  因为arcigs for javascript api 是以dojo为基础写的,所以加载类库方式以下

 1  <script type="text/javascript"> 2     var djConfig = { 3       parseOnLoad: true 4  5  6     }; 7   </script> 8  9   <script src="jslibary/heatmap.js"></script>10   <script src="jslibary/heatmap-arcgis.js"></script>

  写了工具类去使用这个类库

 1 /** 2  * Created by haibalai on 2015/9/23. 3  * 管理热点图展示 关闭 这里默认以社区为单位 url可改 热点图需要在主页面加上热点 div层 类似map的div 4  * 这个版本先以一个 5 */ 6 var HeatLayerManager = function() 7 { 8   var map; 9  10   var heatLayer; 11  12   var graphicLayer; 13  14   var polygonTemp; 15  16   var queryVo= new QueryVO(); 17  18   var ajaxTool; 19  20   var locateParameter = new LocateParameter(); 21  22   var symbolTool; 23  24   var isMouseInfo = true; 25  26   //查询社区的url来覆盖 人口信息 27   var paramBackFun; 28   function renderQuery(queryVo1,polygon,roundFlag,paramBackFun1) 29   { 30     paramBackFun = paramBackFun1; 31     var layerName = queryVo1.layerName; 32     graphicLayer.clear(); 33     var url = locateParameter.getUrl(layerName); 34     if(url != "") 35     { 36       var querytask = new esri.tasks.QueryTask(url); 37       var query = new esri.tasks.Query(); 38  39       if(layerName != "shi") 40       { 41         query.geometry = polygon; 42       } 43       else 44       { 45         query.where = "FID >= 0" 46       } 47       query.returnGeometry = true; 48       query.outSpatialReference = map.spatialReference; 49       if(roundFlag == "false") 50       { 51         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS; 52       } 53       query.outFields = ["*"]; 54       querytask.execute(query, handle); 55     } 56   } 57  58  59  60   function handle(idResults) 61   { 62     graphicLayer.clear(); 63  64     var param = new Object(); 65     param.codearr = []; 66     for (var i = 0, il = idResults.features.length; i < il; i++) 67     { 68       var idResult = idResults.features[i]; 69  70       var polygon = idResult.geometry; 71  72       var gra = new esri.Graphic(polygon); 73  74       var attributes = idResult.attributes; 75  76       param.codearr[i] = attributes[locateParameter.getCodeName(queryVo.layerName)]; 77  78       var graattribute = new Object(); 79       graattribute["code"] = attributes[locateParameter.getCodeName(queryVo.layerName)]; 80       gra.setAttributes(graattribute); 81       gra.setSymbol(symbolTool.getSymbol("heat")); 82       graphicLayer.add(gra); 83     } 84     paramBackFun(param); 85  86   } 87  88   //查询java后台 组织json参数 89   function ajaxQuery(param) 90   { 91     param.startDate = queryVo.startDate; 92     param.endDate = queryVo.endDate; 93     param.layerName = queryVo.layerName; 94     param.tjfs = queryVo.tjfs; 95     var str =  JSON.stringify(param); 96  97     //alert("ajaxQuery-param: "+str); 98     //--------------------------------------测试环境用 99     ajaxTool.getLiuDongData1(str,ajaxBack);100     //-------------------------------------101 102 103     //--------------------------------------真实环境用104    // ajaxTool.getLiuDongData(str,ajaxBack);105     //-------------------------------------106   }107 108   function ajaxBack(obj,num1)109   {110     //组装 map对象便于遍历graphic111     if('2'==queryVo.tjfs){112       alert("时间段");113       var arr = obj.codearr;114 115     }else{116       var arr = obj.codearr;117       var mapobj = new Object();118       for(var i = 0, l = arr.length; i < l; i++)119       {120         var arrobj = arr[i];121         mapobj[arrobj.CODE] = arrobj;122         //alert("ajaxBack: "+arrobj.CODE);123       }124 125       //--------------------------------------真实环境用126       //var graarr = graphicLayer.graphics;127       //var dataarr = [];128       //for(var j = 0, m = graarr.length; j < m; j++)129       //{130       //  var gra = graarr[j];131       //  var codeValue = gra.attributes["code"];132       //  // 暂时码值转换133       //  var codeobj;134       //  if("shi"==queryVo.layerName){135       //    //alert(changeAreaCode(codeValue));136       //    codeobj = mapobj[changeAreaCode(codeValue)];137       //  }else{138       //    codeobj = mapobj[codeValue];139       //  }140       //  //alert("codeValue: "+codeValue);141       //  if(codeobj!=null){142       //    var pcount = codeobj.PCOUNT;143       //    var point = gra.geometry.getCentroid();144       //    var feobj = {145       //      attributes: {count:Number(pcount)},146       //      geometry: {147       //        spatialReference: map.spatialReference,148       //        type: "point",149       //        x: point.x,150       //        y: point.y151       //152       //      }153       //    }154       //    dataarr.push(feobj);155       //  }156       //  gra.attributes["codeVaue"] = codeobj;157       //}158       //-------------------------------------159 160       //--------------------------------------测试环境用161           var graarr = graphicLayer.graphics;162           var dataarr = [];163           var pcountnum = 0.1;164           for(var j = 0, m = graarr.length; j < m; j++)165           {166             var gra = graarr[j];167             var codeValue = gra.attributes["code"];168             var codeobj = mapobj["440304008001"];169             var pcount = pcountnum;170             var point = gra.geometry.getCentroid();171             var feobj = {172               attributes: {count:Number(pcount)},173               geometry: {174                 spatialReference: map.spatialReference,175                 type: "point",176                 x: point.x,177                 y: point.y178 179               }180 181             }182             if(num1 == undefined)183             {184               num1 = 0.01185             }186             pcountnum = pcountnum + num1;187             dataarr.push(feobj);188 189             gra.attributes["codeVaue"] = codeobj;190           }191       //-------------------------------------192 193       heatLayer.setData(dataarr);194     }195   }196 197   /**198    * 外界返回鼠标移动查询填充图层199    * @returns {*}200   */201   this.getHeatLocateLayer = function()202   {203     return graphicLayer;204   }205 206   /**207    * 外界返回热点图层208    * @returns {*}209   */210   this.getHeatlayer = function()211   {212     return heatLayer;213   }214 215 216   /**217    * 初始化热点图218    * @param healayerdiv 主页heatlayer div的id219    * @param map1220   */221   this.init = function initHeatLayer(healayerdiv,map1)222   {223     map = map1;224     heatLayer = new HeatmapLayer({225       config: {226         "useLocalMaximum": true,227         "radius": 40,228         "gradient": {229           0.45: "rgb(000,000,255)",230           0.55: "rgb(000,255,255)",231           0.65: "rgb(000,255,000)",232           0.95: "rgb(255,255,000)",233           1.00: "rgb(255,000,000)"234         }235       },236       "map": map,237       "domNodeId": healayerdiv,238       "opacity": 0.85239     });240 241 242     graphicLayer = new esri.layers.GraphicsLayer();243     map.addLayer(heatLayer);244     map.addLayer(graphicLayer);245 246     ajaxTool = new AjaxTool();247     symbolTool = new SymbolTool();248 249     // map.resize();250 251   }252 253   this.ajaxBackFun= function(obj,num1)254   {255     ajaxBack(obj,num1);256   }257 258   /**259    * 根据查询数据渲染热点图260    * 现在可能是固定死的261   */262   this.addRender = function(queryVo1,polygon)263   {264     addRenderFun(queryVo1,polygon,ajaxQuery)265 266   }267 268   //简化方法类 增加回调269   function addRenderFun(queryVo1,polygon,paramBackFun1)270   {271     polygonTemp = polygon;272     queryVo = queryVo1;273 274     renderQuery(queryVo,polygon,"false",paramBackFun1);275   }276 277   /**278    *279    * @param queryVo1280    * @param polygon281    * @param paramBackFun1282   */283 284   this.addRenderCallBack = function(queryVo1,polygon,paramBackFun1)285   {286     addRenderFun(queryVo1, polygon, paramBackFun1);287   }288 289 290   /**291    * 清除热点图的数据292   */293   this.clearHeatLayer = function()294   {295     heatLayer.clearData();296   }297 298   function changeAreaCode(code){299     var resuCode="";300     var areaCode = ["440305","440326","440306","440309","440308",301       "440304","440303","440327","440317","440307"];302     var mapCode = ["440305002","440306007","440306001","440306012","440308001",303       "440304003","440303005","440307012","440307009","440307006"];304     for(i=0;i<areaCode.length;i++){305       if(code==mapCode[i]){306         resuCode = areaCode[i];307         break;308       }309     }310     return resuCode;311   }312 313 }