CN110610535B

CN110610535B - 基于矢量数据的可配置前端纯js地图动画集实现方法

Info

Publication number: CN110610535B
Application number: CN201910766084.2A
Authority: CN
Inventors: 杨玲; 黄宇; 林洋; 孙超俊
Original assignee: Geospace Information Technology Co ltd
Current assignee: Geospace Information Technology Co ltd
Priority date: 2019-08-19
Filing date: 2019-08-19
Publication date: 2023-05-09
Anticipated expiration: 2039-08-19
Also published as: CN110610535A

Abstract

一种基于矢量数据的可配置前端纯JS地图动画集实现方法，本发明实现依据W3C建议，以浏览器屏幕刷新频率为基础，仅通过配置的形式，即可实现CMD模式中GIS矢量数据，在WebGIS地图中的显示动画效果，包括定速延伸、闪烁、定速排序等展现形式，各形式可任意组合出现，配置也操作简单编辑，包含：动画类型以及动画相关属性。首先，本发明填补了在GIS领域数据无法动态出现的缺失；其次，将间接引入改为直接实现，减少非必要操作，降低性能消耗；再者，面对当前数据可视化需求的多样化，对GIS数据的动画的要求更是如此，本发明则采用常规的CMD模式，以模块式开发形式，深入浅出的设计，化繁为简的配置，使其易移植、易上手、易扩展。

Description

基于矢量数据的可配置前端纯JS地图动画集实现方法

技术领域

本发明涉及WebGIS技术领域，更具体地说，涉及一种基于矢量数据的可配置前端纯JS地图动画集实现方法。

背景技术

现有前端WebGIS技术中，EchartGL能实现第三方WebGIS地图数据的图表动画效果(以下称为图表动画，本发明实现的动画称为地图动画)，其缺点如下：

1.该技术中地图为嵌入形式，被接入到图表展示的最底层，因此导致地图动画必定在图表动画的下方显示；

2.在可视化系统发展趋势明朗的情形下，该技术中图表动画的技能满足部分可视化需求，其动画效果局限，无法扩展延伸，配置复杂且效果一般，无法满足多元化可视化的需求。

发明内容

本发明要解决的技术问题在于，针对现有技术中现有WebGIS中无动画可用的缺憾，动画效果无法扩展的遗憾以及动画基础数据的更新问题，提出了一种基于矢量数据的可配置前端纯JS地图动画集实现方法，本发明作为一个纯JS动画集的实现方法，基于CMD开发模式，可直接引用加载，到绝大部分cmd开发模式的系统中，且极易扩展，配置也相对简单，数据的读取动作也已集成到模块配置中。

本发明解决其技术问题所采用的技术方案是：构造一种基于矢量数据的可配置前端纯JS地图动画集实现方法，由动画控制器和自定义绘制动画的工具类实现；动画控制器控制所有图层动画的进程，控制器定义了一个序列，执行绘制过程中，序列中的所有图层的地图动画绘制并行控制；

自定义绘制动画的工具类用于定义各种地图动画效果，向需要进行动画绘制的图层需添加动画节点配置，在添加图层前判断动画节点是否存在，不存在时直接添加，存在时调用动画控制器根据参数进行绘制；

在添加图层或在图层可见时调用动画控制器，在对应图层开始绘制前，将相关图层加入序列；启动动画控制器，绘制时调用自定义绘制动画的工具类，根据配置设置点线面的颜色、透明度、粗细深浅这些变换，返回实例并存储，显示在地图上；在移除图层或在图层不可见时调用动画控制器，将对应图层移出序列，图层动画进行重置，恢复初始状态确保下一次开启绘制，并销毁存储的相关实例。

实施本发明的基于矢量数据的可配置前端纯JS地图动画集实现方法，具有以下有益效果：本发明实现依据W3C建议，以浏览器屏幕刷新频率为基础，仅通过配置的形式，即可实现CMD模式中GIS矢量数据，在WebGIS地图中的显示动画效果，包括定速延伸、闪烁、定速排序等展现形式，各形式可任意组合出现，配置也操作简单编辑，包含：动画类型以及动画相关属性。首先，本发明填补了在GIS领域数据无法动态出现的缺失；其次，将间接引入改为直接实现，减少非必要操作，降低性能消耗；再者，面对当前数据可视化需求的多样化，对GIS数据的动画的要求更是如此，本发明则采用常规的CMD模式，以模块式开发形式，深入浅出的设计，化繁为简的配置，使其易移植、易上手、易扩展。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是地图矢量数据动画显示的原理时序图；

图2是基于矢量数据的可配置前端纯JS地图动画集实现方法的流程图；

图3是“自增长”动画的实现流程图；

图4是自定义动画的二次开发流程图；

图5是GIS数据动画控制渲染概要图。

名词解释

