前面我写过一篇文章,介绍如何实现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(); }
最终实现热力图效果如下: