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

}