CN107038199B

CN107038199B - 一种绘图方法和装置

Info

Publication number: CN107038199B
Application number: CN201611148411.0A
Authority: CN
Inventors: 章伟星
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2016-12-13
Filing date: 2016-12-13
Publication date: 2020-06-09
Anticipated expiration: 2036-12-13
Also published as: CN107038199A

Abstract

本公开提供一种绘图方法和装置，其中方法包括：加载图表数据；判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；在判断结果为是时，则根据所述图变换属性对所述图表数据中的图采样点的坐标进行变换；在判断结果为否，或者在判断结果为是时的变换坐标后，根据图采样点的坐标计算边界框；根据所述边界框和画布的宽高计算度量；根据所述度量将所述图采样点的坐标转换为所述图采样点在画布显示的画布坐标；根据所述画布坐标绘制所述图表数据对应的图表。本公开简化了绘图过程，提高了绘图效率。

Description

一种绘图方法和装置

技术领域

本公开涉及计算机技术，特别涉及一种绘图方法和装置。

背景技术

在图表绘制中，其中一种类型的图可以称为插图，插图是对主图的补充，相当于主图所附的小图；插图的作用可以包括：与主图形成明显反差、或者避免对主图绘制的限制、或者放大显示主图的重要部分，等，插图还可以向阅读者提供更全面的资料，有助于理解和分析主图的内容。通常可以将插图显示在主图的附近。以地图的插图绘制为例，例如，一个国家的地图包含的领土分布较广，比如美国地图中包括独立的阿拉斯加领土，如果将阿拉斯加与其他领土部分以相同的比例尺绘制，将造成各块领土的主次区分不明显，效果较差，因此可以将阿拉斯加领土表示为地图插图的形式。

相关技术中，GeoJSON是一种基于Javascript对象表示法的地理空间信息数据交换格式，地图数据可以使用GeoJSON格式描述，在绘制地图(即由计算机程序自动根据地图数据渲染成显示的地图)时也是根据该GeoJSON格式数据绘制地图。然而，插图部分需要单独绘制，其数据描述格式可以与主图部分的数据格式不统一，例如不是GeoJSON格式，而是采用SVG绘制插图并获取插图的路径点；这样将导致绘制地图时需要对插图和主图部分区别处理，较为繁琐。

发明内容

有鉴于此，本公开提供一种绘图方法和装置，以在绘制包含插图的图表时，简化绘图过程，提高绘图效率。

具体地，本公开是通过如下技术方案实现的：

第一方面，提供一种绘图方法，所述方法用于根据图表数据进行绘图，所述图表数据以GeoJSON格式描述；所述方法包括：

加载所述图表数据；

判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；

在判断结果为是时，则根据所述图变换属性对所述图表数据中的图采样点的坐标进行变换；

在判断结果为否，或者在判断结果为是时的变换坐标后，根据图采样点的坐标计算边界框；

根据所述边界框和画布的宽高计算度量；

根据所述度量将所述图采样点的坐标转换为所述图采样点在画布显示的画布坐标；

根据所述画布坐标绘制所述图表数据对应的图表。

第二方面，提供一种绘图装置，所述装置包括：

数据加载模块，用于加载图表数据，所述图表数据以GeoJSON格式描述；

属性判断模块，用于判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；

坐标处理模块，用于在判断结果为是时，则根据所述图变换属性对所述图表数据中的图采样点的坐标进行变换；

边界处理模块，用于在判断结果为否，或者在判断结果为是时的变换坐标后，根据图采样点的坐标计算边界框；

度量计算模块，用于根据所述边界框和画布的宽高计算度量；

坐标转换模块，用于根据所述度量将所述图采样点的坐标转换为所述图采样点在画布显示的画布坐标；

图表绘制模块，用于根据所述画布坐标绘制所述图表数据对应的图表。

本公开的绘图方法和装置，通过在数据中增加图变换属性，使得将插图和主图的数据统一为相同的数据表示格式，从而根据该统一的数据格式对主图和插图采用统一的图表绘制流程，简化了绘图过程，提高了绘图效率。

附图说明

图1a是本公开实施例提供的一个地图显示的示意图；

图1b是本公开实施例提供的另一个地图显示的示意图；

