CN116824104A - 一种标绘图形绘制方法、终端设备及存储介质 - Google Patents
一种标绘图形绘制方法、终端设备及存储介质 Download PDFInfo
- Publication number
- CN116824104A CN116824104A CN202310654691.6A CN202310654691A CN116824104A CN 116824104 A CN116824104 A CN 116824104A CN 202310654691 A CN202310654691 A CN 202310654691A CN 116824104 A CN116824104 A CN 116824104A
- Authority
- CN
- China
- Prior art keywords
- graph
- plot
- data
- plotting
- map
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000009877 rendering Methods 0.000 claims abstract description 13
- 238000004422 calculation algorithm Methods 0.000 claims abstract description 8
- 238000004590 computer program Methods 0.000 claims description 19
- 230000007547 defect Effects 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 14
- 229910052792 caesium Inorganic materials 0.000 description 3
- TVFDJXOCXUVLDH-UHFFFAOYSA-N caesium atom Chemical compound [Cs] TVFDJXOCXUVLDH-UHFFFAOYSA-N 0.000 description 3
- 101100182247 Caenorhabditis elegans lat-1 gene Proteins 0.000 description 2
- 101150061388 LON1 gene Proteins 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 238000000547 structure data Methods 0.000 description 2
- 101100182248 Caenorhabditis elegans lat-2 gene Proteins 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000000470 constituent Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000008571 general function Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 101150004293 lon2 gene Proteins 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating 3D models or images for computer graphics
- G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
- G06T17/05—Geographic models
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
- G06T17/30—Polynomial surface description
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Geometry (AREA)
- Computer Hardware Design (AREA)
- Architecture (AREA)
- Remote Sensing (AREA)
- Algebra (AREA)
- Mathematical Analysis (AREA)
- Mathematical Optimization (AREA)
- Mathematical Physics (AREA)
- Pure & Applied Mathematics (AREA)
- Human Computer Interaction (AREA)
- Image Generation (AREA)
Abstract
本发明涉及一种标绘图形绘制方法、终端设备及存储介质，该方法中包括：选择待加载至地图的标绘图形；将标绘图形拆分为多个最小基本图元；在地图上选取多个坐标点，将该坐标点及图形类型作为输入参数，基于输入参数和各最小基本图元对应的图形生成算法生成各最小基本图元对应的图形数据；图形数据包括各个最小基本图元的坐标数据；将组成该标绘图形的所有最小基本图元数据填充至标绘图形绘图数据的数据结构内，得到该标绘图形的绘图数据；基于标绘图形的绘图数据，通过地图框架容器对标绘图形进行渲染绘制。本发明将标绘图形的生成与渲染及鼠标操作相分离，可运用到各种地图框架中，克服了现有技术只能运用到某一个具体地图中的缺陷。
Description
技术领域
本发明涉及地图绘制领域，尤其涉及一种标绘图形绘制方法、终端设备及存储介质。
背景技术
现有的地图绘制中往往需要将标绘图形加载到特定的地图中，比如使用OpenLayers进行地图绘制。标绘图形分单点图形和多点图形，单点图形仅需加载一个图标，选择具体某个坐标，直接将该图形在地图上渲染出来；而多点图标则需要鼠标在地图上点击多次，根据不同标绘种类绘制出特定的图形。目前常用的地图种类多样性，限定了标绘使用场景，给用户带来较大的不便。
发明内容
为了解决上述问题，本发明提出了一种标绘图形绘制方法、终端设备及存储介质。
具体方案如下：
一种标绘图形绘制方法，包括以下步骤：
S1：选择待加载至地图的标绘图形；
S2：将标绘图形拆分为多个最小基本图元；
S3：在地图上选取多个坐标点，将该坐标点及标绘图形拆分后的所有最小基本图元的图形类型作为输入参数，基于输入参数和各最小基本图元对应的图形生成算法生成各最小基本图元对应的图形数据；图形数据包括各个最小基本图元的坐标数据；
S4：将组成该标绘图形的所有最小基本图元对应的图形数据填充至标绘图形绘图数据的数据结构内，得到该标绘图形的绘图数据；
S5：基于标绘图形的绘图数据，通过地图框架容器对标绘图形进行渲染绘制。
进一步的，标绘图形为只具有一个输入坐标点的单点标绘图形或具有多个输入坐标点的多点标绘图形。
进一步的，图形数据中的坐标数据以经纬度为坐标单位。
进一步的，输入参数的字段名包括图形类型字段plotType和输入坐标点字段positions。
进一步的，输入坐标点字段positions采用数组方式存储，数组中每个元素对应一个坐标点，每个元素的值由其经度值和纬度值组成。
进一步的，标绘图形绘图数据的数据结构包括GeoJSON和TopoJSON。
一种标绘图形绘制终端设备，包括处理器、存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本发明实施例上述的方法的步骤。
一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例上述的方法的步骤。
本发明采用如上技术方案，将标绘图形的生成与渲染及鼠标操作相分离，可方便运用到各种WebGIS的地图框架中，克服了现有技术只能运用到某一个具体地图中的缺陷。
附图说明
图1所示为本发明实施例一的流程图。
具体实施方式
为进一步说明各实施例，本发明提供有附图。这些附图为本发明揭露内容的一部分，其主要用以说明实施例，并可配合说明书的相关描述来解释实施例的运作原理。配合参考这些内容，本领域普通技术人员应能理解其他可能的实施方式以及本发明的优点。
现结合附图和具体实施方式对本发明进一步说明。
实施例一：
本发明实施提供了一种标绘图形绘制方法。
如图1所示，所述方法包括以下步骤：
S1：选择待加载至地图的标绘图形。
标绘图形分为单点标绘图形及多点标绘图形；单点标绘指只有一个输入坐标点的标绘，通常包含各种有实际意义的图片、文本标注等；多点标绘指通过多个输入坐标点生成的特定标绘图形，对不同多点标绘图形来说，它的输入点可能是固定的，也有可能不定(比如圆形有且只有两点，一条线段则至少有两点，具体不确定)；本实施例方法涉及标绘图形的绘制方法，主要针对多点标绘图形。
S2：将标绘图形拆分为多个最小基本图元。
最小基本图元的图形类型包括点、圆形、三角形、直线、曲线、正方形、长方形、椭圆、梯形或者各种不规则图形等。最小基本图元是组成各种标绘图形的基础，通过基本图元的拼接可生成各种不同的标绘图形。图形的生成都是按照一定的规则的，比如两点生成一个矩形，起始点startPoint为矩形的一个顶点，结束点endPoint为起始点startPoint对角线上的另一顶点，两点不能生成一个固定不变的矩形，但若指定规则其它另两个顶点的纬度或经度跟前两个顶点一致(即矩形4条边两两跟经纬线平行)，则能够生成一固定矩形。其它基本图形也是如此，不过规则不是固定不变的，最终由选择的标绘图形的类型决定。拆成最小图元不仅可以在不同的标绘图形中复用，提升开发效率，也符合GeoJSON结构类型存储数据的要求，每个基础图形可填充到GeoJSON数据中对应的点线面字段属性中。
S3：在地图上选取多个坐标点，将该坐标点及标绘图形拆分后的所有最小基本图元的图形类型作为输入参数，基于输入参数和各最小基本图元对应的图形生成算法生成各最小基本图元对应的图形数据；图形数据包括各个最小基本图元的坐标数据。
地图上选中的坐标点可以通过鼠标点击地图选取。不同地图框架获取坐标点的方法不一样，本实施例中不限定地图框架，只需将获取的坐标点传入标绘生成函数generatePlot即可。坐标点采用数组方式存储，即[[lon1,lat1],[lon2,lat2],...]，其中lon1表示数组中第一个元素的经度值，lat1表示数组中第一个元素的纬度值，以此类推。本实施例中设定的输入参数具体内容如下：
输入参数字段名：
plotType：字符串，图形类型；
positions：数组，输入坐标点；
options：可选配参数，如箭头角度，刻度长度等等，视不同类型的标绘图形而定。
generatePlot方法为生成标绘图形的通用函数，根据plotType再调用具体类型的图形计算函数，如generateRectangle，generateRectangle调用基本图元生成函数rectangle，最终生成点线面数据。
不同最小基本图元对应不同的图形算法，图形算法生成的图形数据以经纬度为坐标单位，数据类型包含点(Point)、线条(LineString)、多边形(Polygon)等。
S4：将组成该标绘图形的所有最小基本图元对应的图形数据填充至标绘图形绘图数据的数据结构内，得到该标绘图形的绘图数据。
所有最小基本图元组装可以得到目标标绘图形，比如，一个标绘图形由一个圆圈加一条波浪曲线组成。根据最小基本图元的图形数据类型，将该图形数据填充至GeoJSON数据结构的对应位置处，比如图形数据是点类型，应该将该数据填充到Point位置处，由此构造出绘制标绘图形所需要的绘图数据。下面为填充后的GeoJSON数据结构，填充数据类型type有3种，分别为：点型Point、线串型LineString、多边形Polygon，如下所示。
S5：基于标绘图形的绘图数据，通过地图框架对标绘图形进行渲染绘制。
由于GeoJSON是GIS中通用的数据结构，基本上不同地图框架均可以加载GeoJSON结构数据对标绘图形进行渲染绘制。
本实施例中通过标绘渲染函数renderPlot对绘图数据进行渲染，由于生成的图形可能需要各种样式效果或者需要添加文本，所以渲染函数renderPlot中包含了各个属性字段对图形进行修饰，具体属性字段的内容如下。
id：图形唯一id；
name：字符串，图形名称；
font：字符串，图形名称字符样式，同css样式；
fontSize：字符串大小；
fontColor：字符串颜色；
fill：布尔类型，是否显示图形填充面；
color：图形颜色；
outline：布尔类型，是否显示图形边框；
outlineColor：图形边框颜色；
outlineWidth：图形边框大小；
callback：渲染回调函数，由于不限地图框架，因此提供该回调函数给各地图框架调用自身的渲染函数，以对标绘图形进行最终的渲染。
本发明实施例将标绘图形的生成与渲染及鼠标操作相分离，可方便运用到各种WebGIS的地图框架中，克服了现有技术只能运用到某一个具体地图(如OpenLayers)中的缺陷。实际应用中，地图鼠标操作提供输入参数，通过前面步骤最终生成GeoJSON结构的标绘图形数据，至于地图鼠标如何操作，标绘图形如何渲染完全由地图框架的类型决定，因此可以广泛应用到不同地图框架中，实现了一个标绘库多个地图共用的便利性。
以Cesium为例，鼠标操作采用ScreenSpaceEventHandler方法注册鼠标事件，通过回调函数获取输入参数positions经纬度坐标。传入输入参数positions、图形类型plotType，由标绘图形生成函数createPlot生成图形的GeoJSON结构数据，createPlot函数包含各种标绘图形的生成算法。Cesium加载GeoJSON数据GeoJsonDataSource.load，再通过方法viewer.dataSources.add渲染出图形。如果需要修改图形属性，比如颜色，可以设置对应属性字段。
另外，虽然本实施例应用于WebGIS中，主要针对的是浏览器客户端，技术方案的实现过程都是用Javascript实现的，但用同样的理念也适用于客户端，采用本实施例方法术亦可以在不同客户端框架中使用，如QT、.net等。同时，生成数据格式是GeoJSON，但同样也可以采用TopoJSON数据格式，所以采用TopoJSON格式方案亦在本专利的保护范围内。
本实施例中通过首先定义各种标绘图形，每种标绘对应一种图形。标绘图形由点、线、面基础图形结构组合生成的，标绘时使用鼠标操作生成控制点，再根据标绘图形类别采用相关的图形生成算法，即可生成包含点、线、面各种基础图形结构的标绘图形。本实施例使用GeoJSON格式存储标绘图形数据，可以将该数据在不同的地图框架中渲染展示。
本实施例基于Web网页端技术实现，使用JavaScript或TypeScript开发语言，不限GIS地图引擎框架，如Cesium、OpenLayers等，使用GeoJSON作为数据存储格式，不需要依赖后台服务，开发、部署和应用非常简便。
实施例二：
本发明还提供一种标绘图形绘制终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本发明实施例一的上述方法实施例中的步骤。
进一步地，作为一个可执行方案，所述标绘图形绘制终端设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述标绘图形绘制终端设备可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，上述标绘图形绘制终端设备的组成结构仅仅是标绘图形绘制终端设备的示例，并不构成对标绘图形绘制终端设备的限定，可以包括比上述更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述标绘图形绘制终端设备还可以包括输入输出设备、网络接入设备、总线等，本发明实施例对此不做限定。
进一步地，作为一个可执行方案，所称处理器可以是中央处理单元(CentralProcessing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述标绘图形绘制终端设备的控制中心，利用各种接口和线路连接整个标绘图形绘制终端设备的各个部分。
所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述标绘图形绘制终端设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据手机的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现本发明实施例上述方法的步骤。
所述标绘图形绘制终端设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)以及软件分发介质等。
尽管结合优选实施方案具体展示和介绍了本发明，但所属领域的技术人员应该明白，在不脱离所附权利要求书所限定的本发明的精神和范围内，在形式上和细节上可以对本发明做出各种变化，均为本发明的保护范围。
Claims (8)
1.一种标绘图形绘制方法，其特征在于，包括以下步骤：
S1：选择待加载至地图的标绘图形；
S2：将标绘图形拆分为多个最小基本图元；
S3：在地图上选取多个坐标点，将该坐标点及标绘图形拆分后的所有最小基本图元的图形类型作为输入参数，基于输入参数和各最小基本图元对应的图形生成算法生成各最小基本图元对应的图形数据；图形数据包括各个最小基本图元的坐标数据；
S4：将组成该标绘图形的所有最小基本图元对应的图形数据填充至标绘图形绘图数据的数据结构内，得到该标绘图形的绘图数据；
S5：基于标绘图形的绘图数据，通过地图框架容器对标绘图形进行渲染绘制。
2.根据权利要求1所述的标绘图形绘制方法，其特征在于：标绘图形为只具有一个输入坐标点的单点标绘图形或具有多个输入坐标点的多点标绘图形。
3.根据权利要求1所述的标绘图形绘制方法，其特征在于：图形数据中的坐标数据以经纬度为坐标单位。
4.根据权利要求1所述的标绘图形绘制方法，其特征在于：输入参数的字段名包括图形类型字段plotType和输入坐标点字段positions。
5.根据权利要求4所述的标绘图形绘制方法，其特征在于：输入坐标点字段positions采用数组方式存储，数组中每个元素对应一个坐标点，每个元素的值由其经度值和纬度值组成。
6.根据权利要求1所述的标绘图形绘制方法，其特征在于：标绘图形绘图数据的数据结构包括GeoJSON和TopoJSON。
7.一种标绘图形绘制终端设备，其特征在于：包括处理器、存储器以及存储在所述存储器中并在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1～6中任一所述方法的步骤。
8.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1～6中任一所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310654691.6A CN116824104A (zh) | 2023-06-05 | 2023-06-05 | 一种标绘图形绘制方法、终端设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310654691.6A CN116824104A (zh) | 2023-06-05 | 2023-06-05 | 一种标绘图形绘制方法、终端设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116824104A true CN116824104A (zh) | 2023-09-29 |
Family
ID=88128459
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310654691.6A Pending CN116824104A (zh) | 2023-06-05 | 2023-06-05 | 一种标绘图形绘制方法、终端设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116824104A (zh) |
-
2023
- 2023-06-05 CN CN202310654691.6A patent/CN116824104A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8446411B2 (en) | Adaptive image rendering and use of imposter | |
| US9275493B2 (en) | Rendering vector maps in a geographic information system | |
| US9342322B2 (en) | System and method for layering using tile-based renderers | |
| US7688317B2 (en) | Texture mapping 2-D text properties to 3-D text | |
| US11854143B2 (en) | Light probe generation method and apparatus, storage medium, and computer device | |
| US10403040B2 (en) | Vector graphics rendering techniques | |
| WO2023197762A1 (zh) | 图像渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品 | |
| US5986661A (en) | Graphics output system with bounded updating | |
| CN113538502A (zh) | 图片裁剪方法、装置、电子设备及存储介质 | |
| CN111324381B (zh) | 开发系统、方法、装置、计算机设备及存储介质 | |
| CN111260750B (zh) | openFL绘制矢量图形的处理方法、装置及电子设备 | |
| US9153193B2 (en) | Primitive rendering using a single primitive type | |
| US20100053205A1 (en) | Method, apparatus, and system for displaying graphics using html elements | |
| CN113419806B (zh) | 图像处理方法、装置、计算机设备和存储介质 | |
| CN116824104A (zh) | 一种标绘图形绘制方法、终端设备及存储介质 | |
| US20230065027A1 (en) | Gpu-based digital map tile generation method and system | |
| US20110122140A1 (en) | Drawing device and drawing method | |
| US20220366621A1 (en) | Systems for Generating Anti-Aliased Vector Objects | |
| US11348287B2 (en) | Rendering of graphic objects with pattern paint using a graphics processing unit | |
| CN114820853A (zh) | 矢量图形的处理方法、装置、计算机设备和存储介质 | |
| US11417058B2 (en) | Anti-aliasing two-dimensional vector graphics using a multi-vertex buffer | |
| US20230368454A1 (en) | Graphics Processing Unit Instancing Control | |
| CN117115382B (zh) | 地图道路绘制方法、装置、计算机设备和存储介质 | |
| US11869123B2 (en) | Anti-aliasing two-dimensional vector graphics using a compressed vertex buffer | |
| Newmarch et al. | Basic OpenVG on the Raspberry Pi |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |