CN115061680A - 一种基于ECharts地图组件实现自定义展示面板的方法 - Google Patents

Abstract

本发明提供一种基于ECharts地图组件实现自定义展示面板的方法，该方法包括创建ECharts组件的中间代理，通过该中间代理拦截并修改ECharts组件的初始化函数，在原有ECharts组件实例对象上添加布局，其具体表现为：创建ECharts类的实例对象，以拦截ECharts组件的初始化设置；在ECharts组件的实例对象上添加自定义面板缓存区；提供自定义面板的对外接口，并调整自定义面板布局的回调函数；将自定义面板代码处理为canvas，并存储在缓存区中；计算出自定义面板的页面像素坐标，并显示在地图页面上。应用本发明可以解决现有技术中呈现方式无法满足用户多样化需求的问题，从而便捷地在现有地图组件上实现自定义展示面板，且不会影响原有功能的执行。

Description

一种基于ECharts地图组件实现自定义展示面板的方法

技术领域

本发明涉及数据可视化技术领域，具体涉及一种基于ECharts地图组件实现自定义展示面板的方法。

背景技术

ECharts是目前使用比较普遍的开源图表类库，目前开发过程中，由于每一个使用ECharts的页面基本上要重新生成ECharts的配置，并且逐个属性地去配置，造成了大量的重复工作和代码的冗余，给项目的开发和维护工作带来了极大的不便，更进一步地降低了开发维护的效率和页面运行的效率。

随着大数据和数据分析趋势的流行，数据可视化变得越来越重要，其中地理信息可视化又是可视化领域中很重要的一类应用，涉及到在地图组件上呈现海量的丰富的数据信息。ECharts是一个基于Web前端技术实现的数据可视化开源项目，已广泛应用于数据可视化领域，其中也包含了与地理信息可视化相关的地图组件。数据面板作为地图数据展示的常见形式，在ECharts地图组件可以通过配置散点的label属性实现数据提示框。

因此，出于页面绘制性能的考虑，ECharts仅提供了label属性来展示文本类型的提示框，且可以通过label的rich属性对展示文字进行富文本修饰。但是这种呈现方式无法满足用户多样化的需求，比如在展示面板中显示图片、table列表等html以及其他常见的布局形式。

发明内容

为了克服现有技术的不足，本发明的目的在于提供一种基于ECharts地图组件实现自定义展示面板的方法，该方法可以解决现有技术中呈现方式无法满足用户多样化需求的问题，可以便捷地在现有地图组件上实现自定义展示面板，且不会影响原有功能的执行。

为解决上述问题，本发明所采用的技术方案如下：

一种基于ECharts地图组件实现自定义展示面板的方法，包括以下步骤：创建ECharts组件的中间代理，通过该中间代理拦截并修改ECharts组件的初始化函数，在原有ECharts组件实例对象上添加布局，其具体表现为：创建ECharts类的实例对象，以拦截ECharts组件的初始化设置；在ECharts组件的实例对象上添加自定义面板缓存区；提供自定义面板的对外接口，并调整自定义面板布局的回调函数；将自定义面板代码处理为canvas，并存储在缓存区中；计算出自定义面板的页面像素坐标，并显示在地图页面上。

进一步的方案是，该方法还执行：通过在ECharts组件的实例对象上实时监听地图缩放事件，当匹配到自定义面板的缩放参数时，调用调整自定义面板布局的回调函数，动态显示和隐藏自定义面板，并通过监听ECharts地图容器，实时响应因ECharts地图容器大小的变化产生的位置偏移。

更进一步的方案是，在实时响应因ECharts地图容器大小的变化产生的位置偏移后，通过convertToPixel方式将自定义面板的经纬度坐标转换为页面像素坐标，以调整自定义面板位置。

更进一步的方案是，定义自定义面板的参数具体包括面板html代码、面板在地图中的坐标位置、地图缩放级别、是否使用缓存面板、用户自定义的面板ID。

