javascript的热点图怎么写

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

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

 /**

  * Created by haibalai on 2015/9/23.

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

     }

 }

巴特西

javascript的热点图怎么写

最新文章

热门文章

巴特西

javascript的 热点图怎么写

最新文章

热门文章

javascript的热点图怎么写