一种基于高德地图API的便捷式地图图例组件及其图层加载方法与流程

本发明涉及地理信息系统，具体涉及一种基于高德地图api的便捷式地图图例组件及其图层加载方法。

背景技术：

1、地图图例组件是地图制作中不可或缺的一部分，它用于解释地图上的符号和颜色所代表的内容，其通常位于地图的一角或一侧，通过符号示例及其说明文字来表示地图要素的含义，图例的设计需要考虑符号的完备性和一致性，以确保图例能够准确地反映地图上的信息，能够为用户提供了更好的信息理解和交互体验，是地图上不可或缺的一种重要工具；

2、目前，图例组件在使用时，图例组件灵活度较低，用户与图例组件之间缺乏良好的交互感，用户难以简单、直观的使用图例组件，体验往往不佳；

3、因此，发明一种基于高德地图api的便捷式地图图例组件及其图层加载方法来解决上述问题很有必要。

技术实现思路

1、本发明的目的是提供一种基于高德地图api的便捷式地图图例组件及其图层加载方法，通过设计有灵活的配置单元，且具有丰富的图层类型选择、高效的点线数据展示、灵活的图层管理、事件回调机制，以及数据处理单元、图例显示单元、配置单元和图层交互单元的协同工作，从而使得该地图图例组件的灵活度更高，用户可以清楚的知晓地图图例组件中各元素的含义，并对各个元素进行操作，使得用户与图例组件之间的交互感大大提高，从而优化了用户的使用体验，信息传达效率高；进一步的，图层加载方法通过配置和初始化地图图例组件，进一步的提高了用户的使用体验，交互方式简单直观，而采用了模块化和结构化的设计，使得地图图例组件的配置和更新变得更加容易，无需对整体代码进行大规模修改即可完成配置，使用简单方便，以解决技术中的上述不足之处。

2、为了实现上述目的，本发明提供如下技术方案：一种基于高德地图api的便捷式地图图例组件包括：

3、配置单元，有初始化默认配置，用于接收使用者传入的参数进行融合给其他单元使用；

4、图例显示单元，用于展示地图图例组件的图例模块；

5、图层类型单元，用于将地图图层的类型进行分类定义；

6、图层交互单元，用于将不同的图层类型对地图图例组件的交互进行统一封装处理；

7、数据处理单元，用于获取图例数据、存储图例数据、以及处理图例数据；

8、图例交互单元，用于控制地图图例组件的状态；

9、事件交互单元，用于将地图图例组件中需要和使用者发生交互关联的操作，进行一个事件回调。

10、前述的基于高德地图api的便捷式地图图例组件，所述其他单元包括图例显示单元、图例交互单元、地图图层类型单元、地图图层交互单元、数据处理单元、以及事件交互单元。

11、前述的基于高德地图api的便捷式地图图例组件，所述图例模块包括如下元素：

12、a、图形符号，用于接收图片地址展示出图形符号；

13、其中，通过配置单元接收2个图片地址后，规定第1个为图例关闭状态，第2个为图例开启状态，不接收图片时，则不显示图形符号；

14、且图形符号默认宽度设置为页面宽度的2.5%，默认高度设置为页面高度的2.5%，并能通过配置单元自行设置宽高；

15、b、加载中符号，具体以四个圆点匀速旋转代表为加载中状态，默认隐藏；

16、c、内容标签，默认为空，使用者可传入内容扩展图例显示单元信息；

17、d、图例名称，默认为隐藏，显示内容为配置单元的标题信息。

18、前述的基于高德地图api的便捷式地图图例组件，所述图层类型单元包括点类图层、线类图层、其他图层；

19、其中，点类图层包括：海量点图层、标记点图层、海量点标记图层、标注类图层、以及点聚合图层，

20、所述点类图层基本表现形式为n个所述图形符号在地图上按照空间地理数据展示位置信息；

21、线类图层包括：海量线图层、折线图层；

22、所述线类图层基本表现形式为n条折线在地图上按照空间地理数据展示位置信息；

23、其他图层包括：热力图图层和图片图层；

24、其中，点类图层、线类图层、其他图层均可创建或销毁。

25、前述的基于高德地图api的便捷式地图图例组件，所述图层交互单元，将不同的图层类型对地图图例组件的交互进行统一封装处理，具体包括：

26、k1、采用地图通用的方法定义图层的创建、销毁、隐藏、以及显示；

27、k2、点类图层在地图上的可视化显示后，响应鼠标移入移出操作；