更进一步的方案是，所述调整自定义面板布局的回调函数包括当ECharts地图进行缩放或者ECharts地图容器大小改变后，通过调整自定义面板的位置以及根据缩放级别决定是否显示和隐藏自定义面板，其中，在调整自定义面板位置时，读取地图对象的缩放级别，当匹配到自定义面板的缩放级别时，再次执行调用地图对象的经纬度坐标转换为页面像素坐标的步骤，根据重新得到的页面像素坐标来调整面板位置；若没有匹配到自定义面板的缩放级别时，移除掉当前面板。

更进一步的方案是，所述将自定义面板代码处理为canvas，包括：浏览器在做页面渲染时，使用Dom元素作为矢量图进行渲染，其中，通过使用html标签来设计自定义面板，并将自定义面板中所有html标签绘制为1个canvas元素。

更进一步的方案是，在将自定义面板中所有html标签绘制为1个canvas元素时，创建一个离屏div容器和canvas元素，将面板html代码注入到离屏div容器中并挂载到当前页面文档；通过递归当前容器的DOM树，获取到每一层节点的数据，并生成层叠数据，依据浏览器渲染层叠数据的规则，通过CanvasRenderer类的render方法，将DOM元素一层一层渲染到离屏div容器的canvas元素中。

更进一步的方案是，在生成canvas对象后，将生成结果存储在缓存区，并移除掉页面文档中的临时容器；当用户指定面板ID且使用缓存的情况下，直接从缓存区找到面板对象；若不使用缓存，则更新当前ID下的面板对象。

更进一步的方案是，该方法还执行：通过对外接口响应用户操作，根据修改定义后的自定义面板创建与用户操作对应的面板信息；将面板信息转化为canvas，并存储在Cache缓存区，将经纬度转换为页面像素坐标添加到ECharts地图容器中。

更进一步的方案是，该方法还执行：在自定义面板上对ECharts组件的属性进行调整，通过编辑面板对ECharts组件的基础属性、标题、视区、X轴、Y轴、图例、提示、工具进行调整，而且在编辑面板的每类属性中均列出ECharts组件的已有属性。

由此可见，相比现有技术，本发明构建了一种基于ECharts地图组件实现自定义展示面板的方法，具有以下有益效果：

1、本发明使用代理方式灵活安全地在ECharts上增加新的接口，无需依赖Option配置文件，直接调用接口添加自定义面板。

2、本发明用户可以使用任何html元素进行面板设计和开发，相比较传统的ECharts地图的信息面板只能支持简单文本展示，本发明的扩展性更好。

3、本发明用户可以设计复杂的展示面板，通过将面板转化为canvas优化渲染性能。

4、本发明支持用户自定义地图缩放级别来显示面板，只在合适的地图缩放级别显示，可以避免数据量大时，造成的面板叠加遮挡，以便更好地呈现数据。

下面结合附图和具体实施方式对本发明作进一步详细说明。

附图说明

图1是本发明一种基于ECharts地图组件实现自定义展示面板的方法实施例的原理图。

图2是本发明一种基于ECharts地图组件实现自定义展示面板的方法实施例的流程图。

图3是本发明一种基于ECharts地图组件实现自定义展示面板的方法实施例中关于将自定义面板代码处理为canvas的原理图。

图4是本发明一种基于ECharts地图组件实现自定义展示面板的方法实施例中通过对外接口响应用户操作的流程图。

图5是本发明一种基于ECharts地图组件实现自定义展示面板的方法实施例关于调整自定义面板位置的流程图。

图6是本发明一种基于ECharts地图组件实现自定义展示面板的系统实施例的原理图。

具体实施方式

一种基于ECharts地图组件实现自定义展示面板的方法实施例：

如图1和图2所示，一种基于ECharts地图组件实现自定义展示面板的方法，包括：

步骤S0，创建ECharts组件的中间代理，通过该中间代理拦截并修改ECharts组件的初始化函数，在原有ECharts组件实例对象上添加布局，其具体包括：

