arcgis api for js热力图优化篇-不依赖地图服务

前面我写过一篇文章，介绍如何实现arcgis api的热力图效果，但是依赖arcgis server发布的地图服务来获取热力图的数据源。实际应用中，很多业务数据来源数据库，并不一定是从地图服务来获取的。所以，本篇文章从两个不同的角度来优化一下热力图，谈谈不一样的实现热力图思路。

1.arcgis api的FeatureLayer构造数据源不同之处来实现热力图：

image

构造FeatureLayer的数据源是通过自己模拟数据或者从数据库读取数据

首先，构造FeatureSet：

var featureSet = new esri.tasks.FeatureSet(dz);
            var layerDefinition = {
                    "geometryType": "esriGeometryPoint",
                    "fields": [
                               {
                                "name": "勘探深度",
                                "type": "esriFieldTypeDouble",
                                "alias": "勘探深度"
                               },
                               {
                                "name": "孔口高程",
                                "type": "esriFieldTypeDouble",
                                "alias": "孔口高程"
                               },
                               {
                                "name": "X",
                                "type": "esriFieldTypeDouble",
                                "alias": "X"
                               },
                               {
                                "name": "Y",
                                "type": "esriFieldTypeDouble",
                                "alias": "Y"
                               },
                               {
                                "name": "水位高程",
                                "type": "esriFieldTypeDouble",
                                "alias": "水位高程"
                               }
                              ]
             } 
var featureCollection = {
                layerDefinition: layerDefinition,
                featureSet: featureSet
};

实现效果如下：

image

2.开源heatmap.js结合arcgis api for js实现热力图：

自定义HeatmapLayer类，继承DynamicMapServiceLayer，然后结合heatmap.js一起

/**
         * 创建热力图
         * 依赖开源js库heatmap.js
        */
        createHeatMapByJS:function(map,featureSet){
            // create heat layer
            var heatLayer = BX.heatmap.heatLayer2 = new heatmap.HeatmapLayer({
                "useLocalMaximum": false,
                config: {
                    "radius": 40,
                    "valueField": "水位高程",
                    "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,
                "opacity": 0.85
            }, "heatLayerDIV"); 
            // set heatmap data
            heatLayer.setData(featureSet.features);
            // add heat layer to map
            map.addLayer(heatLayer);            
            //heatLayer.show();         
            
        }

最终实现热力图效果如下：

image

备注：团队承接webgis/gis毕业设计以及webgis项目等业务，欢迎有相关需求的客户来咨询
GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:406503412
欢迎关注我的GIS之家微信公众号(扫描右上角头像):gishome
GIS之家论坛（推荐）：GIS之家论坛
GIS作品：GIS之家
GIS之家知乎专栏：GIS之家知乎专栏
GIS之家交流群一：432512093(已满)
GIS之家交流群二：296438295(已满)
GIS之家交流群三：632467934