28、k3、点类图层在地图上的可视化显示后，响应鼠标点击操作；

29、k4、线类图层在地图上的可视化显示后，响应鼠标移入移出操作；

30、k5、线类图层在地图上的可视化显示后，响应鼠标点击操作。

31、前述的基于高德地图api的便捷式地图图例组件，在k1中，采用地图通用的方法定义图层的创建、销毁、隐藏、以及显示，具体如下：

32、创建图层方法：根据不同的图层类型，通过对应的高德js api方法传入数据在地图上创建对应的图层，进行数据可视化的显示；

33、销毁图层方法：根据不同的图层类型，通过对应的高德js api方法将地图上对应的已创建的图层销毁；

34、隐藏图层方法：根据不同的图层类型，通过对应的高德js api方法将地图上对应的已创建且显示的图层进行隐藏操作；

35、显示图层方法：根据不同的图层类型，通过对应的高德js api方法将地图上对应的已创建且隐藏的图层进行显示操作；

36、在k2中，点类图层在地图上的可视化显示后，响应鼠标移入移出操作，具体如下：

37、鼠标在图层的某个点位上移入时，获取点位数据的描述信息，若有，在点位上方展示描述文本，反之无响应；

38、鼠标在图层的某个点位上移出时，隐藏已显示的描述文本；

39、鼠标在图层的某个点位上移入时，获取点位数据的选中状态图形符号；若有，在点位叠加一个已选中状态的图形符号，表示为该点位被选中，反之无响应；

40、鼠标在图层的某个点位上移出时，该点位有选中效果时，去除选中效果；

41、同时触发事件交互单元的图层操作回调事件；

42、在k3中，点类图层在地图上的可视化显示后，响应鼠标点击操作，具体如下：

43、鼠标在图层的某个点位上点击时，获取点位数据的选中状态图形符号；若有，在点位叠加一个已选中状态的图形符号，表示为该点位被选中，反之无响应；

44、同时触发事件交互单元的图层操作回调事件；

45、在k4中，线类图层在地图上的可视化显示后，响应鼠标移入移出操作，具体如下：

46、鼠标在图层的某段折线上移入时，获取折线数据的描述信息，若有，在折线上方展示描述文本，反之无响应；

47、鼠标在图层的某段折线上移出时，隐藏已显示的描述文本；

48、鼠标在图层的某段折线上移入时，获取折线数据的选中状态配置，将该折线根据选择配置项改变折线样式，表示该线段为选中状态的线段，表示为该折线被选中；

49、鼠标在图层的某段折线上移出时，该折线有选中效果时，去除选中效果，恢复成默认效果；

50、同时事件交互单元的图层操作回调事件；

51、在k5中，线类图层在地图上的可视化显示后，响应鼠标点击操作，具体为：同时触发事件交互单元的图层操作回调事件。

52、前述的基于高德地图api的便捷式地图图例组件，所述数据处理单元在配置单元里获取图例数据配置项，进行调用；

53、调用过程中图例显示单元加载中符号显示，代表地图图例组件加载中，调用完成时，加载中符号隐藏代表图例数据加载结束；

54、图例数据加载成功后，将图例数据进行存储，根据配置单元获取图例类型调用图层交互单元的创建图层方法，创建出图层。

55、前述的基于高德地图api的便捷式地图图例组件，所述图例交互单元在使用时，能够响应鼠标移入移出、响应鼠标点击操作改变图形符号的状态、响应鼠标点击操作；

56、其中，在响应鼠标移入移出时：

57、若鼠标在图形符号上移入时，能够控制图例显示单元显示图例名称，

58、若鼠标在图形符号上移出时，能够控制图例显示单元使图例名称隐藏；

59、在响应鼠标点击操作改变图形符号的状态时：

60、若鼠标点击状态为关闭图形符号时，图形符号切换为开启状态，

61、若鼠标点击状态为开启图形符号时，图形符号切换为关闭状态；

62、在响应鼠标点击操作时：

63、当鼠标点击状态为关闭图形符号时，在地图上进行添加图层可视化操作，具体为：

64、a1、若图层未创建，则调用数据处理单元获取图例数据，进行数据获取图层创建；

65、a2、若图层已创建，调用显示图层方法，将已创建但隐藏的图层可视化显示在地图上；

66、a3、若图层已创建且配置单元里缓存数据配置是开启时，重新调用数据处理单元获取图例数据，进行数据获取图层创建；