步骤S1，创建ECharts类的实例对象，以拦截ECharts组件的初始化设置。

步骤S2，在ECharts组件的实例对象上添加自定义面板缓存区。

步骤S3，提供自定义面板的对外接口，并调整自定义面板布局的回调函数。

步骤S4，将自定义面板代码处理为canvas，并存储在缓存区中；计算出自定义面板的页面像素坐标，并显示在地图页面上。

在本实施例中，该方法还执行：通过在ECharts组件的实例对象上实时监听地图缩放事件，当匹配到自定义面板的缩放参数时，调用调整自定义面板布局的回调函数，动态显示和隐藏自定义面板，并通过监听ECharts地图容器，实时响应因ECharts地图容器大小的变化产生的位置偏移。

在实时响应因ECharts地图容器大小的变化产生的位置偏移后，通过convertToPixel方式将自定义面板的经纬度坐标转换为页面像素坐标，以调整自定义面板位置。

在本实施例中，定义自定义面板的参数具体包括面板html代码、面板在地图中的坐标位置、地图缩放级别、是否使用缓存面板、用户自定义的面板ID。可见，本实施例的一个自定义面板包含5个参数：面板html代码(包含复杂布局的html代码)、面板在地图中的坐标位置、地图缩放级别(当在此缩放级别，才显示面板)、是否使用缓存面板(用于优化渲染速度)、用户自定义的面板ID。

在上述步骤S1和S2中，本实施例使用Proxy拦截器，创建一个ECharts地图对象的代理，用来拦截代理对象的属性和方法，以及拓展新增添加自定义面板地接口。本实施例通过ECharts类创建一个代理对象，拦截ECharts的初始化方法，在ECharts的实例对象上添加面板缓存区，对外提供添加面板的接口以及调整面板布局的回调函数，然后将面板代码处理为canvas并显示在地图上。其中，缓存区：为了充分利用资源，转化html面板后的canvas数据，会存储在缓存区，方便下次取用，缩短渲染时间。

在上述步骤S3中，调整自定义面板布局的回调函数包括当ECharts地图进行缩放或者ECharts地图容器大小改变后，通过调整自定义面板的位置以及根据缩放级别决定是否显示和隐藏自定义面板，其中，如图5所示，在调整自定义面板位置时，读取地图对象的缩放级别zoom，当匹配到自定义面板的缩放级别时，再次执行调用地图对象的经纬度坐标转换为页面像素坐标的步骤，计算面板像素坐标，根据重新得到的页面像素坐标来调整面板位置，添加canvas到页面；若没有匹配到自定义面板的缩放级别时，移除掉当前面板。

在上述步骤S4中，将自定义面板代码处理为canvas，如图3所示，包括：浏览器在做页面渲染时，使用Dom元素作为矢量图进行渲染，其中，通过使用html标签来设计自定义面板，并将自定义面板中所有html标签绘制为1个canvas元素。

在将自定义面板中所有html标签绘制为1个canvas元素时，创建一个离屏div容器和canvas元素，将面板html代码注入到离屏div容器中并挂载到当前页面文档。

然后，通过递归当前容器的DOM树，获取到每一层节点的数据，并生成层叠数据，依据浏览器渲染层叠数据的规则，通过CanvasRenderer类的render方法，将DOM元素一层一层渲染到离屏div容器的canvas元素中。

在本实施例中，在生成canvas对象后，将生成结果存储在缓存区，并移除掉页面文档中的临时容器。

当用户指定面板ID且使用缓存的情况下，直接从缓存区找到面板对象；若不使用缓存，则更新当前ID下的面板对象。

