SuperMap iClient 7C for Flash之热点图的时间轴控制

2024-02-25 11:18

本文主要是介绍SuperMap iClient 7C for Flash之热点图的时间轴控制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:小阳

###一、概述
如今大数据时代的到来,数据可视化在人们的日常生活中扮演着越来越重要的角色,当然,热点图也是当中流行的一种数据可视化表达的手段之一。那什么是热点图呢?——热点图通常将一些不易理解或表达的数据,比如密度,频率,温度等,用区域和颜色这种更容易被人理解的方式来呈现的一种数据可视化手段。在热点图中,暖色一般代表事件发生频率比较高或事物分布密度比较大的区域,冷色反之。那热点图又有什么作用呢?—热点图能够明显的表现地图中事件发生的频率或者事物的分布密度。

既然本文讲述的是热点图,那为什么要加上时间轴呢?因为时间轴可以控制不同时间的不同显示状态,加上时间轴,就可以显示不同时间点的热力图了。下面我以某市区一天的五个时间点的景区人流量为例,对本范例做相关介绍和实现思路,详见后文。

###二、数据准备
热点数据是整个热点图的核心,它是一个包含了坐标信息,时间信息的点对象集合。在这里我们将所有热点用一个点数据集HeatPoints来存储:
这里写图片描述

并在为HeatPoints一个日期字段TIMEINDEX,字段类型为日期或文本,本范使用的字段类型为日期:
这里写图片描述

数据准备完后前端要对该数据集进行查询,可使用如下两个方案对数据进行发布。如果没有数据服务的许可,只能使用方案二。
方案一:将工作空间发布为或REST-地图服务和REST-数据服务(推荐)
方案二:将HeatPoints叠加到地图中,并设置为不可见,再将工作空间发布为REST-地图服务。

###三、开发要点
本范例中使用的是方案一的发布方式。实现的思路是采用数据集查询的方式对数据进行查询,将查询到的featrues绑定到TimeSlider上,随着时间轴的切换对featurelayer进行监听,获取不同时间点featurelayer的featrues,并转换为heatpoints加载到HeatMapLayer上。
####1、 添加相关组件

<ic:Map id="map"  ><ic:TiledDynamicRESTLayer url="{this.restUrl}" tileSize="256"/><ic:FeaturesLayer id="fl" isFront="false" isFeatureMouseOver="false"  alpha="0"  updateEnd="fl_updateEndHandler(event)"/><ic:HeatMapLayer id="heatMap" radius="20" alpha="0.9" heatStops="{SetHeatStops()}"/>
</ic:Map>
<ic:TimeSlider id="timeSlider" bottom="20" width="387" layer="{fl}" 
timeChange="timeSlider_timeChangeHandler(event)" 
creationComplete="timeSlider_creationCompleteHandler(event)"
horizontalCenter="0" isAccumulatedDisplay="false" />
<s:Label id="timeLabel" fontFamily="微软雅黑" fontSize="14" fontWeight="bold" color="0XFFFFCC" horizontalCenter="-23" bottom="50" />

TiledDynamicRESTLayer在这里作为地图底图的加载与显示,可能有人会问:那么FeaturesLayer是做什么的呢,用过时间轴(即TimeSlider)的开发人员应该都知道,TimeSlider 有一个 layer属性用来绑定用于显示要素的FeatureLayer或者是GraphicsLayer,由于TimeSlider不能直接绑定HeatMapLayer(即热点图层),这里就用FeatureLayer绑定TimeSlider,并且FeatureLayer的透明度为0,即不可见,这样做的目的是为了获取时间轴在不同时间点的热点数据,在这里FeatureLayer实质上只起到了一个数据的临时存储作用,如果数据量相对来说比较大的话,请使用GraphicsLayer,这一点很关键。
####2、事件函数
热点数据的SQL查询

private function init():void
{		
restUrl="http://192.168.15.99:8090/iserver/services/map-heatmap/rest/maps/heatmap_night";				
dataUrl="http://192.168.15.99:8090/iserver/services/data-heatmap/rest/data/featureResults";
var queryParams:Array = ["Changchun:HeatPoint"];
var queryBySQLParameters:GetFeaturesBySQLParameters = new GetFeaturesBySQLParameters();
queryBySQLParameters.datasetNames = queryParams;
queryBySQLParameters.toIndex=-1;
var filterParameter:FilterParameter = new FilterParameter();
filterParameter.attributeFilter = "SMID>0";
queryBySQLParameters.filterParameter = filterParameter;
var getFeaturesBySQL:GetFeaturesBySQLService = new GetFeaturesBySQLService(this.dataUrl);	
getFeaturesBySQL.processAsync(queryBySQLParameters, new AsyncResponder(this.dispalyQueryRecords,excuteErros,null));
}

