SuperMap iClient for JavaScript 时空数据动画的实现

2024-02-25 11:18

本文主要是介绍SuperMap iClient for JavaScript 时空数据动画的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

SuperMap iClient for JavaScript 时空数据动画的实现

作者: Hyacinth


       什么数据才能称之为时空数据呢?
       通俗地讲,对象在不同的时间节点,空间位置发生变化的数据。
       大家都知道,常见的图层渲染方式有VML,SVG,Canvas,不知道也没关系,下面我就来简单介绍一下这三种渲染方式,其中VML的全称是Vector Markup Language(矢量可标记语言),图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持;SVG,可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准;而Canvas是HTML5的一部分,它可通过js脚本进行动态渲染位图像。
       JavaScript客户端采用了HTML5 Canvas的帧(关于这个具体的原理实现,网上有很多的讲解以及代码的实现,这里我就不细说了),来进行动态地渲染矢量数据。因此需要支持Canvas渲染的浏览器才有效果。IE9以上(含IE9),Chrome,Firefox,Opera等浏览器均支持Canvas。
       iClient for JavaScript动态渲染数据,主要会用到SuperMap.Layer.AnimatorVector接口,该动画图层主要对时空数据进行增删改等基本的数据管理操作。他其中一个关键的属性—animator,动画管理类,用来管理该动画图层的播放,暂停等操作。
这里介绍一下SuperMap.Animator这个接口,它只负责时间上的控制,具体动画效果需要用户在初始化时的回调函数内部进行实现。可独立使用,不依赖于AnimatorVector。首先,我们可通过下面的图表,来看看Animator到底有些什么属性和参数:
这里写图片描述
下面,我们通过一个具体的例子来感受一下animator是如何来运行的,

 /*首先初始化动画管理类*/animator = new SuperMap.Animator(callbackFunction,{speed:1,//设置速度startTime:0,//设置开始时间endTime:100,//设置结束时间frameRate:34//设置帧率});}//回调函数,每帧具体实现的渲染代码function callbackFunction(){//获取canvas元素var c=document.getElementById("Canvas");cxt=c.getContext("2d");cxt.clearRect(0,0,cxt.canvas.width, cxt.canvas.height);    //清除Canvas(已显示的),避免产生错误  cxt.save();             //保存当前坐标值以及状态,对应的类似“push”操作  cxt.translate(10,0);     //移动起点坐标  cxt.lineWidth=2;                       //设置边框的宽度,单位为像素  cxt.fillStyle='#FF9900';                   //设置填充色  cxt.beginPath();                       //开始绘制新路径  cxt.rect(0,0,20,10);              //绘制一个矩形   cxt.fill();                      //填充背景  cxt.closePath();                       //关闭绘制的新路径}}	//开始播放function startAnimator(){animator.start();}

       其中frameRate,表示每秒播放的动画的次数,默认为60(浏览器默认播放帧率为60),即每秒播放60次。帧率设置的越高,每秒渲染的次数越多,动画连贯性越好,性能越低; 帧率设置的越低,每秒渲染的次数越少,动画连贯性越差,性能越好。
       上面已经介绍了时空数据的概念,那具体怎样制作,我们一起来看看吧
       各行业在时空数据上使用的数据格式不统一,千奇百怪,如下图的有文本形式、excel表格形式、各种数据库方式、也有使用我们原有的supermap格式等,只要具有以下3个属性字段的数据,就可以使用我们的AnimatorVector进行动态渲染:

  1. ID:即具有唯一标示的字段;
  2. Time:即要素当前所在的时间节点字段;
  3. Location:要素当前所在的空间位置字段。

       接下来,就是我们最关键的部分啦,那就是时空数据动画的具体实现过程

  1. 构建和添加AnimatorVector图层
//初始化动画图层
animatorVector = new SuperMap.Layer.AnimatorVector("Vector Layer", {},{speed:0.2,startTime:0,endTime:100
});
map.addLayers([animatorVector]); //添加图层

       上面是初始化动画图层的代码,不难看出,参数包含3个部分,而具体的各个部分的参数是什么,可通过下面的图表知道:

这里写图片描述
       第二部分可选参数,除去其父类SuperMap.Layer所拥有的属性以外,还有下面几个属性。其中featureIdName和timeName这两个字段对应在上节所提到的数据的ID和Time字段,你可以使用默认的值FEATUREID,TIME,也可自定义其值,只要在向图层添加矢量要素时,赋予相应的值;rendererType是SuperMap.Renderer.AnimatorCanvas,底层渲染方式。基本动画渲染是指点线面渐变渲染。第三部分,前面已经做了介绍,这里就不细说了。

这里写图片描述
2. 创建和添加矢量要素
       在上一节,已经提到,时空数据的来源各种各样,而AnimatorVector的矢量要素只需要满足3点就行,那如何将这3点加入要素,
       比如下表给出了某一点在不同时刻的坐标位置信息,
这里写图片描述
       根据其值创建矢量要素,代码如下:

//创建和添加矢量要素animatorVector.addFeatures([new SuperMap.Feature.Vector(new SuperMap.Geometry.Point(2325.144,-2619.2997),//添加第一个时间节点的位置{//如果自定义了featureidName与timeName的值,这里就需要填写相应的值FEATUREID:"point",//设置要素的idTIME:1            //第一个时间节点}),new SuperMap.Feature.Vector(new SuperMap.Geometry.Point(2295.2035,-2654.0703),//添加第二个时间节点的位置{FEATUREID:"point",TIME:2})//然后按照时间节点依次添加要素]);

       无论你的数据是什么样的,只要你能够具有这三个属性,就可以创建矢量要素。
3. AnimatorVector图层所支持的事件
       AnimatorVector除去父类Layer所支持的事件外,还支持下面两个事件

   animatorVector.events.on({"drawfeaturestart": drawfeaturestart});animatorVector.animator.events.on({"firstframestart":framestart});

       drawfeaturestart 事件:在每次绘制在当前时间节点内的feature时触发;同时动画管理类支持firstframestart事件:是在绘制第一帧时触发
4. 实例
       这里将最佳路径分析的结果作为数据,实现时空数据的动画展现
主要代码如下:

// 初始化图层vectorLayer = new SuperMap.Layer.Vector("Vector Layer");animatorLayer=new SuperMap.Layer.AnimatorVector("Animator",{timeName:"Linetime"},{//设置速度为每帧播放0.05小时的数据speed:0.05,//开始时间为0晨startTime:0,//结束时间设置为最后运行结束的汽车结束时间endTime:100});
map.addLayers([animatorLayer]);  //添加动画图层
//最佳路径分析成功的回调函数
function processCompleted(findPathEventArgs) {//创建和添加矢量要素
for(var k = 0, len = result.pathList[0].nodeFeatures.length; k < len; k++) {var car = new SuperMap.Feature.Vector(result.pathList[0].nodeFeatures[k].geometry,{FEATUREID:"1",Linetime:k  //根据节点生成时间}, carstyle //点要素的样式);cars.push(car);}			    animatorLayer.addFeatures(cars); //添加要素}

       是不是觉得意犹未尽呀,我们的iClient for JavaScript可是自带了非常详细又美观的时空数据动画的范例代码以及实际效果,可进入下面的地址,再点击可视化——时空数据查看咯:
http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/examples.html

        看过以后,是不是觉得很简单呀,那就赶快行动起来,去试一试吧!

这篇关于SuperMap iClient for JavaScript 时空数据动画的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J