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

来源：互联网发布：小米数据恢复编辑：程序博客网时间：2024/05/20 16:33

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

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

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

实现效果如下：

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

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

宁波好的整形医院www.biopls.net

阅读全文

0 0