基于VUE前端开发技术的地图开发方法及装置与流程

基于vue前端开发技术的地图开发方法及装置
技术领域
1.本技术涉及vue前端开发技术，尤其涉及一种基于vue前端开发技术的地图开发方法及装置。


背景技术：

2.电子地图(electronic map)即数字地图，是利用计算机技术，以数字方式存储和查阅的地图。在电子地图的开发中，开发者需要基于各大地图厂商提供的方式(如web js开发方式、android开发方式、ios开发方式等)来开发和使用电子地图中的功能。除此之外，随着前端技术的发展，vue前端开发技术由于具有越来越受到开发者的喜爱，基于vue前端开发技术来进行电子地图开发也成为了一种趋势。
3.目前，开发者在基于vue工程(使用vue进行开发的前端项目工程)开发地图功能时只能通过直接使用js文件来开发和使用地图功能。然而，vue前端开发技术主要是基于组件化进行的开发，直接使用js文件来开发和使用地图的方式与vue工程的组件化思想存在很大差异，会影响基于vue前端开发技术进行地图开发的效率。
4.因此，如何提高基于vue前端开发技术进行地图开发的效率，仍然是亟待解决的问题。


技术实现要素：

5.本技术提供一种基于vue前端开发技术的地图开发方法及装置，用以提高基于vue前端开发技术进行地图开发的效率。
6.一方面，本技术提供一种基于vue前端开发技术的地图开发方法，包括：
7.创建vue工程；
8.获取第一代码，所述第一代码用于请求地图js文件；
9.获取第二代码，以及使用所述第二代码从所述js文件中获取地图参数，所述第二代码用于从所述js文件中读取地图参数，所述地图参数包括地图图像的显示参数、地图中各工具的显示参数和各工具的使用参数；
10.获取第三代码，所述第三代码用于基于所述地图参数显示地图，其中，在地图中各工具使用时，所述第三代码包含用于将各工具创建为js对象的代码；
11.将所述第一代码、所述第二代码、所述地图参数和所述第三代码各自封装为vue组件后置入所述vue工程，得到地图vue工程；
12.基于所述地图vue工程的运行进行地图开发。
13.可选的，所述获取所述第二代码执行后从所述js文件中得到的地图参数之后，还包括：
14.获取vue参数校验工具；
15.基于所述vue参数校验工具校验所述地图参数；
16.所述将所述地图参数封装为vue组件后置入所述vue工程包括：
17.当所述地图参数校验成功后，将所述地图参数封装为vue组件后置入所述vue工程。
18.可选的，所述将所述地图参数封装为vue组件后置入所述vue工程包括：
19.在封装所述地图参数之前，当所述地图参数更新时，将更新后的所述地图参数封装为vue组件后置入所述vue工程。
20.可选的，所述第一代码在所述vue工程初始化时执行。
21.另一方面，本技术提供一种基于vue前端开发技术的地图开发装置，包括：
22.创建模块，用于创建vue工程；
23.获取模块，用于获取第一代码，所述第一代码用于请求地图js文件；
24.所述获取模块还用于获取第二代码，以及使用所述第二代码从所述js文件中获取地图参数，所述第二代码用于从所述js文件中读取地图参数，所述地图参数包括地图图像的显示参数、地图中各工具的显示参数和各工具的使用参数；
25.所述获取模块还用于获取第三代码，所述第三代码用于基于所述地图参数显示地图，其中，在地图中各工具使用时，所述第三代码包含用于将各工具创建为js对象的代码；
26.封装模块，用于将所述第一代码、所述第二代码、所述地图参数和所述第三代码各自封装为vue组件后置入所述vue工程，得到地图vue工程；
27.开发模块，用于基于所述地图vue工程的运行进行地图开发。
28.可选的，所述获取模块还用于获取vue参数校验工具；
29.还包括：
30.校验模块，用于基于所述vue参数校验工具校验所述地图参数；
31.所述封装模块具体用于当所述地图参数校验成功后，将所述地图参数封装为vue组件后置入所述vue工程。
32.可选的，所述封装模块具体用于：
33.在封装所述地图参数之前，当所述地图参数更新时，将更新后的所述地图参数封装为vue组件后置入所述vue工程。
34.另一方面，本技术提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；
35.所述存储器存储计算机执行指令；
36.所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面所述的基于vue前端开发技术的地图开发方法。
37.另一方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当所述指令被执行时，使得计算机执行如第一方面所述的基于vue前端开发技术的地图开发方法。
38.另一方面，本技术提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的基于vue前端开发技术的地图开发方法。
39.本技术的实施例提供的方法利用vue前端开发技术对地图的加载、展示和使用的过程中使用的代码和参数等封装为组件，使得基于vue前端开发技术进行地图开发时是以组件化的形式进行开发，更符合vue前端开发技术的组件化思想，提高了地图开发效率。
附图说明
40.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
41.图1为本技术提供的基于vue前端开发技术的地图开发方法的一种应用场景示意图。
42.图2为本技术的一个实施例提供的基于vue前端开发技术的地图开发方法的流程示意图。
43.图3为本技术的一个实施例提供的基于vue前端开发技术的地图开发装置的示意图。
44.图4为本技术的一个实施例提供的电子设备的示意图。
45.通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
46.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
47.首先对本技术涉及到的名词进行解释：
48.vue：一种前端网页开发技术，是目前前端开发的主流框架。
49.vue工程：使用vue进行开发的前端项目工程；
50.vue组件：vue工程可划分为多个小模块，各个小模块可作为组件在不同的地方使用。
51.vue生命周期：从网页打开到关闭存在一个完整的周期，可以在不同的时期做不同的处理。如vue生命周期中的mounted阶段对应页面刚打开的阶段。
52.vue-cli：用于初始化vue工程的工具。
53.混入mixin对象：vue的一种特性，可以将不同组件中相同的逻辑代码提出后复用。
54.在电子地图的开发中，开发者需要基于各大地图厂商提供的方式(如web js开发方式、android开发方式、ios开发方式等)来开发和使用电子地图中的功能。除此之外，随着前端技术的发展，vue()前端开发技术由于具有越来越受到开发者的喜爱，基于vue前端开发技术来进行电子地图开发也成为了一种趋势。
55.目前，开发者在基于vue工程(使用vue进行开发的前端项目工程)开发地图功能时只能通过直接使用js文件来开发和使用地图功能。具体的，先请求获取到地图厂商提供的地图js文件，再基于地图js文件定义的方法来使用地图功能。即虽然已经使用了vue前端开发技术，但是仍然需要使用js文件定义的方法来使用地图功能，而不是vue前端开发技术所定义的组件化的方法来使用地图功能。因此，传统的基于vue工程来开发和使用地图的方法与vue工程的组件化思想存在很大差异，会影响基于vue前端开发技术进行地图开发和使用的效率。因此，如何提高基于vue前端开发技术进行地图开发和使用的效率，仍然是亟待解
决的问题。
56.基于此，本技术提供一种基于vue前端开发技术的地图开发方法，将使用地图js文件开发和使用地图的所有过程封装为组件，以组件的形式定义地图开发和使用，以构造vue前端开发技术中需要使用的地图vue工程。在创建了地图vue工程后，根据组件化的地图vue工程完成地图开发。
57.本技术提供的基于vue前端开发技术的地图开发方法应用于电子设备，该电子设备例如后台服务器、计算机等。图1为本技术提供的基于vue前端开发技术的地图开发方法的应用示意图。图中，该电子设备会请求地图js文件并解析js文件得到地图参数，而后再展示地图(包括地图中的功能)，这些过程所涉及到的代码和参数会各自被封装为vue组件后置入创建的vue工程中，以构成地图vue工程。如此，在基于vue前端开发技术开发地图时，直接基于组件化了的vue工程完成地图开发，而不用再通过地图js文件定义的方式来完成地图开发，更符合vue前端开发技术组件化的思想。
58.请参见图2，本技术其中一个实施例提供一种基于vue前端开发技术的地图开发方法，包括：
59.s210，创建vue工程。
60.在开始进行地图开发前，先创建一个vue工程(vue项目)，在创建时需要人工配置vue工程的运行环境，具体包括人工安装vue的相关依赖，并配置vue工程相关的配置信息。在配置好vue工程的运行环境后，使用vue-cli初始化该vue工程。
61.s220，获取第一代码，该第一代码用于请求地图js文件。
62.在该vue工程初始化时，需要动态引入地图js文件。具体的，在该vue工程初始化时，在vue生命周期的安装项目(mouted)中定义文档对模型(document object model，简称dom)对象脚本script，通过修改script的访问地址来请求地图js文件。在获取到地图js文件后会进行地图的初始化展示，即新建地图对象，并读取地图参数后进行地图的初始化展示。
63.可选的，开发人员可以自定义如何通过获取到的地图js文件来进行地图初始化展示。
64.s230，获取第二代码，以及使用该第二代码从该js文件中获取地图参数，该第二代码用于从该js文件中读取地图参数，该地图参数包括地图图像的显示参数、地图中各工具的显示参数和各工具的使用参数。
65.地图参数是如步骤s220中描述的地图对象的参数，在进行地图初始化展示时，需要从js文件中获取地图参数，再基于地图参数进行地图初始化展示。具体的，基于该地图参数中的该地图图像的显示参数(例如地图显示的宽、高、色彩等)、该地图中各工具的显示参数(例如地图缩放工具的宽、高、形状、色彩等)和工具功能的使用参数(例如地图缩放工具按压的压力值、时间等)进行地图初始化展示。
66.可选的，该js文件提供了参数调整的功能，也就是说开发人员可以对地图参数进行修改调整。具体的，开发人员可以按照自定义得方法创建出地图对象，该地图对象包括地图显示对象和地图工具对象，该地图显示对象具有地图图像的显示参数(例如地图的宽、高和色彩等)，该地图工具对应具有地图中各工具的显示参数和工具功能的使用参数。
67.基于该js文件提供的参数调整的功能，开发按人员可以对创建的该地图对象具有
的原始参数进行修改，对应的，该电子设备中也设置有用于监测地图参数是否变化的程序。在封装该地图参数之前，当该程序监测到地图参数更新时，更新原始的地图参数为新的地图参数，将更新后的该地图参数封装为vue组件后置入该vue工程。
68.s240，获取第三代码，该第三代码用于基于该地图参数显示地图，其中，在地图中各工具使用时，该第三代码包含用于将各工具创建为js对象的代码。
69.地图中各工具使用时需要创建对应的js对象才可以使用，创建的js对象具有如上描述的工具功能的使用参数。
70.s250，将该第一代码、该第二代码、该地图参数和该第三代码各自封装为vue组件后置入该vue工程，得到地图vue工程。
71.该第一代码用于请求地图js文件，该第二代码用于从该js文件中读取地图参数，该第三代码用于进行地图的展示和使用，将这些代码和地图参数都各自封装为vue组件并置入vue工程后，就实现了地图vue工程的组件化。
72.具体的，在进行第三代码的封装中涉及到封装地图工具的展示和使用的代码时，vue前端开发技术中的混入mixin对象会提取出不同地图工具展示和使用的代码中相同的部分代码，在封装时只用封装该部分代码即可，以减少封装工作量。例如对于地图工具而言，删除和重新加载的过程是相同的，对应的代码也是相同的，因此混入mixin对象只需要进行地图工具的删除过程的封装或重新加载过程的封装。
73.可选的，在从js文件中获取地图参数之后，还获取了vue参数校验工具，通过vue参数校验工具来校验地图参数是否合法。只有当该地图参数校验成功后，才将该地图参数封装为vue组件后置入vue工程。
74.综上步骤s210至步骤s250的描述，本实施例提供的方法其实是利用vue前端开发技术对地图的加载、展示和使用的过程中使用的代码和参数等封装为组件，目的是使得基于vue前端开发技术进行地图开发时是以组件化的形式进行开发，更符合vue前端开发技术的组件化思想，提高了地图开发效率。其中，地图的加载过程即获取js文件以及从js文件中获取地图参数的过程，对应第一代码、第二代码和地图参数。地图展示和使用的过程即基于地图参数展示地图和使用地图的过程，对应第三代码。在封装过程中，不仅需要封装一些对象(如上描述的地图对象和js对象)，还需要对这些对象的创建代码进行封装，以避免地图vue工程在使用时还需要创建对象。
75.s260，基于该地图vue工程的运行进行地图开发。
76.在基于步骤s210至步骤s250创建的该地图vue工程后，基于该地图vue工程的运行进行地图开发。在基于该地图vue工程的运行进行地图开发时，可以选择全部引入封装好的vue组件，或者部分引入封装好的vue组件。在引入vue组件时，该电子设备可以打包需要引入的vue组件为一个代码包，将该代码包置入到用于进行地图开发的代码中就可以直接调用vue组件对应的各个功能。参考步骤s210至步骤s250所描述的地图vue工程创建过程，vue组件对应的各个功能包括请求地图js文件、基于地图js文件获取地图参数、基于地图参数展示和使用地图等。
77.综上，本实施例提供的方法利用vue前端开发技术对地图的加载、展示和使用的过程中使用的代码和参数等封装为组件，使得基于vue前端开发技术进行地图开发时是以组件化的形式进行开发，更符合vue前端开发技术的组件化思想，提高了地图开发效率。
78.请参见图3，本技术其中一个实施例提供一种基于vue前端开发技术的地图开发装置10，包括：
79.创建模块11，用于创建vue工程。
80.获取模块12，用于获取第一代码，该第一代码用于请求地图js文件，该第一代码在该vue工程初始化时执行。
81.该获取模块12还用于获取第二代码，以及使用该第二代码从该js文件中获取地图参数，该第二代码用于从该js文件中读取地图参数，该地图参数包括地图图像的显示参数、地图中各工具的显示参数和各工具的使用参数。
82.该获取模块12还用于获取第三代码，该第三代码用于基于该地图参数显示地图，其中，在地图中各工具使用时，该第三代码包含用于将各工具创建为js对象的代码。
83.封装模块13，用于将该第一代码、该第二代码、该地图参数和该第三代码各自封装为vue组件后置入该vue工程，得到地图vue工程；
84.开发模块14，用于基于该地图vue工程的运行进行地图开发。
85.该获取模块12还用于获取vue参数校验工具。
86.该装置10还包括校验模块15，用于基于该vue参数校验工具校验该地图参数。
87.该封装模块13具体用于当该地图参数校验成功后，将该地图参数封装为vue组件后置入该vue工程。
88.该封装模块13具体用于在封装该地图参数之前，当该地图参数更新时，将更新后的该地图参数封装为vue组件后置入该vue工程。
89.请参见图4，本技术其中一个实施例提供一种电子设备20，该电子设备20包括处理器21，以及与该处理器通信连接的存储器22。该存储器22存储计算机执行指令，该处理器21执行该存储器存储的计算机执行指令，以实现如上任一项实施例描述的基于vue前端开发技术的地图开发方法。
90.本技术还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机执行指令，当该指令被执行时，使得计算机执行指令被处理器执行时用于实现如上任一项实施例提供的该基于vue前端开发技术的地图开发方法。
91.本技术还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如上任一项实施例提供的基于vue前端开发技术的地图开发方法。
92.需要说明的是，上述计算机可读存储介质可以是只读存储器(read only memory，rom)、可编程只读存储器(programmable read-only memory，prom)、可擦除可编程只读存储器(erasable programmable read-only memory，eprom)、电可擦除可编程只读存储器(electrically erasable programmable read-only memory，eeprom)、磁性随机存取存储器(ferromagnetic random access memory，fram)、快闪存储器(flash memory)、磁表面存储器、光盘、或只读光盘(compact disc read-only memory，cd-rom)等存储器。也可以是包括上述存储器之一或任意组合的各种电子设备，如移动电话、计算机、平板设备、个人数字助理等。
93.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有
的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
94.上述本技术实施例序号仅仅为了描述，不代表实施例的优劣。
95.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本技术各个实施例所描述的方法。
96.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
97.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
98.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
99.以上仅为本技术的优选实施例，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。