标签：
在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 * 这个版本先以一个xml来展示 以后改为json的格式 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对象便于遍历graphic 111 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.y 151 // 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.y 178 179 } 180 181 } 182 if(num1 == undefined) 183 { 184 num1 = 0.01 185 } 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的id 219 * @param map1 220 */ 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.85 239 }); 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 * 现在可能是固定死的xml，下次 转json 可能要有参数 以后定 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 queryVo1 280 * @param polygon 281 * @param paramBackFun1 282 */ 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 }
标签：
原文地址：http://www.cnblogs.com/haibalai/p/5030832.html