67、a4、若配置单元里定时器配置为开启时，根据配置的定时时间设置创建一个定时器，在获取图例数据成功时开始定时，等定时时间到期，重新调用数据处理单元获取图例数据进行图层数据更新创建；

68、鼠标点击状态为开启图形符号时，此时图层已创建，在地图上进行移除图层可视化操作，具体为：

69、b1、若配置单元里缓存图例数据配置是开启时，调用隐藏图层方法，将已创建且显示的图层进行隐藏；

70、b2、若配置单元里缓存图例数据配置是关闭时，调用销毁图层方法，将已创建的图层进行销毁；

71、b3、若配置单元里开启定时器配置时，进行关闭定时器操作。

72、前述的基于高德地图api的便捷式地图图例组件，所述事件回调包括图层点击回调事件、数据加载回调事件、以及图层操作回调事件；

73、其中，图层点击回调事件具体为：图例显示单元被鼠标单击时，会调用该回调事件，传参为当前图例显示单元开关的状态和地图图例组件的配置项；

74、数据加载回调事件具体为：获取图例数据时，在开始获取图例数据、图例数据获取失败、图例数据获取结束三个状态时都会调用该回调事件，传参为调用状态和地图图例组件的配置项；

75、图层操作回调事件具体为：对于鼠标的点击，移入事件进行监听处理，具体为：

76、点类图层在地图上撒点后，能够对单个点位进行事件的监听回调，

77、线类图层在地图上绘制后，能够对单个折线进行事件的监听回调。

78、一种基于高德地图api的便捷式地图图例组件的图层加载方法，包括以下步骤：

79、s1、在地图上配置及初始化图例，确定地图图例组件的配置列表；

80、其中，配置列表包括尺寸、名称、图形符号、内容样式，地图图层；

81、s2、判断地图图例组件是否打开；

82、其中，若为是，执行步骤s4，若为否，不做任何操作；

83、s3、点击地图图例组件控制其开启地图图层或关闭地图图层；

84、其中，若当前地图图例组件是关闭状态，执行步骤s4，若当前地图图例组件是开启状态，执行步骤s6；

85、s4、调用地图图例组件获取数据方法，获取地图图例组件数据；

86、s5、根据地图图例组件的地图图层类型判断是否能处理；

87、其中，若为是，根据地图图例组件数据创建对应类型的地图图层，若为否，将地图图例组件数据返回；

88、s6、在地图上生成地图图层；

89、s7、关闭地图图例组件时，地图上地图图例组件的地图图层移除。

90、与现有技术相比，本发明的有益效果是：

91、1、本发明通过设计有灵活的配置单元，地图图例组件在使用中，可以根据用户自身需求进行调整，优化了用户的使用体验，界面简洁的同时，信息传达效率高；

92、2、通过图例显示单元加载中符号的显示与隐藏，为用户提供了清晰的加载状态反馈，避免了用户因不明确加载状态而产生的焦虑或误解，而鼠标移入图形符号时显示图例名称，移出时隐藏，这种即时反馈机制帮助用户快速识别和理解地图上的元素，增强了地图图例组件的可读性和易用性；

93、3、提供了丰富的图层类型选择、高效的点线数据展示、灵活的图层管理，从而提升地图图例组件的可读性和交互性的能力，进一步的优化了用户的使用效果，且通过图层交互单元统一封装处理，使得图层的管理较为灵活，具有丰富的交互体验；

94、4、事件回调机制则支持复杂图层数据的可视化操作，并根据当前图例显示单元的状态和地图图例组件的配置项进行相应处理，这种即时反馈机制增强了用户与地图之间的交互性，使用户能够更直观地控制地图图层的显示与隐藏，再次用户体验；

95、5、通过数据处理单元、图例显示单元、配置单元和图层交互单元的协同工作，使得图层的处理、加载、创建、配制、优化都变得高效直观，图层数据变得透明、可控，具有高度灵活性，使用者与整个地图图例组件的交互更好，操作更为直观便捷；

96、6、图层加载方法通过配置和初始化地图图例组件，使得用户能够直观地看到地图图例，了解地图上不同图层所代表的含义，提高了用户的使用体验，交互方式简单直观，灵活性较高，满足不同应用场景的需求，且通过判断地图图例组件的开关状态，能够确保图层加载的准确性和有效性，采用了模块化和结构化的设计，使得地图图例组件的配置和更新变得更加容易，无需对整体代码进行大规模修改即可完成配置，使用简单方便。