1.本技术涉及地理信息系统技术领域，特别是涉及一种地图点位的渲染方法、装置、设备及存储介质。
背景技术：2.地理信息系统(geographic information system，gis)是在计算机硬件、软件系统的支持下，对整个或部分地球表层(包括大气层)空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。随着地理信息系统技术在智能化领域的不断发展和普及，地图应用在web端、移动端、嵌入式等终端设备越来越广泛。目前对地图引擎mapbox的要求也越来越高。
3.在上述地图引擎mapbox中，其只能渲染简单的html和样式的点位，无法完成复杂的前端交互，开发复杂功能对开发人员来说会有相当大的心智负担，同时也不符合现有的使用vue框架开发的模式，目前mapbox地图与vue框架没有必然的联系，把他们结合起来一起开发，目前仍未实现。
4.前面的叙述在于提供一般的背景信息，并不一定构成现有技术。
技术实现要素：5.有鉴于此，本技术的目的在于提供一种地图点位的渲染方法、装置、设备及存储介质，能够解决mapbox地图在复杂点位场景下开发困难的问题。
6.为达到上述目的，本技术的技术方案是这样实现的：
7.第一方面，本技术实施例提供了一种地图点位的渲染方法，包括：
8.载入所需数据源及点位图层，以初始化地图；
9.地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；
10.根据所述更新地图点位指令，进行更新地图点位。
11.在一实施例中，所述数据源是地图的基础数据，包括道路、草地、陆地、河流、地点中的至少一个。
12.在一实施例中，进行更新地图点位，具体包括：
13.根据数据源名称获取当前在地图显示区域内渲染出来的点位列表；
14.判断点位列表中的点位在缓存中是否均能查找到对应的vue实例，若有的点位不能查找到对应的vue实例，则创建对应的vue实例，将创建的vue实例挂载在对应点位的dom元素上；
15.销毁不在显示区域内的多余点位。
16.在一实施例中，销毁不在显示区域内的多余点位，包括：
17.销毁不在显示区域内的多余点位、多余点位对应的vue实例。
18.在一实施例中，还包括：
19.将点位以及对应的vue实例进行备份。
20.第二方面，本技术实施例提供了一种地图点位的渲染装置，包括：
21.初始化模块，用于载入所需数据源及点位图层，以初始化地图；
22.监听模块，用于地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；
23.更新模块，用于根据所述更新地图点位指令，进行更新地图点位。
24.第三方面，本技术实施例提供了一种终端，包括：存储器、处理器，其中，所述存储器上存储有地图点位的渲染程序，所述地图点位的渲染程序被所述处理器执行时实现所述的地图点位的渲染方法的步骤。
25.第四方面，本技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述的地图点位的渲染方法的步骤。
26.本技术实施例提供的技术方案带来的有益效果是：
27.本技术实施例提供的地图点位的渲染方法、装置、设备及存储介质，通过载入所需数据源及点位图层，以初始化地图；地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；根据所述更新地图点位指令，进行更新地图点位，从而解决了mapbox地图在复杂点位场景下开发困难的问题，节省了人力、提高了效率、降低了开发人员的心智负担、提高地图交互的可操作性、降低了开发人员的上手难度、解放了开发人员的生产力。
附图说明
28.为了更清楚地说明本技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
29.图1为本技术实施例提供的地图点位的渲染方法的流程示意图；
30.图2为本技术另一实施例提供的地图点位的渲染方法的流程示意图；
31.图3为本技术实施例提供的地图点位的渲染装置的框图；
32.图4为本技术另一实施例提供的地图点位的渲染装置的框图；
33.图5为本技术又一实施例提供的地图点位的渲染装置的框图。
具体实施方式
34.下面将结合附图，对本技术的特定实施例进行详细描述。显然，所描述的实施例仅仅是本技术的一部分实施例，而不是全部的实施例。基于本技术的描述，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
35.在本技术的描述中，除非另有明确的规定和限定，术语“设置”、“安装”、“连接”等应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连。对于本领域的普通技术人员而言，可以具体情况理解上述术语的具体含义。
36.术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，或者是该申请产品使用时惯常摆放的方位或位置关系，仅是为了便于描述和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本技术的限制。
37.术语“第一”、“第二”、“第三”等仅仅是为了区别属性类似的元件，而不是指示或暗示相对的重要性或者特定的顺序。
38.术语“包括”、“包含”或者其任何其他变体，意在涵盖非排他性的包含，除了包含所列的那些要素，而且还可包含没有明确列出的其他要素。
39.图1是本技术实施例提供的地图点位的渲染方法的流程示意图。请参考图1，本实施例的地图点位的渲染方法，可以包括以下步骤：
40.步骤s10，载入所需数据源及点位图层，以初始化地图。
41.这里，载入所需数据源及点位图层，以初始化地图，即初始化地图、初始化数据源、和初始化点位图层，这些都是对地图、数据源、点位图层的展示所做的准备工作。其中，地图是mapbox地图，mapbox是一种开源的地图引擎，是可以在浏览器中运行的代码库。数据源是地图的基础数据，例如数据源包括道路、草地、陆地、河流、地点等数据中的至少一个。
42.其中，点位是根据经纬度坐标画在地图上的某个点以及点上面内容，例如，高德地图上的罗湖医院就是一个点位，该点位是根据经纬度坐标画在高德地图上的，并且是可点击可操作的。点位图层是用来存放点位的图层，是浮在地图之上的一个层级空间。
43.步骤s11，地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令。
44.其中，触发更新地图点位指令，也就是调用更新地图点位的方法。这里，若监听到地图完成初始化，则监听地图的移动事件和/或移动结束事件，若监听到地图的移动事件和/或移动结束事件，则调用更新地图点位的方法，然后更新地图点位。
45.步骤s12，根据更新地图点位指令，进行更新地图点位。
46.图2为本技术另一实施例提供的地图点位的渲染方法的流程示意图。如图2所示，步骤s12中，进行更新地图点位，具体可以包括：步骤s20-步骤s23。
47.步骤s20，根据数据源名称获取当前在地图显示区域内渲染出来的点位列表。
48.其中，点位列表是数据源中的点位组成的列表。渲染是浏览器根据地图文档或者地图数据画出对应的人类能够理解的东西，然后在屏幕上显示出来。地图显示区域是显示在终端的地图区域，而不是隐藏的地图区域。这里，根据数据源名称，例如：建筑物数据源，获取到当前地图上显示出来的点位列表，例如，当前地图在罗湖某地，地图上只能看到三个地方：好运来大厦、潮汕大厦、阳光新干线家园，则获取的点位列表就是这三个地方。
49.步骤s21，判断点位列表中的点位在缓存中是否均能查找到对应的vue实例，若有的点位不能查找到对应的vue实例，则进行步骤s22，若点位均能查找到对应的vue实例，则进行步骤s23。
50.步骤s22，创建对应的vue实例，将创建的vue实例挂载在对应点位的dom(document object model，文档对象模型)元素上。
51.这里，每个点位均对应一个vue实例，若有的点位从缓存中没有找到对应的vue实例，则可以使用createapp创建出点位对应的vue实例，并将vue实例挂载在点位的dom元素
上。
52.其中，dom元素是浏览器根据代码渲染出真实页面的一个依据。它和web页面上所见到的内容是一一对应的，比如罗湖医院点位就是浏览器根据罗湖医院的dom元素画出的人类能很容易理解的一个框的样子。vue实例是vue框架的一个运行时，实例指的是“实际的例子”，是一个对象。可以通过vue框架创建出很多个vue实例，即vue框架相当于模板，vue实例相当于用模板创造的一个对象。
53.步骤s23，将vue实例挂载在对应点位的dom元素上，并进行步骤s25。
54.步骤s25，销毁不在显示区域内的多余点位。
55.其中，销毁不在显示区域内的多余点位，具体可以包括：
56.销毁不在显示区域内的多余点位、多余点位对应的vue实例。
57.这里，将vue实例均挂载在对应点位的dom元素上后，则销毁不在显示区域内的多余点位。不在显示区域内的多余点位就是没有在终端的显示屏显示出来的点位，这些点位统称为多余点位。销毁时，不仅要销毁多余点位，还要销毁多余点位对应的vue实例。自此，mapbox渲染vue实例点位的方法就实现了，经过处理后，就可以直接在vue实例中进行开发了。
58.其中，因为地图从一个地方移动到另外一个地方，就会伴随着旧点位的废弃，新点位的渲染，现有技术中，因为旧点位是vue实例组合成的，因此需要代码的手动销毁。而本技术中可以执行自动销毁，可以极大地节省人力、提高效率。
59.优选地，还包括步骤：
60.将点位以及对应的vue实例进行备份。
61.这里，将点位以及对应的vue实例进行备份的步骤可以在步骤s20、s22、s23、s25中执行，由于点位刷新的频率很高，因此这里需要将点位以及对应的vue实例进行备份到存储器中，以便于两次刷新之间相同的点位将尽量重复利用。点位刷的新率很高指的是点位更新很快，稍微移动一点地图，就会有新出现的地方，所以就要新显示出很多点位，同时也有隐藏的地方，所以要隐藏很多点位。
62.在mapbox引擎中，点位可以挂载普通dom元素，vue实例可以指定某个dom元素挂载在上面，如果创建一个空的dom元素挂载到mabox的点位上，再将vue实例挂载到该空的dom元素上。并实现dom元素与对应的vue实例同步加载与移除，防止dom元素已移除但vue实例未移除导致的内存泄露问题，就可以实现在mapbox上挂载vue实例点位的功能了。经过本技术的处理方式，开发人员就可以以开发vue组件的方式开发地图交互功能，可以节省人力、提高效率、降低开发人员的心智负担、提高地图交互的可操作性、降低开发人员的上手难度、解放开发人员的生产力。
63.综上所述，本技术实施例提供的地图点位的渲染方法，通过地图点位的渲染方法、装置、设备及存储介质，通过载入所需数据源及点位图层，以初始化地图；地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；根据所述更新地图点位指令，进行更新地图点位，从而解决了mapbox地图在复杂点位场景下开发困难的问题，节省了人力、提高了效率、降低了开发人员的心智负担、提高地图交互的可操作性、降低了开发人员的上手难度、解放了开发人员的生产力。
64.以下为本技术的装置实施例，在装置实施例中未详尽描述的细节，可以参考上述
对应的方法实施例。
65.图3是本技术实施例提供的地图点位的渲染装置的框图。请参考图3，所述地图点位的渲染装置包括：初始化模块30、监听模块31、更新模块32，其中，
66.初始化模块30，用于载入所需数据源及点位图层，以初始化地图；
67.监听模块31，用于地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；
68.更新模块32，用于根据所述更新地图点位指令，进行更新地图点位。
69.优选地，如图4所示，更新模块32，包括：
70.获取模块40，用于根据数据源名称获取当前在地图显示区域内渲染出来的点位列表；
71.创建模块41，用于判断点位列表中的点位在缓存中是否均能查找到对应的vue实例，若有的点位不能查找到对应的vue实例，则创建对应的vue实例，将创建的vue实例挂载在对应点位的dom元素上；
72.销毁模块43，用于销毁不在显示区域内的多余点位。
73.优选地，销毁模块43还用于销毁不在显示区域内的多余点位、多余点位对应的vue实例。
74.优选地，所述数据源是地图的基础数据，包括道路、草地、陆地、河流、地点中的至少一个。
75.优选地，如图5所示，还包括：
76.备份模块50，用于将点位以及对应的vue实例进行备份。
77.基于前述实施例相同的发明构思，本技术实施例还提供了一种终端，该终端包括存储器、处理器，存储器上存储有地图点位的渲染程序，地图点位的渲染程序被处理器执行时实现上述任一实施例中的地图点位的渲染方法的步骤。
78.本技术还提供一种计算机可读存储介质，计算机可读存储介质上存储有地图点位的渲染程序，地图点位的渲染程序被处理器执行时实现上述任一实施例中的地图点位的渲染方法的步骤。
79.在本技术提供的终端和计算机可读存储介质的实施例中，可以包含任一上述地图点位的渲染方法实施例的全部技术特征，说明书拓展和解释内容与上述方法的各实施例基本相同，在此不再做赘述。
80.本技术实施例还提供一种计算机程序产品，计算机程序产品包括计算机程序代码，当计算机程序代码在计算机上运行时，使得计算机执行如上各种可能的实施方式中的方法。
81.本技术实施例还提供一种芯片，包括存储器和处理器，存储器用于存储计算机程序，处理器用于从存储器中调用并运行计算机程序，使得安装有芯片的设备执行如上各种可能的实施方式中的方法。
82.综上所述，本技术实施例提供的地图点位的渲染装置、设备及计算机可读存储介质，通过地图点位的渲染方法、装置、设备及存储介质，通过载入所需数据源及点位图层，以初始化地图；地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；根据所述更新地图点位指令，进行更新地图点位，从而解决了mapbox地图
在复杂点位场景下开发困难的问题，节省了人力、提高了效率、降低了开发人员的心智负担、提高地图交互的可操作性、降低了开发人员的上手难度、解放了开发人员的生产力。
83.需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
84.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应以所附的权利要求为准。
技术特征：1.一种地图点位的渲染方法，其特征在于，包括：载入所需数据源及点位图层，以初始化地图；地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；根据所述更新地图点位指令，进行更新地图点位。2.如权利要求1所述的地图点位的渲染方法，其特征在于，所述数据源是地图的基础数据，包括道路、草地、陆地、河流、地点中的至少一个。3.如权利要求1所述的地图点位的渲染方法，其特征在于，进行更新地图点位，具体包括：根据数据源名称获取当前在地图显示区域内渲染出来的点位列表；判断点位列表中的点位在缓存中是否均能查找到对应的vue实例，若有的点位不能查找到对应的vue实例，则创建对应的vue实例，将创建的vue实例挂载在对应点位的dom元素上；销毁不在显示区域内的多余点位。4.如权利要求1所述的地图点位的渲染方法，其特征在于，销毁不在显示区域内的多余点位，包括：销毁不在显示区域内的多余点位、多余点位对应的vue实例。5.如权利要求1所述的地图点位的渲染方法，其特征在于，还包括：将点位以及对应的vue实例进行备份。6.一种地图点位的渲染装置，其特征在于，包括：初始化模块，用于载入所需数据源及点位图层，以初始化地图；监听模块，用于地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；更新模块，用于根据所述更新地图点位指令，进行更新地图点位。7.如权利要求6所述的地图点位的渲染装置，其特征在于，更新模块，包括：获取模块，用于根据数据源名称获取当前在地图显示区域内渲染出来的点位列表；创建模块，用于判断点位列表中的点位在缓存中是否均能查找到对应的vue实例，若有的点位不能查找到对应的vue实例，则创建对应的vue实例，将创建的vue实例挂载在对应点位的dom元素上；销毁模块，用于销毁不在显示区域内的多余点位。8.如权利要求6所述的地图点位的渲染装置，其特征在于，还包括：备份模块，用于将点位以及对应的vue实例进行备份。9.一种终端，其特征在于，包括：存储器、处理器，其中，所述存储器上存储有地图点位的渲染程序，所述地图点位的渲染程序被所述处理器执行时实现如权利要求1-5中任一项所述的地图点位的渲染方法的步骤。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1-5中任一项所述的地图点位的渲染方法的步骤。
技术总结一种地图点位的渲染方法，包括：载入所需数据源及点位图层，以初始化地图；地图初始化完成后，监听到地图移动事件和/或地图移动结束事件时，触发更新地图点位指令；根据所述更新地图点位指令，进行更新地图点位。本申请能够解决mapbox地图在复杂点位场景下开发困难的问题。本申请还公开了一种地图点位的渲染装置、设备及存储介质。设备及存储介质。设备及存储介质。
技术研发人员：陈舸帆
受保护的技术使用者：深圳奇迹智慧网络有限公司
技术研发日：2022.06.23
技术公布日：2022/11/1
