CN109712236A - 基于svg地图数据的三维可视化实现方法 - Google Patents
基于svg地图数据的三维可视化实现方法 Download PDFInfo
- Publication number
- CN109712236A CN109712236A CN201811480301.3A CN201811480301A CN109712236A CN 109712236 A CN109712236 A CN 109712236A CN 201811480301 A CN201811480301 A CN 201811480301A CN 109712236 A CN109712236 A CN 109712236A
- Authority
- CN
- China
- Prior art keywords
- svg
- map
- dimensional
- node
- implementation method
- 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 13
- 238000012800 visualization Methods 0.000 title claims abstract description 12
- 230000000694 effects Effects 0.000 abstract description 3
- 238000011161 development Methods 0.000 abstract description 2
- 238000012423 maintenance Methods 0.000 abstract description 2
- 230000000007 visual effect Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000003321 amplification Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Landscapes
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种基于SVG地图数据的三维可视化实现方法，其特征在于，包括以下步骤：绘制SVG标准地图；解析各图层群组，解析SVG基本图形元素；利用WebGL三维引擎构建三维场景，添加地图模型，添加对应图标。本发明的技术方案通过以给定SVG地图数据结构的SVG地图作为底层数据，对SVG各层元素进行解析得到地理信息，通过三维引擎建模，最终实现SVG地图数据的三维可视化效果。绘制SVG矢量地图的成本较低，且地图精确度远远大于普通位图。把SVG地图作为三维地图的底层数据构建三维地图，能够大大缩减开发周期，以及降低维护成本，更多维度，更具象化、多方面的表现地理信息。
Description
技术领域
本发明涉及一种基于SVG地图数据的三维建模以及可视化展示技术，属于三维图形技术领域。
背景技术
SVG(Scaleable Vector Graphics，可缩放矢量图形)是一种使用XML(ExtensibleMarkup Language，可扩展标记语言)来描述二维图形和绘图程序的一种语言。SVG图形存储容量小，对网络的输入负载小，网络传输延时小，支持交互和动画，而且图像的放大、缩小操作不会使图像失真。SVG本身的诸多优点，十分适合作为轻量级应用的Web二维地图的载体。
随着WebGIS技术的飞速发展，具有立体性、方位性、直观性和真实性特点的网络三维地图也开始进入了公众的视野。但由于目前三维地图主要依赖于实景拍照建模或基于专业软件建模，学习成本高，过程繁琐，耗时较长，难以大面积推广。
发明内容
本发明的目的是：把常见的二维地图方案SVG地图和WebGL结合得到三维地图。
为了达到上述目的，本发明的技术方案是提供了一种基于SVG地图数据的三维可视化实现方法，其特征在于，包括以下步骤：
步骤1、绘制SVG标准地图；
步骤2、通过AJAX加载SVG标准地图文件，解析各图层群组，解析SVG基本图形元素，统一把SVG所有基础图形转换为灵活度较高、包容性更好的路径来表达，读取地图元素基本信息；
步骤3、基于步骤2得到的路径及地图元素基本信息利用WebGL三维引擎构建三维场景，添加地图模型，添加对应图标。
优选地，步骤1中，绘制SVG标准地图时，根据SVG地图数据结构在AdobeIllusrator应用中制作出SVG格式的文件，编辑地图对象属性，得到SVG标准地图。
优选地，所述SVG地图数据结构包括SVG地图楼层节点、区域节点和房间节点，SVG地图楼层节点为区域节点和房间节点的父节点，其中房间节点包含了地图对象的地理信息和基本信息。
优选地，步骤3中，所述WebGL三维引擎为Three.js。
优选地，步骤3中，构建三维场景包括：添加场景、相机、渲染器、光源，添加区域模型得到地面层，添加房间元素得到房间层，根据不同类型元素加上对应图标说明。
本发明的技术方案通过以给定SVG地图数据结构的SVG地图作为底层数据，对SVG各层元素进行解析得到地理信息，通过三维引擎建模，最终实现SVG地图数据的三维可视化效果。由于SVG开放的标准以及多工具的支持，绘制SVG矢量地图的成本较低，且地图精确度远远大于普通位图。把SVG地图作为三维地图的底层数据构建三维地图，能够大大缩减开发周期，以及降低维护成本，更多维度，更具象化、多方面的表现地理信息。
附图说明
图1为本发明提供的实施例中的SVG地图数据三维可视化流程。
具体实施方式
下面结合具体实施例，进一步阐述本发明。应理解，这些实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所附权利要求书所限定的范围。
结合图1，本发明提供的一种基于SVG地图数据的三维可视化实现方法包括以下步骤：
步骤1、SVG地图绘制，根据定义好的SVG地图数据结构在Adobe Illusrator应用中制作出SVG格式的文件，编辑地图对象属性，得到SVG地图文件。在本实施例中，地图数据结构包括：SVG地图楼层节点、区域节点和房间节点。区域节点和房间节点为一个群组，群组下面包含了多个具体的地图元素节点。楼层节点为区域节点和房间节点的父节点，其中房间元素节点包含了地图对象的地理信息和基本信息。
步骤2、地图数据解析，加载SVG地图文件并解析，包括以下步骤：
步骤2.1、通过AJAX加载SVG地图文件。
步骤2.2、解析各图层群组。在本实施例中，各图层群组分为了区域对象和房间对象。区域对象作为三维场景中的地面层，是房间的载体。不同的地图元素对应不同的对象类型。
步骤2.3、解析SVG基本图形元素。由于SVG定义了多种基本图形如矩形、椭圆、圆、线等，以及路径(PATH)来表达形状。而三维引擎并不直接支持如此多的基础图形元素，为统一数据格式及提高三维渲染性能，统一把SVG所有基础图形转换为灵活度较高、包容性更好的路径(PATH)来表达。路径(PATH)提供了对直线、椭圆和复杂曲线如贝塞尔曲线等接口支持，能较为准确地表达出原有SVG地图。
步骤3、三维地图构建：
利用WebGL三维引擎构建三维场景，添加三维相机到合适高度，添加场景光，添加地图模型，添加对应图标。
具体的，在本实施例中，步骤1中由于CAD在建筑领域的广泛应用，且其和SVG同属于矢量图，所以SVG地图的绘制地图以CAD图为基准，导入CAD图到Adobe Illusrator，按一定的缩放级别绘制出SVG地图。具体的，在本实施例中，三维地图构建包括了创建三维场景和二维图标场景。由于三维场景交互操作会导致视角改变，而图标作为地图中重要的表达元素，需要在任意视角都能展现，以便使用者能直观明了的了解地图中各元素的类别。所以图标层需要单独使用三维场景，使用正交相机保证图标不会被缩放及永远正对使用者。
具体的，在本实施例中，步骤2.3中解析SVG基本图形采用的策略是通过解析SVG基本图形的图形信息，如：矩形元素需要获取到宽高以及左上角坐标，圆需要取得半径以及圆心。通过分类处理SVG基本图形，取得各自的图形属性后，通过路径模拟出图形。如在本实施例中，矩形则创建路径连接矩形的端点，而椭圆和圆等元素则用四段贝塞尔曲线来模拟出图形。
具体的，在本实施例中，步骤3中添加三维模型时针对不同类型的地图元素，策略也不尽相同。如本实施例中的区域元素和房间元素。区域元素作为地板层，不需要考虑其高程。而房间元素也不能和区域元素发生空间上的交集。
具体的，在本实施例中，不同类型房间如客服中心、卫生间等对于不同的图标，因此添加图标需要加载指定图标文件，并生成三维模型。而后，由地理解析取得地图元素各自的坐标中心点，把图标模型添加至中心点上。由于图标和地图元素展示效果要求并不一致，图标需要在任意角度都能正对用户，因此需要创建二维场景来加载图标，并实时读取地图交互角度和位置等信息，动态调整二维场景的位置。
Claims (5)
1.一种基于SVG地图数据的三维可视化实现方法，其特征在于，包括以下步骤：
步骤1、绘制SVG标准地图；
步骤2、通过AJAX加载SVG标准地图文件，解析各图层群组，解析SVG基本图形元素，统一把SVG所有基础图形转换为灵活度较高、包容性更好的路径来表达，读取地图元素基本信息；
步骤3、基于步骤2得到的路径及地图元素基本信息利用WebGL三维引擎构建三维场景，添加地图模型，添加对应图标。
2.如权利要求1所述的一种基于SVG地图数据的三维可视化实现方法，其特征在于，步骤1中，绘制SVG标准地图时，根据SVG地图数据结构在Adobe Illusrator应用中制作出SVG格式的文件，编辑地图对象属性，得到SVG标准地图。
3.如权利要求2所述的一种基于SVG地图数据的三维可视化实现方法，其特征在于，所述SVG地图数据结构包括SVG地图楼层节点、区域节点和房间节点，SVG地图楼层节点为区域节点和房间节点的父节点，其中房间节点包含了地图对象的地理信息和基本信息。
4.如权利要求1所述的一种基于SVG地图数据的三维可视化实现方法，其特征在于，步骤3中，所述WebGL三维引擎为Three.js。
5.如权利要求1所述的一种基于SVG地图数据的三维可视化实现方法，其特征在于，步骤3中，构建三维场景包括：添加场景、相机、渲染器、光源，添加区域模型得到地面层，添加房间元素得到房间层，根据不同类型元素加上对应图标说明。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811480301.3A CN109712236A (zh) | 2018-12-05 | 2018-12-05 | 基于svg地图数据的三维可视化实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811480301.3A CN109712236A (zh) | 2018-12-05 | 2018-12-05 | 基于svg地图数据的三维可视化实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109712236A true CN109712236A (zh) | 2019-05-03 |
Family
ID=66253893
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811480301.3A Pending CN109712236A (zh) | 2018-12-05 | 2018-12-05 | 基于svg地图数据的三维可视化实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109712236A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110516383A (zh) * | 2019-08-30 | 2019-11-29 | 兰州深蓝图形技术有限公司 | 一种铁路信号设备矢量图形文件解析、显示方法及装置 |
| CN111599011A (zh) * | 2020-07-15 | 2020-08-28 | 杭州电力设备制造有限公司 | 基于WebGL技术的电力系统场景快速构建方法及系统 |
| CN111754602A (zh) * | 2020-05-15 | 2020-10-09 | 北京京东乾石科技有限公司 | 一种地图构建方法、装置、电子设备和存储介质 |
Citations (7)
| 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 |
| CN104103211A (zh) * | 2013-04-09 | 2014-10-15 | 广东美晨通讯有限公司 | 室内电子地图的构建方法及系统 |
| CN107220357A (zh) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | Svg地图数据可视化的实现方法及装置 |
| CN107256265A (zh) * | 2017-06-14 | 2017-10-17 | 成都四方伟业软件股份有限公司 | 一种搜索引擎结果数据可视化展示方法及系统 |
| CN107610227A (zh) * | 2017-08-24 | 2018-01-19 | 深圳市易景空间智能科技有限公司 | 室内三维地图的制作方法 |
| CN107833276A (zh) * | 2017-10-10 | 2018-03-23 | 深圳数位传媒科技有限公司 | 二维地图转换三维地图的方法、装置和计算机存储介质 |
| CN108846893A (zh) * | 2018-06-27 | 2018-11-20 | 成都四方伟业软件股份有限公司 | 三维矢量地图生成方法及装置 |
-
2018
- 2018-12-05 CN CN201811480301.3A patent/CN109712236A/zh active Pending
Patent Citations (7)
| 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 |
| CN104103211A (zh) * | 2013-04-09 | 2014-10-15 | 广东美晨通讯有限公司 | 室内电子地图的构建方法及系统 |
| CN107220357A (zh) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | Svg地图数据可视化的实现方法及装置 |
| CN107256265A (zh) * | 2017-06-14 | 2017-10-17 | 成都四方伟业软件股份有限公司 | 一种搜索引擎结果数据可视化展示方法及系统 |
| CN107610227A (zh) * | 2017-08-24 | 2018-01-19 | 深圳市易景空间智能科技有限公司 | 室内三维地图的制作方法 |
| CN107833276A (zh) * | 2017-10-10 | 2018-03-23 | 深圳数位传媒科技有限公司 | 二维地图转换三维地图的方法、装置和计算机存储介质 |
| CN108846893A (zh) * | 2018-06-27 | 2018-11-20 | 成都四方伟业软件股份有限公司 | 三维矢量地图生成方法及装置 |
Non-Patent Citations (2)
| Title |
|---|
| HERMANNCAIN: "深入理解three.js对svg的支持（三）：svg转three对象", 《HTTPS://BLOG.CSDN.NET/HERMANNCAIN/ARTICLE/DETAILS/75282512》 * |
| 张惠荣: "基于SVG技术的轨交站点地图设计", 《中国公共安全》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110516383A (zh) * | 2019-08-30 | 2019-11-29 | 兰州深蓝图形技术有限公司 | 一种铁路信号设备矢量图形文件解析、显示方法及装置 |
| CN111754602A (zh) * | 2020-05-15 | 2020-10-09 | 北京京东乾石科技有限公司 | 一种地图构建方法、装置、电子设备和存储介质 |
| CN111754602B (zh) * | 2020-05-15 | 2024-04-16 | 北京京东乾石科技有限公司 | 一种地图构建方法、装置、电子设备和存储介质 |
| CN111599011A (zh) * | 2020-07-15 | 2020-08-28 | 杭州电力设备制造有限公司 | 基于WebGL技术的电力系统场景快速构建方法及系统 |
| CN111599011B (zh) * | 2020-07-15 | 2023-08-04 | 杭州电力设备制造有限公司 | 基于WebGL技术的电力系统场景快速构建方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101930627B (zh) | 一种基于二维户型图的三维户型建模方法 | |
| CN106683189B (zh) | 一种在三维场景中渲染文字的方法 | |
| US20120259594A1 (en) | Bim based 3-d visualization | |
| CN111008422A (zh) | 一种建筑物实景地图制作方法及系统 | |
| CN113593051B (zh) | 一种实景可视化方法及大坝可视化方法及计算机设备 | |
| Zhao | Application of 3D CAD in landscape architecture design and optimization of hierarchical details | |
| CN109712236A (zh) | 基于svg地图数据的三维可视化实现方法 | |
| CN103337093B (zh) | 一种基于Unity3D着色器实现三维机房实时温场效果的方法 | |
| CN103984787A (zh) | 室内地图在移动终端的矢量建模与展示和交互方法 | |
| CN105718643A (zh) | 一种基于最优化视角的船舶生产设计审图器实现方法 | |
| CN101853162A (zh) | 一种可编辑的网页三维几何造型渲染方法 | |
| Lu et al. | Design and implementation of virtual interactive scene based on unity 3D | |
| Ellul et al. | Investigating approaches to improving rendering performance of 3D city models on mobile devices | |
| CN115659445A (zh) | 一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法 | |
| CN103793552A (zh) | 一种软组织形变的局部质点弹簧模型的实时动态生成方法 | |
| Zhang et al. | The Application of Folk Art with Virtual Reality Technology in Visual Communication. | |
| Zhang et al. | [Retracted] Virtual Reality Design and Realization of Interactive Garden Landscape | |
| CN110400366A (zh) | 一种基于OpenGL的实时洪水灾害可视化仿真方法 | |
| Duanmu et al. | 3D Visual Management of Substation Based on Unity3D | |
| Liu et al. | A 2d and 3d indoor mapping approach for virtual navigation services | |
| Ma | Multimedia simulation-based architecture cad system model | |
| Wang | Application of virtual reality technology in digital tourism | |
| Kang et al. | Real-time cloud modelling and rendering approach based on L-system for flight simulation | |
| Whyte et al. | Visualization and information: a building design perspective | |
| Li et al. | Movie Data Visualization Based on WebGL |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190503 |