在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; }} 以上就是為大家分享的如何實現熱點圖的關鍵代碼，希望對大家的學習有所幫助。
