CN115390803A - 一种基于mapbox-gl的图形绘制方法及相关设备 - Google Patents

Abstract

本发明公开了一种基于mapbox‑gl的图形绘制方法及相关设备，所述方法包括：创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；使用mapbox‑gl的addSource添加资源，并使用mapbox‑gl的addLayer显示到地图。本发明通过基于mapbox‑gl来完成图形的绘制，使用mapbox‑gl的addSource将资源传入canvas得到的图片地址，使用addLayer将备用的资源添加到地图中并显示出来。

Description

一种基于mapbox-gl的图形绘制方法及相关设备

技术领域

本发明涉及地图绘制技术领域，尤其涉及一种基于mapbox-gl的图形绘制方法、系统、终端及计算机可读存储介质。

背景技术

在项目中使用mapbox-gl.js(mapbox-gl.js是一个为Web GIS提供客户端JavaScript库，利用Mapbox-gl可以在web上展现二三维地图，简称mapbox-gl)添加气体泄漏模型(用主观意识借助实体或者虚拟表现来模拟气体泄漏某一个状态的形式，本发明使用色斑图来表现这个形式)时，如果是图1类型的扩散类型的话还好，可以使用turf(是一个JavaScript的模块化的GIS引擎，它执行地理空间与GeoJSON数据处理任务，可以在服务器或在浏览器上运行)来画圆，再将得到的GeoJSON(是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Object Notation，简称JSON)的地理空间信息数据交换格式，GeoJSON对象可以表示几何、特征或者特征集合，GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合，GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征)画上去，但是如果是类似图2类型的扩散(简称水滴型扩散)后的话就比较难，首先是得到这个GeoJSON比较难，该图形是由一个二次贝塞尔曲线加上一个半椭圆再加上一个二次贝塞尔曲线组成，使用现有的库(例如，JavaScript库：即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解：就是一个JS文件，里面对原生js代码进行了封装，存放到里面，这样可以快速高效的使用这些封装好的功能了，比如turf.js，就是可以快速方便的绘制一些图形，得到相应的geojson的库)，画出二次贝塞尔曲线都是比较难的，并不能直接调用一个方法就能得到，其次扩散还受风向的影响，这就给得到这个geojson难上加难了。

因此，现有技术还有待于改进和发展。

发明内容

本发明的主要目的在于提供一种基于mapbox-gl的图形绘制方法、系统、终端及计算机可读存储介质，旨在解决现有技术中将扩散图形叠加到地图上时操作不便的问题。

为实现上述目的，本发明提供一种基于mapbox-gl的图形绘制方法，所述基于mapbox-gl的图形绘制方法包括如下步骤：

创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，调用canvas上下文的quadraticCurveTo绘制贝塞尔曲线。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，调用ellipse绘制半椭圆。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，调用quadraticCurveTo结束绘制。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，使用mapbox-gl的addSource将资源传入canvas得到的图片地址。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，addSource用于将图片和边界框作为参数传入成为一个资源备用。

可选地，所述的基于mapbox-gl的图形绘制方法，其中，addLayer用于将备用的资源添加到地图中并显示出来。

此外，为实现上述目的，本发明还提供一种基于mapbox-gl的图形绘制系统，其中，所述基于mapbox-gl的图形绘制系统包括：

参数获取模块，用于创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

图形绘制模块，用于根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

图形处理模块，用于将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

地图显示模块，用于使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

此外，为实现上述目的，本发明还提供一种终端，其中，所述终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于mapbox-gl的图形绘制程序，所述基于mapbox-gl的图形绘制程序被所述处理器执行时实现如上所述的基于mapbox-gl的图形绘制方法的步骤。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有基于mapbox-gl的图形绘制程序，所述基于mapbox-gl的图形绘制程序被处理器执行时实现如上所述的基于mapbox-gl的图形绘制方法的步骤。

本发明中，创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。本发明通过基于mapbox-gl来完成图形的绘制，使用mapbox-gl的addSource将资源传入canvas得到的图片地址，使用addLayer将备用的资源添加到地图中并显示出来。