获取时间轴的要素数据
feature.attributes.TIMEINDEX=DateFormatter.parseDateString(feature.attributes.TIMEINDEX); 这行代码很关键,因为SQL查询出来的feature对象TIMEINDEX属性为字符型,而timeslider需要使用Date型的对象,所以需要将该属性重新进行对象转换。

private function dispalyQueryRecords(result:GetFeaturesResult, mark:Object):void
{var features:Array = result.features;if(features.length == 0){Alert.show("查询结果为空", "提示", 4, this);return; }else{  for each(var feature:Feature in result.features){
feature.attributes.TIMEINDEX=DateFormatter.parseDateString(feature.attributes.TIMEINDEX); //转字符为时间对象
this.timeData.features.addItem(feature);}
}              
var timeStops:Array = new Array();
for(var i:int = 0; i < 5; i++)
{
var date:Date =  new Date(2015,0,1,6+i*3,0,0);
timeStops.push(date);
}
var startTime:Date = new Date(2015,0,1,6,0,0);   //月份从0开始
timeData.timeStops = timeStops;
var endTime:Date = new Date(2015,0,1,18,0,0);
timeData.startTime = startTime;
timeData.endTime = endTime; 
timeData.timeField="TIMEINDEX";				
timeSlider.timeData=this.timeData;		
}

颜色过渡站点的设置
设置HeatMapLayer热点圆渐变填充中的颜色过渡站点(HeatStop)集合。其中站点的信息包括位置和颜色。

private function SetHeatStops():Array
{var setHeatStops:Array=[];setHeatStops.push(new HeatStop(0XFF0000,1));setHeatStops.push(new HeatStop(0XFF6600,0.98));setHeatStops.push(new HeatStop(0XFFFF00,0.8));setHeatStops.push(new HeatStop(0X33FF33,0.5));setHeatStops.push(new HeatStop(0X6633CC,0.1));return setHeatStops;
}

时间轴的要素数据转换为热点(heatpoint)
由于热点图层中的加载的为heatpoint对象,在做时间轴切换的时候,相应的点是以feature的形式加载在featurelayer上面的,在这里,我们的思路是:找到时间轴的一个监听事件,在做时间切换的时候可以触发一个函数,可以获取到此时featurelayer上的feature集合,将featurelayer上的features临时转换为heatpoint集合,这样就实现了一个热点数据的获取。答案是肯定的。

在这里,我们需要在featurelayer上写updateEnd事;同时还要在TimeSlider
上写timechange事件,目的是为了保证在时间轴进行切换的时候,能够及时触发featurelayer的刷新。

这里写图片描述
这里写图片描述

protected function fl_updateEndHandler(event:LayerEvent):void
{
heatpoints=[];
for each(var feature:Feature in fl.features)
{
heatpoints.push(new HeatPoint(feature.geometry.center.x,feature.geometry.center.y));
}
heatMap.heatPoints=heatpoints;				
}
protected function timeSlider_timeChangeHandler(event:TimeSliderEvent):void
{
fl.refresh();	
timeLabel.text=dateFormatter.format(this.timeSlider.timeStops[this.timeSlider.slider.value]);
}

最后的实现效果图如下:
这里写图片描述

这篇关于SuperMap iClient 7C for Flash之热点图的时间轴控制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/745305

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

Python异步编程中asyncio.gather的并发控制详解

《Python异步编程中asyncio.gather的并发控制详解》在Python异步编程生态中,asyncio.gather是并发任务调度的核心工具,本文将通过实际场景和代码示例,展示如何结合信号量... 目录一、asyncio.gather的原始行为解析二、信号量控制法:给并发装上"节流阀"三、进阶控制

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题:使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据?核心代码实现1. 导入必要模块2. 关键配置(重点!)3.

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

python之流程控制语句match-case详解

《python之流程控制语句match-case详解》:本文主要介绍python之流程控制语句match-case使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录match-case 语法详解与实战一、基础值匹配(类似 switch-case)二、数据结构解构匹

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》:本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us

Python中如何控制小数点精度与对齐方式

《Python中如何控制小数点精度与对齐方式》在Python编程中,数据输出格式化是一个常见的需求,尤其是在涉及到小数点精度和对齐方式时,下面小编就来为大家介绍一下如何在Python中实现这些功能吧... 目录一、控制小数点精度1. 使用 round() 函数2. 使用字符串格式化二、控制对齐方式1. 使用

Springboot控制反转与Bean对象的方法

《Springboot控制反转与Bean对象的方法》文章介绍了SpringBoot中的控制反转(IoC)概念,描述了IoC容器如何管理Bean的生命周期和依赖关系,它详细讲解了Bean的注册过程,包括... 目录1 控制反转1.1 什么是控制反转1.2 SpringBoot中的控制反转2 Ioc容器对Bea

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API