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

2024-02-25 11:18
文章标签 java 数据 实现 script 时空 动画 supermap iclient

本文主要是介绍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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2