CN114722136B - 一种定制与展示网页文字地图交互的系统与方法 - Google Patents

Abstract

本发明公开一种定制与展示网页文字地图交互的系统与方法。系统包括定制模块、数据库模块与展示模块，用户通过定制模块来定制文本内容，设置文本内容中任意文字与地图操作的映射关系，数据库模块保存或读取定制信息，最后通过展示模块展示定制的文本内容，并实现定制的文本内容与地图的交互。通过本方案，用户可以根据自身需要，灵活定制文本内容中任意文字与地图要素的交互内容；系统可以根据用户定制内容自动生成展示页面，并实现定制的文本内容与地图的交互效果，填补了现有地图故事中文本内容与地图控件之间无法实现交互的空白。

Description

一种定制与展示网页文字地图交互的系统与方法

技术领域

本发明属于地理信息系统领域，具体涉及一种定制与展示网页文字地图交互的系统与方法。

背景技术

近年来，互联网与地理信息技术发展迅猛，极大丰富了地图的线上应用形式，衍生出了地图故事的概念与实践。此类应用可以将原本枯燥抽象的文字与地图上具体的元素相结合，使浏览者可以更加直观、生动地理解文字内容所要表达的含义。但不足之处在于，现有的这种结合方式还只是整体文本内容与地图之间的简单对应，尚未实现图文的深度融合与互动。

发明内容

本发明针对上述现有技术的不足，提供一种定制与展示网页文字地图交互的系统与方法。

具体包括：

一种定制网页文字地图交互的方法，其特征在于，基于编辑组件，所述编辑组件包括文本编辑器、地图控件和Map对象；

方法包括：

在文本编辑器内录入文本内容，选择文本内容中的任意文字，通过地图控件设置地图操作参数，为选中的任意文字添加超链接和ID属性，并创建键值对，键值对分别对应ID属性和地图操作参数，并将其插入到Map对象中；

用户通过系统保存文本内容和Map对象至服务器数据库中。

在上述的一种定制网页文字地图交互的方法，录入文本内容之前，系统初始化编辑组件。

在上述的一种定制网页文字地图交互的方法，还包括：系统调取已有地图故事，并通过编辑组件进行编辑操作后保存数据至服务器数据库中。

在上述的一种定制网页文字地图交互的方法，键值对包括Key值和Value值，Key值为ID属性值，Value值为Object对象，Object对象用于保存用户设置的地图操作参数。

在上述的一种定制网页文字地图交互的方法，定制完成后，用户选择保存定制文本内容构成的地图故事，系统将文本编辑器中的全部内容与Map对象转换为json字符串，并保存到服务器数据库中。

一种展示网页文字地图交互的方法，基于编辑组件，所述编辑组件包括文本编辑器、地图控件和Map对象,其特征在于，

系统从服务器数据库调取地图故事，包括文本内容、ID属性值与地图操作参数的映射关系；

监听用户鼠标点击文本编辑器内文字的事件，获取用户点击文字ID属性值，并调取与其对应的Map对象中的地图操作参数执行地图操作。

在上述的一种展示网页文字地图交互的方法，调取地图故事之前，系统初始化文本编辑器与地图控件；调取地图故事之后，根据读取到的ID属性值与地图操作参数的映射关系建立Map对象。

在上述的一种展示网页文字地图交互的方法，若获取的ID属性值为空或没有在Map对象中匹配到键值对，则不做任何反应；如果ID属性值在Map对象中匹配到键值对，则根据ID属性值获取到对应的value值，即地图操作参数；根据地图操作参数，系统自动执行地图操作，其中属性值与键值对中的key值相同即为匹配。

在上述的一种展示网页文字地图交互的方法，键值对包括Key值和Value值，Key值为ID属性值，Value值为Object对象，Object对象用于保存用户设置的地图操作参数。

一种用于所述定制与展示网页文字地图交互方法的系统，包括：

数据库模块，用于存储或读取定制内容，定制内容的数据形式为存储着定制内容信息的json格式字符串；

定制模块，用于定制文本内容、以及文本内容中选定文字与地图操作关系；通过数据库模块，定制模块将定制的内容以json字符串的形式保存至数据库，同时定制模块能够通过数据库模块从数据库中获取定制的内容并进行解析；

展示模块，用于展示定制好的文字地图交互的地图故事，具体是：通过数据库模块，展示模块从数据库提取定制的内容并进行解析，解析包括文本内容以及文本内容中选定文字与地图操作关系，根据解析结果，加载定制的文本内容，并监听用户点击事件；当用户点击文本内容时，根据解析结果匹配对应的地图操作信息，并根据地图操作信息自动执行操作。

本发明提出一种定制与展示网页文字地图交互的系统与方法。通过本方案，用户可以根据自身需要，灵活定制文本内容中任意文字与地图要素的交互内容；系统可以根据用户定制的内容自动生成展示页面，并实现文本内容与地图的交互效果，填补了现有地图故事中文本内容与地图控件之间无法实现交互的空白。

附图说明