WebGIS：指Web前端地图展示，GIS指地理信息系统。

Window.requestAnimationFrame：是浏览器内置的API，window是浏览器内置的浏览器窗体对象。

EchartGL：Echarts是当前流行最广的图表制作开源的API，其提供EchartGL版本允许嵌入第三方地图数据，但不支持地图服务，如ArcGIS地图服务或者国际标准的OGC服务。

CMD：Common Module Definition表示通用模块定义规范，该规范是国内发展出来，由阿里的玉伯提出，属于Web前端模块化开发模式之一。规范推崇依赖就近，对于依赖的模块则进行延迟加载，这样简单纯粹，构建的复杂度低。

SeaJS：是CMD模式的浏览器实现，与requireJS一样都是javascript的模块化解决方案。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的具体实施方式。

参考图1，本实施例的一种基于矢量数据的可配置前端纯JS地图动画集实现方法，由动画控制器和自定义绘制动画的工具类实现；动画控制器控制所有图层动画的进程，控制器定义了一个序列，执行绘制过程中，序列中的所有图层的地图动画绘制并行控制；

本发明为解决数据可视化中，地图矢量数据的动画显示而产生。本发明的初衷是为解决GIS数据可视化的各类动画需求，在经过需求分析、动画抽象、扩展性设计等过程，完成了本发明的初步技术实现方案。基于对兼容性的考虑，在浏览器上显示的地图上进行显示，地图与浏览器之间的接口为window.requestAnimationFrame接口，利用浏览器自身携带的定时器对象，将地图动画嵌入到每次重绘之前执行，其性能、兼容性都将大大提升。

动画绘制工具类中，定义了一个基类，主要有初始化读取参数、开始绘制、重置绘制参数。初始化时，读取图层的图层参数并存储，绘制时根据时间间隔动画演示次数来调整图层中图形的样式形成动画效果，每个绘制工具继承于基类。在调用绘制工具类时，调用创建相关实例的方法，根据设置的动画类型进行判断，找到并运行对应的动画工具类，返回实例。

动画绘制工具类主要控制动画的具体实现，常见动画效果如闪现、呼吸、淡入淡出、涟漪边框、自增长线条等都已实现。以线元素自增长效果为例，主要实现的流程图如下图2所示。自增长的动画绘制时，在初始化时读取图层的初始参数、和循环增长的点数、线段默认初始化时的长度等。绘制时，非第一次调用则初始化图层的值，循环图层里的地理要素，逐渐添加显示，呈现出自增长的效果。显示完所有地理元素后，判断是否循环，若有循环则对图层设置透明度为0，再进行重复绘制。具体的步骤实现如下：

S1、向动画控制器发送控制指令，所述控制指令为：A、添加图层或者设置图层可见，或者B、移除图层或者设置图层不可见；若为A，则进入步骤S2，若为B，则进入步骤S4；

S2、判断要操作的图层中是否存在自定义动画配置的节点，若存在则进入步骤S4，若不存在则进入步骤S1向动画控制器发送下一控制指令，或者进入步骤S3；

S3、给要操作的图层添加节点，然后返回步骤S2；

S4、调用动画控制器；

S5、判断要操作的图层是否可见，若否，则进入步骤S6，若是，则今不如步骤S7；

S6、动画控制器的序列移除要所述要操作的图层，启动动画控制器调用动画绘制工具类，重置所述要操作的图层的参数至初始状态，销毁动画控制器中存储的所述要操作的图层的实例，然后停止所述要操作的图层的动画绘制；

S7、动画控制器的序列添加所述要操作的图层，启动动画控制器调用动画绘制工具类，对序列中的所述要操作的图层进行绘制，并存储工具类返回的实例，所述要操作的图层在浏览器的地图上显示绘制的动画效果。

动画绘制工具类可进行自定义拓展，即需要不同的动画效果可增加一个绘制工具。拓展新的动画绘制工具时，新增工具继承动画绘制工具基类，新增一个参数设置对应该工具，并加入绘制类型判断的方法中，创建并返回实例的方法中也加入该工具类的调用。

新增工具中，定义对应样式名称，定义设置的默认样式属性如最大/小透明度、颜色、时间间隔、透明度最大/小值等。添加基础方法初始化、重置和开始绘制，开始绘制的方法中包含主要的动画绘制逻辑，设置透明度、颜色、粗细等样式变换，即可展现更多点线面的效果。参考图3，启动动画控制器调用动画绘制工具类，对序列中的所述要操作的图层进行绘制，实现“自增长”动画的方法为：

S11、调用动画绘制工具类；

S12、判断图层动画参数的类型，选择对应的工具类；

S13、调用对应的工具类，并对调用的工具类进行初始化；

S14、读取图层参数以及动画设置参数，然后根据读取的数据开始绘制；