附图说明

图1是圆形范围型的扩散示意图；

图2是水滴型的扩散示意图；

图3是本发明基于mapbox-gl的图形绘制方法的较佳实施例的流程图；

图4是本发明基于mapbox-gl的图形绘制方法的较佳实施例中水滴型的示意图；

图5是本发明基于mapbox-gl的图形绘制方法的较佳实施例中使用canvas画出水滴型扩散图形的示意图；

图6是本发明基于mapbox-gl的图形绘制方法的较佳实施例中往东南方向的水滴型扩散图形的示意图；

图7是本发明基于mapbox-gl的图形绘制方法的较佳实施例中水滴型扩散图形叠加到地图的示意图；

图8是本发明基于mapbox-gl的图形绘制方法的较佳实施例中整个执行过程的流程图；

图9是本发明基于mapbox-gl的图形绘制系统的较佳实施例的原理示意图；

图10为本发明终端的较佳实施例的运行环境示意图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明较佳实施例所述的基于mapbox-gl的图形绘制方法，如图3所示，所述基于mapbox-gl的图形绘制方法包括以下步骤：

步骤S10、创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

步骤S20、根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

步骤S30、将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

步骤S40、使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

具体地，mapbox-gl.js是一个为Web GIS提供客户端JavaScript库，利用Mapbox-gl可以在web上展现二三维地图。turf是一个JavaScript的模块化的GIS引擎，它执行地理空间与GeoJSON数据处理任务,可以在服务器或在浏览器上运行。GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。addSource是mapbox-gl的一个方法，可以将图片和边界框作为参数传入成为一个资源备用。addLayer是mapbox-gl的一个方法，可以将上述备用的资源添加到地图中并显示出来。

本发明基于mapbox和canvas，先用canvas画出图形，再将图片叠加到地图上，将常规的图形叠加到地图上也是比较常见的，但是图2类型的是比较少见，先将图4示意图使用canvas画出来，画的过程有几个要点，第一是水滴型的A点要在图形的中心，即使有很多空白处；第二是调用canvas上下文的quadraticCurveTo(quadraticCurveTo()是当前路径添加一条二次曲线的一种方法，quadraticCurveTo()方法为当前的子路径添加一条贝塞尔曲线，这条曲线从当前点开始，到(x，y)结束)来绘制二次贝塞尔曲线，调用ellipse(canvas中手动绘制椭圆的方法)来绘制半椭圆，再调用quadraticCurveTo来结束绘制；第三是水滴型的E点要在图片的边缘；这样就得到如图5一样的图像，如果有风向，就只要旋转一下，如图6一样；得到图形，剩下的问题就只有怎么把图形贴到地图上，泄露起点和范围都知道，使用turf的circle(turf中绘制圆形的方法)方法就能得到图7的圆，使用turf的bbox(Turf中获取一个图形要素的边界框。)方法能得到红色的框范围，最后使用mapbox的addSource，传入上面canvas得到的图片地址，再addLayer一下就能在地图上效果了。

进一步地，如图8所示，本发明的基于mapbox-gl的图形绘制方法整个过程如下：

(1)开始；

(2)创建一个canvas；

(3)将画笔移到canvas中心；

(4)根据参数绘制贝塞尔曲线；

(5)根据参数绘制半椭圆；

(6)再次绘制贝塞尔曲线完成图形的绘制；

(7)将完成绘制的图形导出为URL的形式；

(8)使用turf根据影响范围得到边界框；

(9)使用mapbox-gl的addSource添加资源；

(10)使用mapbox-gl的addLayer显示到地图。

(11)结束。

进一步地，如图9所示，基于上述基于mapbox-gl的图形绘制方法，本发明还相应提供了一种基于mapbox-gl的图形绘制系统，其中，所述基于mapbox-gl的图形绘制系统包括：

参数获取模块51，用于创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

图形绘制模块52，用于根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

图形处理模块53，用于将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

地图显示模块54，用于使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