为了更清楚地说明本发明实施例，下面对实施例描述中所需要的附图作简单的介绍。

图1为本发明实施例提供的一种定制与展示文字地图交互的地图故事系统模块架构图。

图2为本发明实施例提供的一种定制文字地图交互的地图故事方法的步骤流程图。

图3为本发明实施例提供的一种定制文字地图交互的地图故事系统的界面示意图。

图4为本发明实施例提供的一种展示文字地图交互的地图故事方法的步骤流程图。

图5为本发明实施例提供的一种展示文字地图交互的地图故事系统的界面示意图。

图6为本发明的编辑组件和系统的架构示意图。

具体实施方式

应该指出，以下详细说明都是示例性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。

需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本发明的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。

本实施例公开一种定制与展示文字地图交互的地图故事的系统，系统架构示意图如图1所示，包括：

数据库模块，用于存储或读取定制内容，定制内容的数据形式为存储着定制内容信息的json格式字符串；

定制模块，用于定制文本内容、以及文本内容中选定文字与地图操作的映射关系；通过数据库模块，定制模块将定制的内容以json字符串的形式保存至数据库，同时定制模能够通过数据库模块从数据库中获取定制的内容并进行解析；

展示模块，用于展示定制好的文字地图交互的地图故事，具体是：通过数据库模块，展示模块从数据库提取定制的内容并进行解析，解析包括文本内容以及文本内容中选定文字与地图操作的映射关系，根据解析结果，加载定制的文本内容，并监听用户点击事件；当用户点击文本内容时，根据解析结果匹配对应的地图操作信息，并根据地图操作信息自动执行操作。

参照图2所示，为本发明的定制文字地图交互的地图故事方法的实施例。该实施例中的定制文字地图交互的地图故事方法包括以下步骤：

步骤S101：系统初始化一个Map对象、一个文本编辑器控件、一个地图控件。Map对象用于记录用户选择文字与地图操作的映射关系；文本编辑器控件使用市面主流的CKEditor编辑器，用于以html语言格式保存用户录入的文本内容；地图控件使用现在流行的Cesium开源库。

步骤S102：用户根据需要选择新建地图故事或是打开已有地图故事，如果选择打开已有故事，系统从服务器数据库中读取相应数据，并将读取获得的文本内容添加到文本编辑器中，读取ID属性值与地图操作参数的映射关系建立键值对，插入到Map对象中。键值对的Key值为ID属性值，value值为Object对象，保存着地图操作参数，如果选择新建地图故事，系统不执行操作。系统界面图如3所示。

步骤S103：用户在文本编辑器内录入或修改文本内容。

步骤S104：用户根据需要选择文本内容中的任意文字，再设置地图操作参数。设置结束后，系统记录用户设置的地图操作参数，并为选中的任意文字添加超链接和ID属性。超链接属性值固定为“#”，表示超链接为空，使系统在系统展示端可以以超链接样式展示对应文字，并且点击不会跳转。ID属性值为随机生成的GUID（全局唯一标识符），使用GUID可以保证ID属性值唯一。

步骤S105：创建一个键值对，Key值为上一步骤生成的GUID值，Value值为Object对象，Object对象保存着上一步骤用户设置的地图操作参数，地图操作参数包括但不仅限于地图操作类型、地图二三维形态、天气效果类型、视点位置姿态数值、地图操作持续时间、地图元素（点、线、面、文字、图片等）尺寸位置样式等。创建成功后将键值对插入到步骤S101生成的Map对象中。

步骤S106：用户可以根据创作需求，重复步骤S103-S105，为文本内容的不同的文字设置各自对应的地图操作。

步骤S107：定制完成后，用户选择保存定制文本内容，系统将文本编辑器中的全部内容与Map对象转换为json字符串，并保存到服务器数据库中，json字符串格式如下：

{

editor_Text :文本内容（html格式字符串）,

event_Maps :[

{

id : id1(随机生成的GUID),

param : param1(用户选择的地图操作参数)，

},

{

id : id2(随机生成的GUID),

param : param2(用户选择的地图操作参数)，

},

……

]

}

参照图4所示，为本发明的展示文字地图交互的地图故事方法的实施例。该实施例中的展示文字地图交互的地图故事方法包括以下步骤：

步骤S201，系统初始化一个文本编辑器控件和一个地图控件，界面如图5所示。文本编辑器控件使用市面主流的CKEditor编辑器，并设置文本编辑器为只读状态，禁止用户编辑，地图控件使用现在流行的Cesium开源库。

步骤S202，用户选择要展示的地图故事，系统从服务器数据库中读取记录并进行解析，读取文本内容信息和ID属性值与地图操作参数的映射关系。

步骤S203，将读取获得的文本内容添加到文本编辑器中，根据ID属性值与地图操作参数的映射关系建立一个Map对象。

步骤S204，监听用户的鼠标点击文字事件，获取用户点击文字ID属性值。