S15、判断是否为首次绘制，若是则进行步骤S16，若否则进行步骤S17；

S16、重置图层默认参数，则按照动画设置参数，第一次从0开始“自增长”，然后进行步骤S17；

S17、判断图层中是否存在未显示的元素，若是，则进入步骤S18，否则进入步骤S19；

S18、根据设定的增长个数，地图添加未显示的，图层中对应个数的地理元素，然后返回步骤S17；

S19、判断动画是否循环延时，若是，则设置图层的透明度为0，重置图层默认参数，进行循环演示，并返回创建好的实例，地图显示动画效果，完成调用。

参考图4，自定义动画绘制的工具类可进行自定义拓展，用于需要不同的动画效果时增加一个绘制工具，。拓展新的动画绘制工具时，新增工具继承动画绘制工具基类，新增一个参数设置对应该工具，并加入绘制类型判断的方法中，创建并返回实例的方法中也加入该工具类的调用；

新增工具中，定义对应样式名称，定义设置的默认样式属性如最大/小透明度、颜色、时间间隔、透明度最大/小值等，添加基础方法初始化、重置和开始绘制，开始绘制的方法中包含动画绘制逻辑，设置透明度、颜色、粗细等样式变换，用于展现更多点线面的效果。

在当下WebGIS技术中均未使用动画效果展示矢量数据，本发明则填补了这一缺失；面对矢量数据以动画形式进行可视化呈现的需求变化万千应接不暇，而现有技术中的动画形式相对固定无扩展与延伸的二次开发接口，本发明则开放了自定义动画效果制作的接口，以满足多元化的可视化需求；于性能消耗方面，更是低于现有动画技术，现有动画基于笛卡尔坐标实现，期间数据需要进行转换和定位，针对嵌入式地图的操作均需同步完成该项转换工作，而本发明则直接将数据应用到地理坐标中，大大降低地图操作时动画重绘的性能消耗。

目前基于GIS数据的可视化展示都需要借助额外的公开或非公开的SDK的动画能力，这种间接实现的动画难免不能很好的满足GIS数据的可视化需求，本发明提出直接使用GIS数据将动画绘制交由开发人员自行定义，减少因间接生成动画造成的性能消耗；由于GIS数据种类繁多，因此使用目前互联网上公开的GeoJSON格式进行数据的本地化存储(默认支持EsriJSON格式)，提供对应的数据格式转换工具，以便接入各类GIS结构；利用浏览器自带绘制能力，设计统一的动画生成途径，并实现公共渲染环节，开放动画设计环节，真正做到数据动画特效的自定义(源码公开支持延伸扩展)；动画参数的配置方面即可化繁为简，仅使用需要的配置参数即可，配置简单易上手(实施人员易接纳)，配置数据也可扩展(开发人员经过少量的二次开发工作即可实现)；本发明采用国产开源SeaJS的模块化开发流程，实现CMD开发模式，紧跟当前前端开发的大潮流。

为了便于对本发明技术方案的理解，下述将结合一些具体的实例进行说明。地图动画的实现主要在于本发明中的地图动画控制器和自定义地图动画渲染器，动画渲染器也可根据需求进行分支拓展。如图5所示，地图动画的控制器主要处理地图上所有的动画运行进程，互相之间不干扰；动画渲染器实现具体动画效果，包括面线要素自增长(growth-line)、线要素呼吸(blur-line)、线要素淡入淡出(fadein-line)、面要素淡入淡出(fadein-fill)等等。

1、动画控制器

动画控制器，即控制所有图层动画的进程，控制器定义了一个序列，执行绘制过程中，序列中的所有图层的动画并行控制，互不干扰。

实施例一

参照图5，地图中已有图层1(动画效果为线要素呼吸效果blur-line)时，待添加图层2(动画效果为线要素自增长growth-line)中设置animation属性(JSON类型)，将在图层加载时，被载入控制器，并保存animation为动画对象的配置内容。当图层2被添加到地图时，判断该图层可见且存在animation，则将其载入控制器序列中。图层1和图层2的Animation的配置说明见下表。

启动动画控制器，遍历序列中的所有图层，调用动画渲染器。遍历过程中，将判断图层可见性，可见则根据animation中配置调用对应的动画渲染器。比如遍历至图层1，图层1的动画类型为”线要素呼吸(blur-line)”，调用“blurLineLayer”渲染器，同步在地图上渲染当前时刻的图层1状态；同理，当遍历至图层2，图层2的动画类型为“线要素自增长(growth-line)”，调用“growthLineLayer”渲染器，同步渲染图层2的时刻状态到地图上。

图层1和图层2的animation配置说明表

动画控制器在使用过程中，将多线程处理各个图层的动画，动画效果将通过“渲染器+animation”进行定义；在运行过程中，如移除图层，将同步更新控制器的序列，销毁图层渲染器实例。