进一步地，如图10所示，基于上述基于mapbox-gl的图形绘制方法和系统，本发明还相应提供了一种终端，所述终端包括处理器10、存储器20及显示器30。图10仅示出了终端的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

所述存储器20在一些实施例中可以是所述终端的内部存储单元，例如终端的硬盘或内存。所述存储器20在另一些实施例中也可以是所述终端的外部存储设备，例如所述终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器20还可以既包括所述终端的内部存储单元也包括外部存储设备。所述存储器20用于存储安装于所述终端的应用软件及各类数据，例如所述安装终端的程序代码等。所述存储器20还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器20上存储有基于mapbox-gl的图形绘制程序40，该基于mapbox-gl的图形绘制程序40可被处理器10所执行，从而实现本申请中基于mapbox-gl的图形绘制方法。

所述处理器10在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行所述存储器20中存储的程序代码或处理数据，例如执行所述基于mapbox-gl的图形绘制方法等。

所述显示器30在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。所述显示器30用于显示在所述终端的信息以及用于显示可视化的用户界面。所述终端的部件10-30通过系统总线相互通信。

在一实施例中，当处理器10执行所述存储器20中基于mapbox-gl的图形绘制程序40时实现以下步骤：

创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

其中，调用canvas上下文的quadraticCurveTo绘制贝塞尔曲线。

其中，调用ellipse绘制半椭圆。

其中，调用quadraticCurveTo结束绘制。

其中，使用mapbox-gl的addSource将资源传入canvas得到的图片地址。

其中，addSource用于将图片和边界框作为参数传入成为一个资源备用。

其中，addLayer用于将备用的资源添加到地图中并显示出来。

本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有基于mapbox-gl的图形绘制程序，所述基于mapbox-gl的图形绘制程序被处理器执行时实现如上所述的基于mapbox-gl的图形绘制方法的步骤。

综上所述，本发明提供一种基于mapbox-gl的图形绘制方法及相关设备，所述方法包括：创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。本发明通过基于mapbox-gl来完成图形的绘制，使用mapbox-gl的addSource将资源传入canvas得到的图片地址，使用addLayer将备用的资源添加到地图中并显示出来。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者终端中还存在另外的相同要素。

当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的程序可存储于一计算机可读取的计算机可读存储介质中，所述程序在执行时可包括如上述各方法实施例的流程。其中所述的计算机可读存储介质可为存储器、磁碟、光盘等。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (10)

1.一种基于mapbox-gl的图形绘制方法，其特征在于，所述基于mapbox-gl的图形绘制方法包括：

创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

2.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，调用canvas上下文的quadraticCurveTo绘制贝塞尔曲线。

3.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，调用ellipse绘制半椭圆。

4.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，调用quadraticCurveTo结束绘制。

5.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，使用mapbox-gl的addSource将资源传入canvas得到的图片地址。

6.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，addSource用于将图片和边界框作为参数传入成为一个资源备用。

7.根据权利要求1所述的基于mapbox-gl的图形绘制方法，其特征在于，addLayer用于将备用的资源添加到地图中并显示出来。

8.一种基于mapbox-gl的图形绘制系统，其特征在于，所述基于mapbox-gl的图形绘制系统包括：

参数获取模块，用于创建canvas，将画笔移到canvas中心，根据参数绘制贝塞尔曲线；

图形绘制模块，用于根据参数绘制半椭圆，再次绘制贝塞尔曲线完成图形的绘制；

图形处理模块，用于将完成绘制的图形导出为URL的形式，使用turf根据影响范围得到边界框；

地图显示模块，用于使用mapbox-gl的addSource添加资源，并使用mapbox-gl的addLayer显示到地图。

9.一种终端，其特征在于，所述终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于mapbox-gl的图形绘制程序，所述基于mapbox-gl的图形绘制程序被所述处理器执行时实现如权利要求1-7任一项所述的基于mapbox-gl的图形绘制方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有基于mapbox-gl的图形绘制程序，所述基于mapbox-gl的图形绘制程序被处理器执行时实现如权利要求1-7任一项所述的基于mapbox-gl的图形绘制方法的步骤。

Images