CN109446295A - 一种svg数据地图编辑工具、编辑方法及计算机可读介质 - Google Patents
一种svg数据地图编辑工具、编辑方法及计算机可读介质 Download PDFInfo
- Publication number
- CN109446295A CN109446295A CN201811367800.1A CN201811367800A CN109446295A CN 109446295 A CN109446295 A CN 109446295A CN 201811367800 A CN201811367800 A CN 201811367800A CN 109446295 A CN109446295 A CN 109446295A
- Authority
- CN
- China
- Prior art keywords
- svg
- map
- file
- module
- edit
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 230000000007 visual effect Effects 0.000 claims abstract description 13
- 238000006243 chemical reaction Methods 0.000 claims description 11
- 230000008676 import Effects 0.000 claims description 3
- 238000010422 painting Methods 0.000 claims description 3
- 230000008901 benefit Effects 0.000 abstract description 3
- 230000008846 dynamic interplay Effects 0.000 abstract description 2
- 230000000694 effects Effects 0.000 description 5
- 238000013316 zoning Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 238000013439 planning Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
Landscapes
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种svg数据地图编辑工具、编辑方法及计算机可读介质，以svg地图为基础，通过svg数据地图编辑工具对地图相应的区域(市/区/县/乡镇)模块进行可视化编辑，添加相应的数据标签，重新封装地图数据接口，更加便捷地与后端进行数据显示、动态交互和数据穿透。本发明的一种svg数据地图编辑工具、编辑方法及计算机可读介质具有接口规范、样式统一、关联性强，汇总地图工作量小的优点。
Description
技术领域
本发明涉及一种svg数据地图编辑技术领域，尤其涉及一种接口规范、样式统一、关联性强，汇总地图工作量小的svg数据地图编辑工具及编辑方法。
背景技术
Svg(Scalable Vector Graphics，可缩放矢量图形)是基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。通过svg绘制的地图具有可动态交互性而备受追捧。然而，由于SVG地图技术由于比较新颖，所以当前市面上只有省市级地图，对于很多项目需要省/市/县/乡镇多级数据穿透的情况无法应对；同时由于各作者使用的接口不同，对后端数据的展示、显示效果的统一规划也造成很大影响。当存在多个区域项目时，每个数据地图都独立存在，汇总地图工作量较大。
因此，有必要提供一种新的svg数据地图编辑工具及编辑方法以克服现有技术的缺陷。
发明内容
本发明的目的是解决现有技术中的问题，提供一种接口规范、样式统一、关联性强，汇总地图工作量小的svg数据地图编辑工具、编辑方法及计算机可读介质。
本发明的技术方案是：提供一种svg数据地图编辑工具，包括：识别模块，所述识别模块用于识别导入的svg文件对应的行政区划；可视化编辑模块，所述可视化编辑模块用于显示导入的svg文件并对svg文件进行编辑；赋值模块，所述赋值模块用于对svg文件进行赋值；标题生成模块，所述标题生成模块用于生成与导入的svg文件数量相同的初始标题；转换模块，所述转换模块用于将操作代码格式化，输出相应的文件。
作为一种优选的技术方案，该svg数据地图编辑工具还包括关联模块，所述关联模块用于将导入的svg文件与父层地图关联穿透。
作为一种优选的技术方案，所述转换模块输出的文件格式为js。
本发明还提供了一种应用该svg数据地图编辑工具的svg数据地图编辑方法，包括以下步骤：S1、绘制矢量地图文件，所述矢量地图文件完整闭合的图层路径为某一行政区划的形状，保存为svg文件；根据地图包括的行政区划的数量绘制多个svg文件，每一svg文件路径为单独图层，图层命名为空；S2、将所有svg文件导入所述svg数据地图编辑工具，所述识别模块识别svg文件，在所述可视化编辑模块中显示相应的行政区划；S3、所述svg数据地图编辑工具的识别模块识别行政区划的同时，所述标题生成模块自动生成与导入的svg文件数量相同的初始标题；将所述初始标题拖动到地图区域，将初始标题修改为相应的行政区划名称；依次修改每个行政区划的标题，并通过所述赋值模块进行ID赋值命名；S4、通过所述转换模块进行转换，将svg地图初始代码、区域标题、ID命名进行操作代码格式化并输出为相应的文件。
作为一种优选的技术方案，所述步骤S3与步骤S4之间还包括以下步骤：进行数据穿透关联，将子级行政区划的svg地图与父级行政区划的svg地图进行关联，在所述可视化编辑模块内输入父级行政区划的svg地图文件对应的ID名称，关联父层文件相应内容。
作为一种优选的技术方案，步骤S1内绘制矢量地图文件为通过Illustrator的模版规范绘制相应的矢量地图。
作为一种优选的技术方案，步骤S1内绘制矢量地图文件的绘制画布为1000*1000px。
作为一种优选的技术方案，所述步骤S3内通过所述赋值模块进行ID赋值命名的规则为按照省市县区的方法自上而下命名。
作为一种优选的技术方案，所述步骤S4输出的文件为js文件。
作为一种进一步优选的技术方案，所述js文件的前后端文件可直接调用，可基于ID对地图及相应行政区划进行色彩、边框、文字颜色进行样式统一设置。
本发明还提供了一种计算机可读介质，所述计算机可读介质上存储如权利要求1至3任一权利要求所述的svg数据地图编辑工具；此时，svg数据地图编辑工具为计算机可读指令，所述计算机可读指令可被处理执行权利4至10中任一项所述的svg数据地图编辑方法。
应用本发明的一种svg数据地图编辑工具及编辑方法，可以实现从上而下的封装整个数据地图的格式，接口规范、样式规范；导入相应的svg文件后，进行可视化操作，自定义调整相关标题、显示效果等，统一区域地图id格式；通过数据格式化，导出与后端对接js文件，规范接口规则，样式规则；通过定义父级id，自动实现父子层级关联，实现省/市/县/乡镇地图多级穿透，在多个项目中进行复用累加，额外实现完整地图产品化。因此，通过本发明一种svg数据地图编辑工具及编辑方法处理的地图文件具有接口规范、样式统一、关联性强，汇总地图工作量小的优点。
附图说明
图1为本发明一种svg数据地图编辑工具具体实施方式示意图；
图2为本发明一种svg数据地图编辑方法具体实施方式流程图。
具体实施方式
为了使本发明实现的技术手段、技术特征、发明目的与技术效果易于明白了解，下面结合具体图示，进一步阐述本发明。
如图1所示为本发明的一种svg数据地图编辑工具，包括识别模块，所述识别模块用于识别导入的svg文件对应的行政区划；可视化编辑模块，所述可视化编辑模块用于显示导入的svg文件并对svg文件进行编辑，识别模块识别svg文件对应的行政区划后在所述可视化编辑模块中显示相应的区划；赋值模块，所述赋值模块用于对svg文件进行赋值；标题生成模块，所述标题生成模块用于生成与导入的svg文件数量相同的初始标题，该初始标题可进行拖动及编辑，将初始标题拖动到地图区域后修改成与对应行政区划名称相同的标题，并通过赋值模块进行ID赋值；转换模块，所述转换模块用于将操作代码格式化，输出相应的文件。在具体的执行过程中，上述在所述可视化编辑模块中显示相应svg文件的行政区划时，可以通过不同的色块显示不同的行政区划，以提高显示效果。
在实际操作中，如果这份地图是单独使用的，则不需进行数据穿透关联。如果需要将省/市/县/乡镇多级数据穿透关联，还可以加入关联模块，所述关联模块用于将导入的svg文件与父层地图关联穿透，需要通过父层ID和/或名称来找到上层数据。该实施例的svg数据地图编辑工具产生的地图数据可以在多个项目中进行复用累加，额外实现完整地图产品化。
作为一种优选方案，所述转换模块输出的文件格式为js。导出后的js文件，前后端文件可直接调用，实现数据关联和穿透；同时可基于id对地图及相应区划进行色彩、边框、文字颜色进行样式表统一设计，以符合不同项目的UI设计需要。
如图2所示，基于上述一种svg数据地图编辑工具，本发明还提供了一种svg数据地图编辑方法，包括：
S1、绘制矢量地图文件；所述矢量地图文件完整闭合的图层路径为某一行政区划的形状，保存为svg文件；根据地图包括的行政区划的数量绘制多个svg文件，每一svg文件路径为单独图层，图层命名为空。
S2、将所有svg文件导入所述svg数据地图编辑工具，所述识别模块识别svg文件，在所述可视化编辑模块中显示相应的行政区划。
S3、所述svg数据地图编辑工具的识别模块识别行政区划的同时，所述标题生成模块自动生成与导入的svg文件数量相同的初始标题；将所述初始标题拖动到地图区域，将初始标题修改为相应的行政区划名称；依次修改每个行政区划的标题，如：“宝山区”、“静安区”等，并通过所述赋值模块进行ID赋值命名。
S4、通过所述转换模块进行转换，将svg地图初始代码、区域标题、ID命名进行操作代码格式化并输出为相应的文件。
在实际应用中，如果这份地图是单独使用的，则不需进行数据穿透关联。如果需要将省/市/县/乡镇多级数据穿透关联，则需在步骤S3与步骤S4之间加入以下步骤：进行数据穿透关联，将子级行政区划的svg地图与父级行政区划的svg地图进行关联，在所述可视化编辑模块内输入父级行政区划的svg地图文件对应的ID名称，关联父层文件相应内容。应当知晓，由于svg地图文件对应的ID名称实际上是与该svg地图文件修改后的标题名称对应的，故本步骤中所述svg地图文件对应的ID名称可以由svg地图的标题名称代替或同时输入svg地图文件对应的ID名称和标题名称。但是在代码实现过程中，数据化的代码是通过svg地图文件对应的ID名称进行处理的。
作为一种优选方案，为了简化步骤S1中绘制矢量地图文件，步骤S1内绘制矢量地图文件为通过Illustrator的模版规范绘制相应的矢量地图。为了保证每个svg文件的图层大小相同，步骤S1内绘制矢量地图文件的绘制画布为1000*1000px。
作为一种优选的技术方案，从方便地图整体产品化的通盘考虑，所述步骤S3内通过所述赋值模块进行ID赋值命名的规则为按照省市县区的方法自上而下穿透命名，比如Jiangsu_sz_taicang；这样在今后的调用过程中便于识别。在实际软件代码中，每一段都是靠ID来识别，通过ID确认到相应的区域。
作为一种优选的技术方案，所述步骤S4输出的文件为js文件。所述js文件的前后端文件可直接调用，实现数据关联和穿透；同时，可基于ID对地图及相应行政区划进行色彩、边框、文字颜色进行样式统一设置，以符合不同项目的UI设计需要。当然，根据实际需要，行政区划内的文字大小若需调整也可对应设置。
本发明以svg地图为基础，通过svg数据地图编辑工具对地图相应的区域(市/区/县/乡镇)模块进行可视化编辑，添加相应的数据标签，重新封装地图数据接口，更加便捷地与后端进行数据显示、动态交互和数据穿透。
为了提高本发明svg地图编辑工具、编辑方法的便携性，提高可共享性，降低应用难度，提高普适性，本发明还提供了一种计算机可读介质。该计算机可读介质上存储有本发明所描述的svg数据地图编辑工具，此时，该svg数据地图编辑工具体现为计算机可读指令，所述计算机可读指令可被处理执行本发明内所揭示的svg数据地图编辑方法。
应用本发明的一种svg数据地图编辑工具及编辑方法，可以实现从上而下的封装整个数据地图的格式，接口规范、样式规范；导入相应的svg文件后，进行可视化操作，自定义调整相关标题、显示效果等，统一区域地图id格式；通过数据格式化，导出与后端对接js文件，规范接口规则，样式规则；通过定义父级id，自动实现父子层级关联，实现省/市/县/乡镇地图多级穿透，在多个项目中进行复用累加，额外实现完整地图产品化。因此，通过本发明一种svg数据地图编辑工具及编辑方法处理的地图文件具有接口规范、样式统一、关联性强，汇总地图工作量小的优点。
综上所述仅为本发明较佳的实施例，并非用来限定本发明的实施范围。即凡依本发明申请专利范围的内容所作的等效变化及修饰，皆应属于本发明的技术范畴。
Claims (11)
1.一种svg数据地图编辑工具，其特征在于，包括：
识别模块，所述识别模块用于识别导入的svg文件对应的行政区划；
可视化编辑模块，所述可视化编辑模块用于显示导入的svg文件并对svg文件进行编辑；
赋值模块，所述赋值模块用于对svg文件进行赋值；
标题生成模块，所述标题生成模块用于生成与导入的svg文件数量相同的初始标题；
转换模块，所述转换模块用于将操作代码格式化，输出相应的文件。
2.根据权利要求1所述的一种svg数据地图编辑工具，其特征在于：还包括关联模块，所述关联模块用于将导入的svg文件与父层地图关联穿透。
3.根据权利要求1所述的一种svg数据地图编辑工具，其特征在于：所述转换模块输出的文件格式为js。
4.应用权利要求1至3任一权利要求所述的一种svg数据地图编辑工具的一种svg数据地图编辑方法，其特征在于：包括以下步骤：
S1、绘制矢量地图文件；所述矢量地图文件完整闭合的图层路径为某一行政区划的形状，保存为svg文件；根据地图包括的行政区划的数量绘制多个svg文件，每一svg文件路径为单独图层，图层命名为空；
S2、将所有svg文件导入所述svg数据地图编辑工具，所述识别模块识别svg文件，在所述可视化编辑模块中显示相应的行政区划；
S3、所述svg数据地图编辑工具的识别模块识别行政区划的同时，所述标题生成模块自动生成与导入的svg文件数量相同的初始标题；将所述初始标题拖动到地图区域，将初始标题修改为相应的行政区划名称；依次修改每个行政区划的标题，并通过所述赋值模块进行ID赋值命名；
S4、通过所述转换模块进行转换，将svg地图初始代码、区域标题、ID命名进行操作代码格式化并输出为相应的文件。
5.根据权利要求4所述的一种svg数据地图编辑方法，其特征在于：所述步骤S3与步骤S4之间还包括以下步骤：
进行数据穿透关联，将子级行政区划的svg地图与父级行政区划的svg地图进行关联，在所述可视化编辑模块内输入父级行政区划的svg地图文件对应的ID名称，关联父层文件相应内容。
6.根据权利要求4所述的一种svg数据地图编辑方法，其特征在于：步骤S1内绘制矢量地图文件为通过Illustrator的模版规范绘制相应的矢量地图。
7.根据权利要求4所述的一种svg数据地图编辑方法，其特征在于：步骤S1内绘制矢量地图文件的绘制画布为1000*1000px。
8.根据权利要求4所述的一种svg数据地图编辑方法，其特征在于：所述步骤S3内通过所述赋值模块进行ID赋值命名的规则为按照省市县区的方法自上而下命名。
9.根据权利要求4所述的一种svg数据地图编辑方法，其特征在于：所述步骤S4输出的文件为js文件。
10.根据权利要求9所述的一种svg数据地图编辑方法，其特征在于：所述js文件的前后端文件可直接调用，可基于ID对地图及相应行政区划进行色彩、边框、文字颜色进行样式统一设置。
11.一种计算机可读介质，所述计算机可读介质上存储如权利要求1至3任一权利要求所述的svg数据地图编辑工具；此时，svg数据地图编辑工具为计算机可读指令，所述计算机可读指令可被处理执行权利4至10中任一项所述的svg数据地图编辑方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811367800.1A CN109446295B (zh) | 2018-11-16 | 2018-11-16 | 一种svg数据地图编辑工具、编辑方法及计算机可读介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811367800.1A CN109446295B (zh) | 2018-11-16 | 2018-11-16 | 一种svg数据地图编辑工具、编辑方法及计算机可读介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109446295A true CN109446295A (zh) | 2019-03-08 |
| CN109446295B CN109446295B (zh) | 2020-02-14 |
Family
ID=65553701
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811367800.1A Active CN109446295B (zh) | 2018-11-16 | 2018-11-16 | 一种svg数据地图编辑工具、编辑方法及计算机可读介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109446295B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110069560A (zh) * | 2019-04-02 | 2019-07-30 | 北京明略软件系统有限公司 | 电子地图的管理方法和装置 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070185651A1 (en) * | 2006-02-07 | 2007-08-09 | Masaki Motoyama | Navigation system utilizing XML/SVG map data converted from geographic map data and layered structure of XML/SVG map data based on administrative regions |
| CN107220357A (zh) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | Svg地图数据可视化的实现方法及装置 |
-
2018
- 2018-11-16 CN CN201811367800.1A patent/CN109446295B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070185651A1 (en) * | 2006-02-07 | 2007-08-09 | Masaki Motoyama | Navigation system utilizing XML/SVG map data converted from geographic map data and layered structure of XML/SVG map data based on administrative regions |
| CN107220357A (zh) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | Svg地图数据可视化的实现方法及装置 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110069560A (zh) * | 2019-04-02 | 2019-07-30 | 北京明略软件系统有限公司 | 电子地图的管理方法和装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109446295B (zh) | 2020-02-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111259644B (zh) | 富文本处理方法与编辑器、设备及存储介质 | |
| CN106126489A (zh) | 一种报告文件动态图表编辑方法及系统 | |
| CN105404512B (zh) | 一种应用程序窗口界面更改方法及装置 | |
| CN102609252A (zh) | 基于测量仪器的逻辑菜单资源智能配置方法 | |
| CN107741971B (zh) | 一种基于自定义动态数据的在线可视分析ppt的方法 | |
| CN102663198A (zh) | 一种web后台与前台结合的在线设计制作印制品的方法及系统 | |
| CN102141985A (zh) | 一种文稿在线编辑器 | |
| CN107133198A (zh) | 一种文档的排版和格式转换方法 | |
| WO2023138435A1 (zh) | 应用开发平台、微程序生成方法、设备及存储介质 | |
| CN109446295A (zh) | 一种svg数据地图编辑工具、编辑方法及计算机可读介质 | |
| CN113468261B (zh) | 基于图形编辑引擎构建物联网实体关系的方法和系统 | |
| CN101436309B (zh) | 一种修改公式运算符的方法和装置 | |
| CN117950546A (zh) | 点读数据的处理方法、电子文档的展示方法及电子设备 | |
| CN113918140A (zh) | 一种基于拖拽方式生成前后端代码的系统构建方法 | |
| CN108647337B (zh) | 一种仿真分析数据的格式处理方法及装置 | |
| KR20180046419A (ko) | 클라우드 기반 인터렉티브 스마트 콘텐츠 제작 시스템 | |
| CN116610394A (zh) | 基于模板和模块的数据可视化页面配置方法、系统和装置 | |
| CN115309476A (zh) | 一种基于浏览器的ofd文件显示和编辑方法 | |
| CN105373519B (zh) | 一种工艺符号的编辑装置及方法 | |
| US11526578B2 (en) | System and method for producing transferable, modular web pages | |
| Yu et al. | Matplotlib 2. x By Example | |
| CN105045774B (zh) | 一种所见即所得的用户界面操作手册编写及生成方法 | |
| CN112084750B (zh) | 一种贴纸处理方法、装置、电子设备及存储介质 | |
| CN113269583A (zh) | 内容制作的方法、装置及电子设备 | |
| CN103049543A (zh) | 多分支配置文件的更新方法及更新工具 |
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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 1901, No. 380 Tianmuzhong Road, Jing'an District, Shanghai 200000 Applicant after: Shanghai Tianhao Information Technology Co.,Ltd. Address before: Room 1901-18, 380 Tianmuzhong Road, Jing'an District, Shanghai 200000 Applicant before: SHANGHAI TELE-HOT ELECTRONIC COMMERCE Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A svg data map editing tool, editing method and computer readable medium Effective date of registration: 20221129 Granted publication date: 20200214 Pledgee: Industrial Bank Co.,Ltd. Shanghai Pengpu Sub branch Pledgor: Shanghai Tianhao Information Technology Co.,Ltd. Registration number: Y2022310000352 |
|
| PC01 | Cancellation of the registration of the contract for pledge of patent right | ||
| PC01 | Cancellation of the registration of the contract for pledge of patent right |
Date of cancellation: 20231129 Granted publication date: 20200214 Pledgee: Industrial Bank Co.,Ltd. Shanghai Pengpu Sub branch Pledgor: Shanghai Tianhao Information Technology Co.,Ltd. Registration number: Y2022310000352 |
|
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A SVG data map editing tool, editing method, and computer-readable medium Granted publication date: 20200214 Pledgee: Industrial Bank Co.,Ltd. Shanghai Pengpu Sub branch Pledgor: Shanghai Tianhao Information Technology Co.,Ltd. Registration number: Y2024310000040 |