图2是本公开实施例提供的一种根据图表数据绘图的流程示意图；

图3是本公开实施例提供的一种绘图装置的结构示意图。

具体实施方式

在图表绘制时，通常可以利用绘图程序自动化加载图表数据，并根据图表数据绘制得到对应的图表，显示在WEB页面上，所述的WEB页面可以是PC端或移动端的页面。其中一种类型的图表，可以是包含插图的图表。以图1a所示例的美国地图为例，美国地图包含领土的主体部分11以及独立的阿拉斯加领土部分12，如果将主体部分11和阿拉斯加领土部分12按照相同的比例尺进行绘制，将无法体现领土的主次区别，表达效果不好。

因此，通常可以按照图1b的示例，将美国的地图设计为“包含插图的图表”，即如果将全部的美国领土看作一个整体，那么其中一个部分的领土将作为“插图”显示。如图1b所示，将阿拉斯加领土部分12以插图显示后，将很明显区分出领土的主次部分，可视化表达效果较好。

插图是主图的补充，比如，在美国地图的例子中，主体部分11相当于主图，阿拉斯加领土部分12则为插图，相当于主图所附的小图，插图可以与主图采用不同的比例尺绘制。包含插图的图表不一定是上述图1a和图1b所示例的地图，也可以是其他类型的图表。对于这种类型的图表，如果在绘制时，对主图和插图分别采用不同的处理和绘制方式，将降低绘图的效率。本公开实施例提供一种绘图方法，目的是在绘制包含插图的图表时，简化绘图过程，并且不论是主图和插图，该方法给出了一个统一的绘制流程。

首先，在描述绘图方法之前，对绘制所依据的图表数据的格式进行说明：

GeoJSON：GeoJSON是一种对地理数据结构进行编码的格式，它是一个采用JSON格式的用于描述地理信息的格式，它的语法和JSON一样，只是对各名称做了规范。

如下示例一种以GeoJSON表示的图表数据，该例子中，是以地图中的某个区域例如中国地图中的新疆的数据为例：

结合上述的GeoJSON格式数据为例，新疆的数据整体可以称为一个GeoJSON对象。该GeoJSON对象中可以包括很多特征，这些特征可以用于限定“新疆”这个区域在地图上表示时各个方面的属性，例如，地图中的新疆区域的几何特征geometry可以包括：其几何形状为多边形Polygon，位于该多边形边框上的几个主要点可以称为图采样点，可以包括“96.416,42.7588”、“96.2402,42.2314”等图采样点的经纬度坐标。

此外，GeoJSON对象中的特征都可以采用名/值对的形式表示，其中，“名”可以是字符串，对应的“值”可以是字符串、数字、数组等；例如，““id”：“65””这个名值对中，名是字符串id，值则为数字65。此外，值还可以是"true"、"false"和"null"这些文本常量中的一个。

本公开实施例中，不论主图和插图，都统一为GeoJSON格式，并且，后续描述的绘图方法也是根据该GeoJSON格式的图表数据执行的统一流程。对于插图的GeoJSON格式表示，可以按照如下方法：通常对于插图的绘制，其实就是将原始的插图区域进行图表转换操作，所述的图表转换操作例如可以包括缩放和平移的操作。例如，仍以美国地图为例，可以将图1a中的阿拉斯加领土区域进行缩小和移动，则成为图1b中所示的样子，需要注意的是，在地图插图的绘制中，尽管要对图表进行缩放平移操作，但是图的基本形状保持不变，相当于只是改变了图的大小和位置。

基于上述，本例子可以在插图对应的图表数据中，增加一个用于限定如何对图表进行图表转换操作的属性，可以称为图变换属性，这样绘图时就可以根据该图变换属性对图进行缩放和平移等操作。仍以新疆区域为例，假设要将新疆在地图上显示为插图，那么可以在上面的GeoJSON对象表示的新疆数据中增加图变换属性，如下：

如上，图变换属性可以用transform表示，其中列举了两个可以包括的特征，一个是缩放特征scale，另一个是平移特征translate。其中，缩放特征用于限定如何对图表进行缩放，例如，0.5表示对图进行缩小；平移特征用于限定如何对图表进行平移，例如，12表示要将图采样点的X坐标加上12。图变换属性中的每一个特征都可以采用名值对的形式表示，例如，““scale”：0.5”中，scale是名，值是数字0.5；而““translate”：[12,34]”中，名是translate，值是数组[12,34]。本例子中，可以将缩放特征中的值称为缩放数值，将平移特征中的值称为平移数值。

本例子中，图表数据可以都采用GeoJSON格式描述，其中，对于插图来说，也是采用GeoJSON，只是在GeoJSON对象中增加了用于限定图表转换操作的图变换属性。如下结合图2，描述如何根据GeoJSON格式的图表数据进行绘图。

在步骤201中，加载图表数据。

例如，以绘制中国地图为例，并且假设将新疆区域以插图的形式显示，那么对于中国地图整体来说，这是一个包含插图的地图的绘制。本步骤中，加载的图表数据，可以是主图部分的数据，或者也可以是插图部分的数据，即本例子中的包含插图的地图都以GeoJSON格式描述，不论主图和插图，都可以按照该图2的流程执行绘制。

在步骤202中，判断所述图表数据中是否包括图变换属性。

例如，假设图变换属性以transform表示，那么本步骤将判断本次加载的图表数据中是否包含transform。如果是主图部分的数据，则判断结果为不包括图变换属性，则可以直接执行步骤204；如果是插图部分的数据，则判断结果为包括图变换属性，则可以执行步骤203。

在步骤203中，根据所述图变换属性，对所述图表数据中的图采样点的坐标进行变换。

如上所述，图变换属性用于限定图表的转换操作，仍以新疆的GeoJSON数据为例，““scale”：0.5”用于表示将图缩小一半，““translate”：[12,34]”表示要将图在X正向移动12，Y正向移动34，这些转换操作其实需要对“coordinates”中的各个图采样点的经纬度坐标进行变换。

比如，以“coordinates”中的[96.416,42.7588]这个经纬度坐标点为例，可以首先进行缩放，将每个值乘以0.5，得到[48.208,21.3794]，然后可以再进行平移：[48.208+12,21.3794+34]，得到[60.208,55.3794]，即为最后的坐标点。其他的经纬度坐标点，可以按照上述同样的方法进行变换。

在具体实施中，可以先读取图变换属性中的scale和translate等特征值，再遍历“coordinates”中的各个经纬度坐标，并在遍历的过程中，根据上述特征值限定的缩放倍数和平移数值，对经纬度坐标进行转换，得到新的坐标值。

在对经纬度坐标进行转换计算后，可以继续执行步骤204，其中的步骤204至步骤207，是根据图表数据中的图采样点的坐标，绘制所述图表数据对应的图表的过程，这里所依据的坐标，可以是主图部分的“coordinates”中的各个经纬度坐标，或者是插图数据中根据图变换属性进行转换计算后的新坐标。

在步骤204中，计算边界框。

例如，以新疆地图部分的绘制为例，可以根据“geometry”中的边框类型Polygon，确定这是一个多边形，则可以根据“coordinates”中的多个图采样点的经纬度坐标，将这些坐标点连接成一个多边形的边界框。

在步骤205中，根据边界框和画布的宽高计算度量。

在地图绘制时，需要将实际的地图尺寸转换为在画布上显示的尺寸，本步骤即是在计算这两种尺寸之间的转换关系。

在步骤206中，将经纬度坐标点转换为图采样点在画布显示的画布坐标。

本步骤可以按照步骤205中的度量，将实际的经纬度坐标转换为画布坐标。

在步骤207中，绘制图表。

本步骤可以根据步骤206中得到的画布坐标，在画布上绘制地图。

本例子的绘图方法，通过在数据中增加图变换属性，使得将插图和主图的数据统一为相同的数据表示格式，从而根据该统一的数据格式对主图和插图采用统一的图表绘制流程，简化了绘图过程，提高了绘图效率。

此外，本例子所列举的transform、scale、translate等名，具体实施中可以变更，不限制于此，所涉及的图变换操作也可以是其他操作。另外，在其他例子中，还可以是预先将插图的经纬度坐标按照图变换属性进行缩放和平移等转换计算后，直接将转换后的新坐标设置为“coordinates”中的各个图采样点的经纬度坐标，这样在绘制时可以不用再判断图变换属性，直接加载数据后执行边界框的计算。