具体的，在浏览器在做页面渲染时，Dom元素是作为矢量图进行渲染的，每一个Dom元素的边距都需要单独处理，浏览器需要将它们全都处理成像素才能输出到屏幕上，计算量十分庞大。当页面上内容非常多，存在大量DOM元素的时候，这些内容的渲染速度就会变得很慢。本发明可以使用任何html标签来设计面板，并通过把面板中所有html标签绘制为1个canvas元素，优化Dom驻留内存的加载模式，提高页面渲染性能，其具体实现为：通过document.createElement创建一个离屏div容器和canvas元素，将面板html代码注入到一个临时容器并挂载到当前页面文档，然后通过递归当前容器的DOM树，取得每一层节点的数据，并生成层叠数据。依据浏览器渲染层叠数据的规则，通过CanvasRenderer类的render方法，将DOM元素一层一层渲染到离屏canvas元素中。可见，本实施例通过将面板html中的所有内容转换为1个canvas对象，并存储在缓存区，最后移除掉页面文档中的临时容器。在之后的渲染中，就可以仅操作单个canvas对象，提高了渲染性能。

因此，本发明增加了缓存模式，由于将面板转换为canvas会消耗一定的性能，在添加面板时，可以通过开启缓存，过滤掉不必要的操作。在上述生成canvas的操作中，本实施例会把生成结果存储在缓存区，在之后的操作中，如果用户指定ID且使用缓存的情况下，直接从缓存区找到面板对象，做到快速显示。如果不使用缓存，则会更新当前ID下的面板对象。

在本实施例中，该方法还执行：在自定义面板上对ECharts组件的属性进行调整，通过编辑面板对ECharts组件的基础属性、标题、视区、X轴、Y轴、图例、提示、工具进行调整，而且在编辑面板的每类属性中均列出ECharts组件的已有属性。

在实际应用中，为了使用方便且不改变原有的功能，本发明通过一个中间件的装置，对ECharts组件进行代理，拓展新增自定义数据面板的接口，用户可使用html编码数据面板，通过上述提供的对外接口，将面板内容转化为canvas，并存储在Cache缓存区(优化数据显示)，将经纬度转换为页面像素坐标添加到ECharts地图容器中。进一步的，通过监听地图缩放事件，动态显示和隐藏面板，并通过监听ECharts地图容器，实时响应因容器大小的变化产生的位置偏移。

在本实施例中，该方法还执行：通过对外接口响应用户操作，根据修改定义后的自定义面板创建与用户操作对应的面板信息；将面板信息转化为canvas，并存储在Cache缓存区，将经纬度转换为页面像素坐标添加到ECharts地图容器中，如图4所示，其实现流程包括：

添加面板数据(如html、coordinate、zoom、useCache和id)，检查面板ID，以及判断面板ID是否正确，如是，判断用户是否指定ID使用缓存，如是，直接从缓存区找到面板对象，并返回用户面板ID；如不是，则判断面板ID是否在缓存，如不是，则装载面板代码到Div容器，生成canvas，存储到缓存区，判断是否匹配到该面板的地图缩放级别，如是，计算面板像素坐标，添加canvas到页面，更新当前ID下的面板对象，并返回用户面板ID。

进一步的，由于面板大小是不随地图缩放而改变，数据量大时，会造成面板叠加遮挡。本发明可以根据地图缩放级别显示面板，减少显示不必要的面板，以便更好地呈现数据。通过在ECharts对象上对地图缩放事件georoam的监听，当匹配到面板的缩放参数，调用调整面板布局的方法，动态显示或隐藏面板，并通过ResizeObserver监听ECharts容器，实时响应因容器大小的变化产生的位置偏移，再次通过地图提供的convertToPixel方法，将面板的经纬度坐标转换为页面像素坐标，从而调整面板位置。

一种基于ECharts地图组件实现自定义展示面板的系统实施例：

一种基于ECharts地图组件实现自定义展示面板的系统，如图6所示，该系统包括：

主处理单元10，用于创建ECharts组件的中间代理，通过该中间代理拦截并修改ECharts组件的初始化函数，在原有ECharts组件实例对象上添加布局，其具体包括：

创建模块11，创建ECharts类的实例对象，以拦截ECharts组件的初始化设置。

缓存模块12，在ECharts组件的实例对象上添加自定义面板缓存区。