步骤S205，如果上一步骤获取的ID属性值为空或没有在Map对象中匹配到键值对（属性值与键值对中的key值相同即为匹配），则不做任何反应；如果ID属性值在Map对象中匹配到键值对，则根据ID属性值获取到对应的value值，即地图操作参数。根据地图操作参数，系统自动执行地图操作，实现文本内容中选中的任意文字与地图的交互操作。

通过上述实施例中的系统与方法，本发明可以使用户能够灵活定制文本内容中任意文字与地图的交互内容。同时，系统可以根据用户定制的内容自动生成展示页面，并实现文本内容与地图的交互效果，弥补了现有地图故事中文本内容与地图控件无法实现交互的空白。

上述内容虽然结合附图对本发明的具体实施方式进行了描述，但并非是对本发明保护范围的限制。所属领域的技术人员应当明确，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (6)

1.一种定制网页文字地图交互的方法，其特征在于，基于编辑组件，所述编辑组件包括文本编辑器、地图控件和Map对象；方法包括

步骤S101：系统初始化一个Map对象、一个文本编辑器控件、一个地图控件；Map对象用于记录用户选择文字与地图操作的映射关系；文本编辑器控件使用市面主流的CKEditor编辑器，用于以html语言格式保存用户录入的文本内容；地图控件使用现在流行的Cesium开源库；

步骤S102：用户根据需要选择新建地图故事或是打开已有地图故事，如果选择打开已有故事，系统从服务器数据库中读取相应数据，并将读取获得的文本内容添加到文本编辑器中，读取ID属性值与地图操作参数的映射关系建立键值对，插入到Map对象中；键值对的Key值为ID属性值，value值为Object对象，保存着地图操作参数，如果选择新建地图故事，系统不执行操作；

步骤S103：用户在文本编辑器内录入或修改文本内容；

步骤S104：用户根据需要选择文本内容中的任意文字，再设置地图操作参数；设置结束后，系统记录用户设置的地图操作参数，并为选中的任意文字添加超链接和ID属性；超链接属性值固定为“#”，表示超链接为空，使系统在系统展示端可以以超链接样式展示对应文字，并且点击不会跳转；ID属性值为随机生成的全局唯一标识符GUID，使用GUID可以保证ID属性值唯一；

步骤S105：创建一个键值对，Key值为上一步骤生成的GUID值，Value值为Object对象，Object对象保存着上一步骤用户设置的地图操作参数，地图操作参数包括但不仅限于地图操作类型、地图二三维形态、天气效果类型、视点位置姿态数值、地图操作持续时间、地图元素尺寸位置样式；创建成功后将键值对插入到步骤S101生成的Map对象中；

步骤S106：用户可以根据创作需求，重复步骤S103-S105，为文本内容的不同的文字设置各自对应的地图操作；

步骤S107：定制完成后，用户选择保存定制文本内容，系统将文本编辑器中的全部内容与Map对象转换为json字符串，并保存到服务器数据库中。

2.一种与权利要求1所述方法适配的展示网页文字地图交互的方法，基于编辑组件，所述编辑组件包括文本编辑器、地图控件和Map对象，其特征在于，

系统从服务器数据库调取地图故事，包括文本内容、ID属性值与地图操作参数的映射关系；

监听用户鼠标点击文本编辑器内文字的事件，获取用户点击文字ID属性值，并调取与其对应的Map对象中的地图操作参数执行地图操作。

3.根据权利要求2所述的一种展示网页文字地图交互的方法，其特征在于，调取地图故事之前，系统初始化文本编辑器与地图控件；调取地图故事之后，根据读取到的ID属性值与地图操作参数的映射关系建立Map对象。

4.根据权利要求3所述的一种展示网页文字地图交互的方法，其特征在于，若获取的ID属性值为空或没有在Map对象中匹配到键值对，则不做任何反应；如果ID属性值在Map对象中匹配到键值对，则根据ID属性值获取到对应的value值，即地图操作参数；根据地图操作参数，系统自动执行地图操作，其中属性值与键值对中的key值相同即为匹配。

5.根据权利要求4所述的一种展示网页文字地图交互的方法，其特征在于，键值对包括Key值和Value值，Key值为ID属性值，Value值为Object对象，Object对象用于保存用户设置的地图操作参数。

6.一种用于所述定制与展示网页文字地图交互方法的系统，采用权利要求1至5任意一项所述的方法，其特征在于，包括：

数据库模块，用于存储或读取定制内容，定制内容的数据形式为存储着定制内容信息的json格式字符串；

定制模块，用于定制文本内容、以及文本内容中选定文字与地图操作关系；通过数据库模块，定制模块将定制的内容以json字符串的形式保存至数据库，同时定制模块能够通过数据库模块从数据库中获取定制的内容并进行解析；

展示模块，用于展示定制好的文字地图交互的地图故事，具体是：通过数据库模块，展示模块从数据库提取定制的内容并进行解析，解析包括文本内容以及文本内容中选定文字与地图操作关系，根据解析结果，加载定制的文本内容，并监听用户点击事件；当用户点击文本内容时，根据解析结果匹配对应的地图操作信息，并根据地图操作信息自动执行操作。

Images