一种网页端GIS开发方法、设备及介质与流程

一种网页端gis开发方法、设备及介质
技术领域
1.本技术涉及计算机技术领域，尤其涉及一种网页端gis开发方法、设备及介质。


背景技术：

2.随着大数据技术对各行各业的日益渗透，催生出了数据统计及展示的需求。由于浏览器使用便捷、即开即用，使用web技术结合gis统计和展示数据，成为主流的选择。
3.目前，网页端gis库均提供了web api，但存在两个主要问题：api粒度较细，若遇到复杂业务场景，代码量大、不易维护，管理地图实例和地图变量时，过度依赖前端框架，复用性差，导致影响网页端gis项目的开发、迁移、升级和交付，导致网页端gis开发效率低以及复用性差。


技术实现要素：

4.本技术实施例提供一种网页端gis开发方法、设备及介质，用于解决网页端gis开发效率低以及复用性差的问题。
5.本技术实施例采用下述技术方案：
6.一方面，本技术实施例提供了一种网页端gis开发方法，该方法包括：通过网页端视图层，获取终端设备对指定业务场景的调用请求；根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到；根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
7.一个示例中，所述根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑之前，所述方法还包括：若网页端gis为2d gis框架或3d gis框架，则构建对应的逻辑层；在所述逻辑层中，通过es6 class，对所述数据统计地图的创建方法进行声明；将所述数据统计地图保存至所述逻辑层的实例内部，并在所述实例内部，构建所述数据统计地图的创建方法；对所述数据统计地图的绘制标记的方法进行声明，将所述数据统计地图的绘制标记变量保存至所述实例内部，以构建es6 class方法；对所述es6 class方法进行封装，得到所述gis业务逻辑方法。
8.一个示例中，在所述es6 class中，将所述绘制标记变量作为所述es6 class的属性，管理所述绘制标记变量；所述绘制标记变量包括点图层、线图层、面图层中的至少一种；根据预设业务需求，将绘制或删除所述绘制标记变量的业务逻辑，封装成对应的业务方法。
9.一个示例中，所述方法还包括：若所述业务需求为绘制多个不同功能类型的图层区域，且能控制所述图层区域；则根据所述业务需求，确定绘制或删除所述绘制标记变量的业务逻辑，以使能够同时显示或隐藏任意一个或多个图层区域；将所述业务逻辑封装成对应的业务方法。
10.一个示例中，所述根据所述gis业务逻辑，在所述视图层展示所述指定业务场景对应的数据统计地图，具体包括：在所述逻辑层中，根据所述gis业务逻辑，对所述数据统计地
图进行初始化；根据所述gis业务逻辑，对初始化的数据统计地图进行绘制，在所述视图层展示所述指定业务场景对应的数据统计地图。
11.一个示例中，所述根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑之前，所述方法还包括：若网页端gis为流渲染gis框架，则将回调风格api封装为promise风格api；根据promise风格api，对所述逻辑层中的es6 class方法进行封装；根据封装的es6 class方法，得到所述gis业务逻辑。
12.一个示例中，所述方法还包括：在所述es6 class中，对数据统计地图事件进行注册；在所述es6 class中，对实现所述数据统计地图事件的回调方法进行声明；通过es6 class的属性，存储所述数据统计地图事件的变量。
13.一个示例中，所述方法还包括：基于所述数据统计地图事件的变量，判断是否监听到所述数据统计地图事件；若是，则调用所述实现所述数据统计地图事件的回调方法；根据所述回调方法，对所述数据统计地图的图层进行处理。
14.另一方面，本技术实施例提供了一种网页端gis开发设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：通过网页端视图层，获取终端设备对指定业务场景的调用请求；根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到；根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
15.另一方面，本技术实施例提供了一种网页端gis开发非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：通过网页端视图层，获取终端设备对指定业务场景的调用请求；根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到；根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
16.本技术实施例采用的上述至少一个技术方案能够达到以下有益效果：
17.通过使用es6 class特性，将数据统计地图的gis业务逻辑与视图层切分，和前端框架解耦，复用性强，在业务场景多且复杂的情况下，通过逻辑层的gis业务逻辑，仍能快速完成网页端的gis开发，提高了网页端gis开发效率，通过es6 class管理地图实例、图层和变量，增强了代码可读性，使之易于维护。
附图说明
18.为了更清楚地说明本技术的技术方案，下面将结合附图来对本技术的部分实施例进行详细说明，附图中：
19.图1为本技术实施例提供的一种网页端gis开发方法的流程示意图；
20.图2为本技术实施例提供的一种网页端gis开发设备的结构示意图。
具体实施方式
21.为使本技术的目的、技术方案和优点更加清楚，下面将结合具体实施例及相应的附图对本技术的技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分
实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
22.下面参照附图来对本技术的一些实施例进行详细说明。
23.图1为本技术实施例提供的一种网页端gis开发方法的流程示意图。该方法可以应用于不同的业务领域，比如，互联网金融业务领域、电商业务领域、即时通讯业务领域、游戏业务领域、公务业务领域等。该流程中的某些输入参数或者中间结果允许人工干预调节，以帮助提高准确性。
24.本技术实施例涉及的分析方法的实现可以为终端设备，也可以为服务器，本技术对此不作特殊限制。为了方便理解和描述，以下实施例均以服务器为例进行详细描述。
25.需要说明的是，该服务器可以是单独的一台设备，可以是有多台设备组成的系统，即，分布式服务器，本技术对此不做具体限定。
26.基于此，图1中的流程可以包括以下步骤：
27.s101：通过网页端视图层，获取终端设备对指定业务场景的调用请求。
28.比如，指定业务场景为展示a地区的人口密度的数据统计地图。用户在终端设备的网页端视图层，点击人口密度的图标，向服务器调用人口密度的数据统计地图。
29.s102：根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到。
30.在本技术的一些实施例中，网页端的gis包括多种类型框架，比如，2d gis框架、3d gis框架以及流渲染gis框架。
31.基于此，不同的gis框架具有各自的api接口，那么在构建逻辑层时，逻辑层内部的方法，则根据不同的api接口，具有不同的逻辑内部方法。
32.具体地，针对于2d gis框架或3d gis框架，在构建逻辑层的方法时，首先构建对应的逻辑层。
33.在逻辑层中，通过es6 class，对数据统计地图的创建方法进行声明，将数据统计地图保存至逻辑层的实例内部，并在实例内部，构建数据统计地图的创建方法。
34.此外，对数据统计地图的绘制标记的方法进行声明，将数据统计地图的绘制标记变量保存至实例内部，以构建es6 class方法，并且对es6 class方法进行封装，得到gis业务逻辑方法。
35.进一步地，在实际开发中，由于需要管理大量点、线、面、图层，因此，点、线、面、图层所代表的变量，由es6 class统一管理，每个变量都是es6 class的一个属性。将绘制、删除不同点、线、面、图层的逻辑，按业务需求分别封装成具体的方法，尽可能保证视图层只需调用一个方法，就能完成一个业务需求。
36.基于此，在es6 class中，将绘制标记变量作为es6 class的属性，管理绘制标记变量。其中，绘制标记变量包括点图层、线图层、面图层中的至少一种。
37.然后，根据预设业务需求，将绘制或删除绘制标记变量的业务逻辑，封装成对应的业务方法。
38.一个例子中，若业务需求为绘制多个不同功能类型的图层区域，且能控制图层区域；则根据业务需求，确定绘制或删除绘制标记变量的业务逻辑，以使能够同时显示或隐藏任意一个或多个图层区域，将业务逻辑封装成对应的业务方法。
39.比如，需要绘制住宅区、商业区、工业区，且能灵活控制图层，则确定绘制或删除所述绘制标记变量的业务逻辑，将业务逻辑封装成对应的业务方法。从而使得可以同时显示或隐藏任意一个或多个图层。
40.针对于流渲染gis框架，由于只提供了回调风格api，而没有promise风格api，或者api封装程度较低，难以应对实际业务需求。
41.基于此，若网页端gis为流渲染gis框架，则将回调风格api封装为promise风格api。然后，根据promise风格api，对逻辑层中的es6 class方法进行封装，根据封装的es6 class方法，得到gis业务逻辑。比如，将流渲染的镜头变换api，转换成可供视图层方便调用的实例方法。
42.需要说明的是，逻辑层中的es6 class方法，参见2d gis框架、3d gis框架，构建逻辑层的es6 class方法的流程，在此不再进行描述。
43.需要说明的是，无论使用react、vue、其他前端框架，还是原生开发，都可以实现。
44.s103：根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
45.在本技术的一些实施例中，在将视图层与逻辑层进行解耦之后，能够基于es6 class特性，在逻辑层内完成对数据统计地图的初始化和绘制。
46.具体地，首先在逻辑层中，根据gis业务逻辑，对数据统计地图进行初始化。
47.然后，根据gis业务逻辑，对初始化的数据统计地图进行绘制，在视图层展示指定业务场景对应的数据统计地图。
48.比如，在s101-s103中，3d gis框架，涉及的执行代码举例如下：getmarkerposition为一个假想的数据请求方法。
49.//逻辑层
50.import l from'leaflet'
51.exportclassmapengine{
52.constructor(mapdom){
53.this.mapdom＝mapdom
54.this.map＝null
55.this.marker＝null
56.}
57.//创建数据统计地图的方法
58.init(){
59.const map＝l.map(this.mapdom,{})
60.this.map＝map//数据统计地图保存在实例内部，与视图层解耦
61.this.drawmarker()//方法调用在实例内部，与视图层解耦
62.}
63.//绘制标记的方法
64.drawmarker(){
65.constmarkerposition＝getmarkerposition()
66.const marker＝l.marker(markerposition).addto(this.map)
67.this.marker＝marker//数据统计地图中的点、线、面等变量保存在实例内部，与视图层解耦
68.}
69.}
70.//视图层
71.import{useeffect,useref,usestate}from'react'
72.import{mapengine}from'./mapengine'
73.functionmapcomponent(){
74.const mapref＝useref()
75.const[mapengine,setmapengine]＝usestate()
[0076]
useeffect(()＝》{
[0077]
const mapengine＝newmapengine(mapref.current)//通过新建实例初始化
[0078]
mapengine.drawmarker()//通过调用实例方法进行绘制
[0079]
},[])
[0080]
return(
[0081]
《divref＝{mapref}》《/div》
[0082]
)
[0083]
}
[0084]
在本技术的一些实施例中，在逻辑层中，通过es6 class管理数据统计地图的事件。
[0085]
具体地，在es6 class中，对数据统计地图事件进行注册，以及在es6 class中，对实现数据统计地图事件的回调方法进行声明，以及通过es6 class的属性，存储数据统计地图事件的变量。
[0086]
基于此，在运行时，基于数据统计地图事件的变量，判断是否监听到数据统计地图事件。
[0087]
若是，则调用实现数据统计地图事件的回调方法，根据回调方法，对数据统计地图的图层进行处理。
[0088]
比如，需要根据缩放等级，绘制不同图层，由近到远分别绘制网格、社区、街道。
[0089]
执行代码可以如下：
[0090][0091][0092]
需要说明的是，虽然本技术实施例是参照图1来对步骤s101至步骤s103依次进行介绍说明的，但这并不代表步骤s101至步骤s103必须按照严格的先后顺序执行。本技术实施例之所以按照图1中所示的顺序对步骤s101至步骤s103依次进行介绍说明，是为了方便本领域技术人员理解本技术实施例的技术方案。换句话说，在本技术实施例中，步骤s101至
步骤s103之间的先后顺序可以根据实际需要进行适当调整。
[0093]
通过图1的方法，通过使用es6 class特性，将数据统计地图的gis业务逻辑与视图层切分，和前端框架解耦，复用性强，在业务场景多且复杂的情况下，通过逻辑层的gis业务逻辑，仍能快速完成网页端的gis开发，提高了网页端gis开发效率，通过es6 class管理地图实例、图层和变量，增强了代码可读性，使之易于维护。
[0094]
基于同样的思路，本技术的一些实施例还提供了上述方法对应的设备和非易失性计算机存储介质。
[0095]
图2为本技术实施例提供的一种网页端gis开发设备的一种结构示意图，包括：
[0096]
至少一个处理器；以及，
[0097]
与所述至少一个处理器通信连接的存储器；其中，
[0098]
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
[0099]
通过网页端视图层，获取终端设备对指定业务场景的调用请求；
[0100]
根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到；
[0101]
根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
[0102]
本技术的一些实施例提供的一种网页端gis开发非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
[0103]
通过网页端视图层，获取终端设备对指定业务场景的调用请求；
[0104]
根据所述调用请求，向预设逻辑层调用所述指定业务场景对应的gis业务逻辑方法；其中，所述gis业务逻辑方法通过es6 class封装得到；
[0105]
根据所述gis业务逻辑方法，在所述视图层展示所述指定业务场景对应的数据统计地图。
[0106]
本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0107]
本技术实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。
[0108]
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0109]
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序
指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0110]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0111]
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0112]
在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
[0113]
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
[0114]
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
[0115]
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
[0116]
以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术技术原理之内所作的任何修改、等同替换、改进等，均应落入本技术的保护范围之内。