热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

新增热力图效果,实现聚合核心效果的js文件

本篇介绍了新增的热力图效果,通过调用聚合效果的js接口和实现聚合核心效果的js文件来实现。同时提供了截图展示效果。

上一篇实现了demo的聚合效果,本篇新增热力图效果,截图如下:

热力图效果实现的思路如下:

1.map.js初始化函数调用聚合效果的js接口,map.heatmap.js实现聚合核心效果的js文件

//加载热力图
DCI.heatmap.Init(map);

2.map.heatmap.js实现热力图核心思路:

调用地图FeatureServer服务,构造Featurelayer来渲染

var serviceURL = "http://localhost:6080/arcgis/rest/services/dlsde/FeatureServer/0";
var heatmapFeatureLayerOptiOns= {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: [
"NAME", "KIND"]
//infoTemplate: infoTemplate
};
var heatmapFeatureLayer = new esri.layers.FeatureLayer(serviceURL, heatmapFeatureLayerOptions);
heatmapFeatureLayer.id
= "heatmap";
var heatmapRenderer = new esri.renderers.HeatmapRenderer({
field:
"KIND",
colors: [
"rgba(0, 0, 255, 0)", "rgb(0, 0, 255)", "rgb(255, 0, 255)", "rgb(255, 0, 0)"],
blurRadius:
12,
maxPixelIntensity:
250,
minPixelIntensity:
10
});
//监听check点击事件
$("[name = heatmapFeatureLayer]:checkbox").bind("click", function () {
if ($(this).attr("checked")) {
if (DCI.heatmap.map.getLayer("heatmap")) {
DCI.heatmap.map.getLayer(
"heatmap").show();
}
else {
heatmapFeatureLayer.setRenderer(heatmapRenderer);
DCI.heatmap.map.addLayer(heatmapFeatureLayer);
}
}
else {
if (DCI.heatmap.map.getLayer("heatmap"))
DCI.heatmap.map.getLayer(
"heatmap").hide();
}
})
备注:团队承接webgis/gis毕业设计以及webgis项目等业务,欢迎有相关需求的客户来咨询
GIS之家论坛(推荐): GIS之家论坛
GIS作品: GIS之家
QQ兴趣部落: GIS之家部落
GIS项目交流群:238339408
GIS之家交流群一:432512093(已满)
GIS之家交流群二:296438295

推荐阅读
author-avatar
圈圈
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有