布局模块13，提供自定义面板的对外接口，并调整自定义面板布局的回调函数。

显示模块14，将自定义面板代码处理为canvas，并存储在缓存区中；计算出自定义面板的页面像素坐标，并显示在地图页面上。

在本实施例中，还包括：通过在ECharts组件的实例对象上实时监听地图缩放事件，当匹配到自定义面板的缩放参数时，调用调整自定义面板布局的回调函数，动态显示和隐藏自定义面板，并通过监听ECharts地图容器，实时响应因ECharts地图容器大小的变化产生的位置偏移。

在实时响应因ECharts地图容器大小的变化产生的位置偏移后，通过convertToPixel方式将自定义面板的经纬度坐标转换为页面像素坐标，以调整自定义面板位置。

在本实施例中，定义自定义面板的参数具体包括面板html代码、面板在地图中的坐标位置、地图缩放级别、是否使用缓存面板、用户自定义的面板ID。

在创建模块11和缓存模块12中，本实施例使用Proxy拦截器，创建一个ECharts地图对象的代理，用来拦截代理对象的属性和方法，以及拓展新增添加自定义面板地接口。本实施例通过ECharts类创建一个代理对象，拦截ECharts的初始化方法，在ECharts的实例对象上添加面板缓存区，对外提供添加面板的接口以及调整面板布局的回调函数，然后将面板代码处理为canvas并显示在地图上。其中，缓存区：为了充分利用资源，转化html面板后的canvas数据，会存储在缓存区，方便下次取用，缩短渲染时间。

在布局模块13中，调整自定义面板布局的回调函数包括当ECharts地图进行缩放或者ECharts地图容器大小改变后，通过调整自定义面板的位置以及根据缩放级别决定是否显示和隐藏自定义面板，其中，在调整自定义面板位置时，读取地图对象的缩放级别zoom，当匹配到自定义面板的缩放级别时，再次执行调用地图对象的经纬度坐标转换为页面像素坐标的步骤，计算面板像素坐标，根据重新得到的页面像素坐标来调整面板位置，添加canvas到页面；若没有匹配到自定义面板的缩放级别时，移除掉当前面板。

在显示模块14中，将自定义面板代码处理为canvas，包括：浏览器在做页面渲染时，使用Dom元素作为矢量图进行渲染，其中，通过使用html标签来设计自定义面板，并将自定义面板中所有html标签绘制为1个canvas元素。

在将自定义面板中所有html标签绘制为1个canvas元素时，创建一个离屏div容器和canvas元素，将面板html代码注入到离屏div容器中并挂载到当前页面文档。

然后，通过递归当前容器的DOM树，获取到每一层节点的数据，并生成层叠数据，依据浏览器渲染层叠数据的规则，通过CanvasRenderer类的render方法，将DOM元素一层一层渲染到离屏div容器的canvas元素中。

在本实施例中，在生成canvas对象后，将生成结果存储在缓存区，并移除掉页面文档中的临时容器。

当用户指定面板ID且使用缓存的情况下，直接从缓存区找到面板对象；若不使用缓存，则更新当前ID下的面板对象。

在本实施例中，还包括：通过对外接口响应用户操作，根据修改定义后的自定义面板创建与用户操作对应的面板信息；将面板信息转化为canvas，并存储在Cache缓存区，将经纬度转换为页面像素坐标添加到ECharts地图容器中。

在本实施例中，还包括：在自定义面板上对ECharts组件的属性进行调整，通过编辑面板对ECharts组件的基础属性、标题、视区、X轴、Y轴、图例、提示、工具进行调整，而且在编辑面板的每类属性中均列出ECharts组件的已有属性。

由此可见，本发明构建了一种基于ECharts地图组件实现自定义展示面板的系统，通过由主处理单元10、创建模块11、缓存模块12，布局模块13和显示模块14所组成的系统来完成面板的自定义展示，可以便捷地在现有地图组件上实现自定义展示面板，且不会影响原有功能的执行。

