arcgis api for js入門開發系列九熱力圖效果

上一篇實現了demo的聚合效果，本篇新增熱力圖效果，截圖如下：

熱力圖效果實現的思路如下：

1.map.js初始化函數調用聚合效果的js介面，map.heatmap.js實現聚合核心效果的js文件

//載入熱力圖nDCI.heatmap.Init(map);n

2.map.heatmap.js實現熱力圖核心思路：

調用地圖FeatureServer服務，構造Featurelayer來渲染

var serviceURL = "http://localhost:6080/arcgis/rest/services/dlsde/FeatureServer/0";nvar heatmapFeatureLayerOptions = {nmode: esri.layers.FeatureLayer.MODE_SNAPSHOT,noutFields: ["NAME", "KIND"]n//infoTemplate: infoTemplaten};nvar heatmapFeatureLayer = new esri.layers.FeatureLayer(serviceURL, heatmapFeatureLayerOptions);nheatmapFeatureLayer.id = "heatmap";nvar heatmapRenderer = new esri.renderers.HeatmapRenderer({nfield: "KIND",ncolors: ["rgba(0, 0, 255, 0)", "rgb(0, 0, 255)", "rgb(255, 0, 255)", "rgb(255, 0, 0)"],nblurRadius: 12,nmaxPixelIntensity: 250,nminPixelIntensity: 10n});n//監聽check點擊事件n$("[name = heatmapFeatureLayer]:checkbox").bind("click", function () {nif ($(this).attr("checked")) {nif (DCI.heatmap.map.getLayer("heatmap")) {nDCI.heatmap.map.getLayer("heatmap").show();n} else {nheatmapFeatureLayer.setRenderer(heatmapRenderer);nDCI.heatmap.map.addLayer(heatmapFeatureLayer);n}n}nelse {nif (DCI.heatmap.map.getLayer("heatmap"))nDCI.heatmap.map.getLayer("heatmap").hide();n}n})n

備註：團隊承接webgis/gis畢業設計以及webgis項目等業務，歡迎有相關需求的客戶來諮詢

GIS之家論壇（推薦）：GIS之家論壇

GIS之家交流群二：296438295
推薦閱讀：