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

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

【技术实现步骤摘要】
一种基于ECharts地图组件实现自定义展示面板的方法


[0001]本专利技术涉及数据可视化
，具体涉及一种基于ECharts地图组件实现自定义展示面板的方法。

技术介绍

[0002]ECharts是目前使用比较普遍的开源图表类库，目前开发过程中，由于每一个使用ECharts的页面基本上要重新生成ECharts的配置，并且逐个属性地去配置，造成了大量的重复工作和代码的冗余，给项目的开发和维护工作带来了极大的不便，更进一步地降低了开发维护的效率和页面运行的效率。
[0003]随着大数据和数据分析趋势的流行，数据可视化变得越来越重要，其中地理信息可视化又是可视化领域中很重要的一类应用，涉及到在地图组件上呈现海量的丰富的数据信息。ECharts是一个基于Web前端技术实现的数据可视化开源项目，已广泛应用于数据可视化领域，其中也包含了与地理信息可视化相关的地图组件。数据面板作为地图数据展示的常见形式，在ECharts地图组件可以通过配置散点的label属性实现数据提示框。
[0004]因此，出于页面绘制性能的考虑，ECharts仅本文档来自技高网...

【技术保护点】

【技术特征摘要】
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地图容器大小改变后，通过调整自定义面板的位置以及根据缩放级别决定是否显示和隐藏自定义面板，其中，在调整自定义面板位置时，读取地图对象的缩放级别，当匹配到自定义面板的缩放级别时，再次执行调用地图对象的经纬度坐标转换为页面像素坐标的步骤，根据...

【专利技术属性】
技术研发人员：刘豪亮，陈海鹏，朱建锋，李振华，高翔，
申请(专利权)人：珠海高凌信息科技股份有限公司，
类型：发明
国别省市：