可见，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请是参照根据本申请实施例的方法、设备(装置)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上对本申请所提供的方法及系统进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。

Claims (10)

1.一种基于ECharts地图组件实现自定义展示面板的方法，其特征在于，包括以下步骤：

创建ECharts组件的中间代理，通过该中间代理拦截并修改ECharts组件的初始化函数，在原有ECharts组件实例对象上添加布局，其具体表现为：

创建ECharts类的实例对象，以拦截ECharts组件的初始化设置；

在ECharts组件的实例对象上添加自定义面板缓存区；

提供自定义面板的对外接口，并调整自定义面板布局的回调函数；

将自定义面板代码处理为canvas，并存储在缓存区中；计算出自定义面板的页面像素坐标，并显示在地图页面上。

2.根据权利要求1所述的方法，其特征在于：

该方法还执行：通过在ECharts组件的实例对象上实时监听地图缩放事件，当匹配到自定义面板的缩放参数时，调用调整自定义面板布局的回调函数，动态显示和隐藏自定义面板，并通过监听ECharts地图容器，实时响应因ECharts地图容器大小的变化产生的位置偏移。

3.根据权利要求2所述的方法，其特征在于：

在实时响应因ECharts地图容器大小的变化产生的位置偏移后，通过convertToPixel方式将自定义面板的经纬度坐标转换为页面像素坐标，以调整自定义面板位置。

4.根据权利要求1所述的方法，其特征在于：

定义自定义面板的参数具体包括面板html代码、面板在地图中的坐标位置、地图缩放级别、是否使用缓存面板、用户自定义的面板ID。

5.根据权利要求1所述的方法，其特征在于：

所述调整自定义面板布局的回调函数包括当ECharts地图进行缩放或者ECharts地图容器大小改变后，通过调整自定义面板的位置以及根据缩放级别决定是否显示和隐藏自定义面板，其中，在调整自定义面板位置时，读取地图对象的缩放级别，当匹配到自定义面板的缩放级别时，再次执行调用地图对象的经纬度坐标转换为页面像素坐标的步骤，根据重新得到的页面像素坐标来调整面板位置；若没有匹配到自定义面板的缩放级别时，移除掉当前面板。

6.根据权利要求1所述的方法，其特征在于：

所述将自定义面板代码处理为canvas，包括：浏览器在做页面渲染时，使用Dom元素作为矢量图进行渲染，其中，通过使用html标签来设计自定义面板，并将自定义面板中所有html标签绘制为1个canvas元素。

7.根据权利要求1所述的方法，其特征在于：

在将自定义面板中所有html标签绘制为1个canvas元素时，创建一个离屏div容器和canvas元素，将面板html代码注入到离屏div容器中并挂载到当前页面文档；

通过递归当前容器的DOM树，获取到每一层节点的数据，并生成层叠数据，依据浏览器渲染层叠数据的规则，通过CanvasRenderer类的render方法，将DOM元素一层一层渲染到离屏div容器的canvas元素中。

8.根据权利要求7所述的方法，其特征在于：

在生成canvas对象后，将生成结果存储在缓存区，并移除掉页面文档中的临时容器；

当用户指定面板ID且使用缓存的情况下，直接从缓存区找到面板对象；若不使用缓存，则更新当前ID下的面板对象。

9.根据权利要求1至8任一项所述的方法，其特征在于：

该方法还执行：通过对外接口响应用户操作，根据修改定义后的自定义面板创建与用户操作对应的面板信息；将面板信息转化为canvas，并存储在Cache缓存区，将经纬度转换为页面像素坐标添加到ECharts地图容器中。

10.根据权利要求1至8任一项至所述的方法，其特征在于：

该方法还执行：在自定义面板上对ECharts组件的属性进行调整，通过编辑面板对ECharts组件的基础属性、标题、视区、X轴、Y轴、图例、提示、工具进行调整，而且在编辑面板的每类属性中均列出ECharts组件的已有属性。

Images