为了实现上述的绘图方法，本公开的例子中还提供了一种绘图装置，如图3所示，该装置可以包括：数据加载模块31、属性判断模块32、坐标处理模块33、边界处理模块34、度量计算模块35、坐标转换模块36和图表绘制模块37。

数据加载模块31，用于加载图表数据，所述图表数据以GeoJSON格式描述；

属性判断模块32，用于判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；

坐标处理模块33，用于在判断结果为是时，则根据所述图变换属性对所述图表数据中的图采样点的坐标进行变换；

边界处理模块34，用于在判断结果为否，或者在判断结果为是时的变换坐标后，根据图采样点的坐标计算边界框；

度量计算模块35，用于根据所述边界框和画布的宽高计算度量；

坐标转换模块36，用于根据所述度量将所述图采样点的坐标转换为所述图采样点在画布显示的画布坐标；

图表绘制模块37，用于根据所述画布坐标绘制所述图表数据对应的图表。

在一个例子中，所述图表数据包括：地图数据；所述图表数据中的图采样点的坐标为经纬度坐标。

在一个例子中，所述图变换属性，包括如下至少一种：

用于限定对图表进行缩放的缩放特征；

或者，用于限定对图表进行平移的平移特征。

在一个例子中，坐标处理模块33，具体用于根据所述缩放特征限定的缩放数值，对所述图采样点的坐标进行缩放，或者，根据所述平移特征限定的平移数值，对所述坐标进行平移。

在一个例子中，所述图表数据对应的图表，用于显示在WEB页面。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本公开时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

以上所述仅为本公开的较佳实施例而已，并不用以限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开保护的范围之内。

Claims

1.一种绘图方法，其特征在于，所述方法用于根据图表数据进行绘图，所述图表数据以GeoJSON格式描述，所述图表数据包括主图数据或插图数据；所述方法包括：

加载所述图表数据；

判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；所述图变换属性包括在插图数据中；所述插图数据以GeoJSON格式包括在所述图表数据中；

根据所述边界框和画布的宽高计算度量；

根据所述画布坐标绘制所述图表数据对应的图表。

2.根据权利要求1所述的方法，其特征在于，所述图表数据包括：地图数据；所述图表数据中的图采样点的坐标为经纬度坐标。

3.根据权利要求1所述的方法，其特征在于，所述图变换属性，包括如下至少一种：

用于限定对图表进行缩放的缩放特征；

或者，用于限定对图表进行平移的平移特征。

4.根据权利要求3所述的方法，其特征在于，所述根据所述图变换属性对所述图表数据中的图采样点的坐标进行变换，包括：

根据所述缩放特征限定的缩放数值，对所述图采样点的坐标进行缩放；

或者，根据所述平移特征限定的平移数值，对所述坐标进行平移。

5.根据权利要求1所述的方法，其特征在于，所述图表数据对应的图表，用于显示在WEB页面。

6.一种绘图装置，其特征在于，所述装置包括：

数据加载模块，用于加载图表数据，所述图表数据以GeoJSON格式描述，所述图表数据包括主图数据或插图数据；

属性判断模块，用于判断所述图表数据中是否包括图变换属性，所述图变换属性用于限定对图表进行的转换操作；所述图变换属性包括在插图数据中；所述插图数据以GeoJSON格式包括在所述图表数据中；

7.根据权利要求6所述的装置，其特征在于，所述图表数据包括：地图数据；所述图表数据中的图采样点的坐标为经纬度坐标。

8.根据权利要求6所述的装置，其特征在于，所述图变换属性，包括如下至少一种：

用于限定对图表进行缩放的缩放特征；

或者，用于限定对图表进行平移的平移特征。

9.根据权利要求8所述的装置，其特征在于，

所述坐标处理模块，具体用于根据所述缩放特征限定的缩放数值，对所述图采样点的坐标进行缩放，或者，根据所述平移特征限定的平移数值，对所述坐标进行平移。

10.根据权利要求6所述的装置，其特征在于，所述图表数据对应的图表，用于显示在WEB页面。