2、动画渲染器

动画渲染器，即动画绘制工具类，该类继承自动画渲染基类，自主配置参数animation，初始化参数、执行绘制、重置绘制参数、结束绘制等。初始化参数时，将自定义的动画参数animation读取并存储到动画控制器序列；执行绘制时，根据动画时机间隔。来确定动画渲染时机，同时调整图层中所需的动画样式。

动画绘制工具类主要控制动画的具体实现，常见动画效果如闪现、呼吸、淡入淡出、涟漪边框、自增长线条等都已实现。

参考图3，根据动画类型，调用对应的动画渲染器，此例中对应的渲染器为线要素自增长工具(growthLineLayer)，并初始化渲染器实例。

动画渲染器初始化，读取图层的动画参数(animation)包括：线段默认初始化时的长度(pointIndex)、动画循环增长的点数(appendPoints)、动画时间间隔帧(timePerGrowth)等。

开始绘制阶段分为三步。第一步，判断该图层是否第一次调用“线自增长”工具，不是则初始化图层的值；第二步，循环图层里的地理要素(线要素)，循环各要素中的空间点数据，向真实地理要素中追加指定数量的空间点数据，即渲染指定数量的空间点，由此呈现出自增长的效果；第三步，完成循环后，即显示完所有地理要素后，根据repeat配置(是否循环或循环次数)，以此判断结束或继续演示该动画，若设置为true(无限循环)，则先隐藏图层再开始第一步绘制，依次执行。

3、动画渲染器的分支实现

动画渲染器可进行自定义渲染分支，即拓展一个自定义动画类型及其配置，新增一个自实现的动画渲染器，配置用于支撑渲染器的动态渲染，新增的动画渲染器需要继承动画渲染器基类DynGraph。

新增渲染器需要三部分内容：定义对应配置的名称，定义设置的默认样式属性如最大/小透明度、颜色渐变区间、时间间隔、阴影长度等；添加基础方法，如初始化initialize、重置reset和开始绘制play；开始绘制的方法，实现动画期间的绘制逻辑，比如设置透明度、颜色、粗细等样式的变换。完成渲染三步曲，即可展现更多点线面的效果。

再次参考图4，拓展面要素淡入淡出效果的渲染器的具体实现如下：

根据animation配置可知，该淡入淡出动画每30帧渲染一次，要素透明度在0.1～0.8之间变化，且该动画循环播放，当animation中repeat设置为大于0的整数时，动画将在播放repeat次后停止。以此类推，可根据需求设置不同的动画绘制工具。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims

1.一种基于矢量数据的可配置前端纯JS地图动画集实现方法，其特征在于，所述实现方法采用国产开源SeaJS的模块化开发流程，实现CMD开发模式中GIS矢量数据，在WebGIS地图中显示动画效果；由动画控制器和自定义绘制动画的工具类实现；动画控制器控制所有图层动画的进程，控制器定义了一个序列，执行绘制过程中，序列中的所有图层的地图动画绘制并行控制；

2.根据权利要求1所述的基于矢量数据的可配置前端纯JS地图动画集实现方法，其特征在于，所述显示在地图上是指在浏览器上显示的地图上进行显示，地图与浏览器之间的接口为window.requestAnimationFrame接口，利用浏览器自身携带的定时器对象，将地图动画嵌入到每次重绘之前执行。

3.根据权利要求1所述的基于矢量数据的可配置前端纯JS地图动画集实现方法，其特征在于，具体通过如下步骤实现：

S3、给要操作的图层添加节点，然后返回步骤S2；

S4、调用动画控制器；

S5、判断要操作的图层是否可见，若否，则进入步骤S6，若是，则进入步骤S7；

4.根据权利要求3所述的基于矢量数据的可配置前端纯JS地图动画集实现方法，其特征在于，启动动画控制器调用动画绘制工具类，对序列中的所述要操作的图层进行绘制，实现“自增长”动画的方法为：

S11、调用动画绘制工具类；

S12、判断图层动画参数的类型，选择对应的工具类；

S13、调用对应的工具类，并对调用的工具类进行初始化；

5.根据权利要求3所述的基于矢量数据的可配置前端纯JS地图动画集实现方法，其特征在于，自定义动画绘制的工具类可进行自定义拓展，用于需要不同的动画效果时增加一个绘制工具，拓展新的动画绘制工具时，新增工具继承动画绘制工具基类，新增一个参数设置对应该工具，并加入绘制类型判断的方法中，创建并返回实例的方法中也加入该工具类的调用；

新增工具中，定义对应样式名称，定义设置的默认样式属性，添加基础方法初始化、重置和开始绘制，开始绘制的方法中包含动画绘制逻辑，设置有样式变换，用于展现更多点线面的效果。