CN110502561B - 一种基于svg技术的船舶灾害标绘方法 - Google Patents

一种基于svg技术的船舶灾害标绘方法 Download PDF

Info

Publication number
CN110502561B
CN110502561B CN201910753274.0A CN201910753274A CN110502561B CN 110502561 B CN110502561 B CN 110502561B CN 201910753274 A CN201910753274 A CN 201910753274A CN 110502561 B CN110502561 B CN 110502561B
Authority
CN
China
Prior art keywords
plotting
data
layer
svg
deck
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.)
Active
Application number
CN201910753274.0A
Other languages
English (en)
Other versions
CN110502561A (zh
Inventor
李平
鄂弢金
单国夫
刘彦辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Xianghao Marine Equipment Co ltd
Suzhou Yujiang Boat Technology Co ltd
Original Assignee
Suzhou Xianghao Marine Equipment Co ltd
Suzhou Yujiang Boat Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Suzhou Xianghao Marine Equipment Co ltd, Suzhou Yujiang Boat Technology Co ltd filed Critical Suzhou Xianghao Marine Equipment Co ltd
Priority to CN201910753274.0A priority Critical patent/CN110502561B/zh
Publication of CN110502561A publication Critical patent/CN110502561A/zh
Application granted granted Critical
Publication of CN110502561B publication Critical patent/CN110502561B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/10—Protocols in which an application is distributed across nodes in the network
    • H04L67/1095—Replication or mirroring of data, e.g. scheduling or transport for data synchronisation between network nodes
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/14—Session management
    • H04L67/142—Managing session states for stateless protocols; Signalling session states; State transitions; Keeping-state mechanisms
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/14—Session management
    • H04L67/143—Termination or inactivation of sessions, e.g. event-controlled end of session
    • H04L67/145—Termination or inactivation of sessions, e.g. event-controlled end of session avoiding end of session, e.g. keep-alive, heartbeats, resumption message or wake-up for inactive or interrupted session
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/55—Push-based network services
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02A—TECHNOLOGIES FOR ADAPTATION TO CLIMATE CHANGE
    • Y02A10/00—TECHNOLOGIES FOR ADAPTATION TO CLIMATE CHANGE at coastal zones; at river basins
    • Y02A10/40—Controlling or monitoring, e.g. of flood or hurricane; Forecasting, e.g. risk assessment or mapping

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Cardiology (AREA)
  • General Health & Medical Sciences (AREA)
  • Alarm Systems (AREA)
  • Processing Or Creating Images (AREA)
  • Instructional Devices (AREA)
  • Management, Administration, Business Operations System, And Electronic Commerce (AREA)

Abstract

本发明涉及一种基于SVG技术的船舶灾害标绘方法，包括以下步骤：步骤S100：SVG数据制作与发布；步骤S200：SVG数据请求与显示；步骤S300：SVG灾害态势标绘；步骤S400：标绘数据的同步；步骤S500：标绘数据的存储；步骤S600：标绘数据的回放。本发明中SVG技术作为构建船舶甲板和信息数据容器的解决方案的关键点，实现甲板图的放大缩小、平移等基本GIS功能，提高了船舶安全系统中图像和数据的显示精度，改善了用户体验。

Description

一种基于SVG技术的船舶灾害标绘方法
技术领域
本发明涉及计算机船舶安全管理技术领域，尤其涉及一种基于SVG技术的船舶灾害标绘方法。
背景技术
SVG(Scalable Vector Graphics，可缩放矢量图形)是基于XML(ExtensibleMarkup Language，可扩展标记语言)的图形格式，是互联网的新一代矢量图形标准。具有丰富的元素定义、良好的可读性和交互性、完全支持文档物件模型、广泛的用户基础等优势。
WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型的应用层。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
船舶安全管理：为保持或恢复船舶生命力所采取的预防、限制和消除损害的措施和行动。
现有的船舶安全管理系统不能在图上标绘灾害和态势信息，以及同步标绘数据给其他终端展示。
此外现有的船舶安全管理系统采用组态王软件或者硬件模拟板实现，船型图的尺寸有限，不能全面展示船舶中的资源和数据信息。
有鉴于上述的缺陷，本设计人积极加以研究创新，以期创设一种基于SVG技术的船舶灾害标绘方法，使其更具有产业上的利用价值。
发明内容
为解决上述技术问题，本发明的目的是提供一种基于SVG技术的船舶灾害标绘方法，可以高精度全面展示船舶信息，同时基于B/S的软件架构实现灾害态势信息数据同步功能，可以无需部署客户端在船舶不同终端实时显示灾害的态势以及灾害处置的步骤和措施。
为实现上述目的，本发明采用如下技术方案：
一种基于SVG技术的船舶灾害标绘方法，包括以下步骤：
步骤S100：SVG数据制作与发布；
步骤S200：SVG数据请求与显示；
步骤S300：SVG灾害态势标绘；
步骤S400：标绘数据的同步；
步骤S500：标绘数据的存储；
步骤S600：标绘数据的回放。
作为本发明的进一步改进，步骤S100包括：
步骤S110：将船舶甲板图从CAD或其他格式转换为SVG，每层甲板图数据存储为一个SVG数据对象；
步骤S120：图层划分，SVG采用基于XML的DOM文档管理结构，采用组<g>对象将其下面的所有图形管理起来，给每层甲板的数据对象划分数据层、包括标绘层、传感器测点层、舱室层、器材层、防火隔壁层、水密隔壁层和消防区图层，再将整个SVG内联到html中；
步骤S130：根据船舶实际情况以及船舶安全系统需求，添加各个数据层的数据。
作为本发明的进一步改进，步骤S200包括：
步骤S210：用户在客户端请求甲板数据；
步骤S220：服务端通过WEB数据服务以XML流形式向客户端推送；
步骤S230：在页面初始化的时候将WEB数据中的测点和区域加载到测点层和区域层，通过display属性控制各个元素的显示和隐藏。
作为本发明的进一步改进，步骤S300包括：
步骤S310：用户在客户端请求标绘类型；
步骤S320：服务端通过WEB数据服务以Json格式将标绘类型返回给客户端；
步骤S330：客户端根据预先定义好的格式对标绘的数据类型进行分析和处理，并将标绘类型按照“事件”、“边界”和“处置”三种类别显示在标绘面板上，同时绑定对应处理的JavaScript事件；
步骤S340：用户点击标绘功能按钮，触发事件，调用消息响应函数，在消息响应函数中在甲板图对应的图层中绘制并渲染对应的标绘图形。
作为本发明的进一步改进，其中，“事件”的标绘类型包括：生化事件、火灾、破损浸水、舱壁扭曲、甲板破裂和管路破损；
其中，“边界”的标绘类型包括：防火边界、烟气边界、气体污染、浸水边界、舱口烟气和生化边界；
其中，“处置”的标绘类型包括：支撑、甲板冷却和舱壁冷却；
其中，标绘的全部类型存入数据库中，根据实际需求进行动态配置，客户端在进行标绘时，请求标绘的数据类型，在标绘面板上划分为事件标绘按钮组，区域标绘按钮组，处置事件标绘组，通过JavaScript脚本绑定点击事件，弹出标绘面板之后，事件标绘按钮组显示，当“事件”标绘完成之后弹出“边界”和“处置”按钮组，在初始化区域的时候，在各个区域层上绑定点击事件，点击的时候通过判断标绘面板上激活的按钮判断是标绘“事件”还是“边界”和“处置”；
其中，将用户点击事件的屏幕坐标转换为SVG甲板图层的相对坐标，根据甲板图层的平移和缩放矩阵，将屏幕的坐标转换为该甲板层的相对坐标；
其中，为每个标绘类型预制一个图元，每个图元都分配一个唯一标识的UUID，通过该UUID控制图元的显示、隐藏、删除和修改操作，为每个报警事件分配一个<g>层，将该事件的标绘图元都放入此<g>层中，同时为该<g>层分配一个UUID作为class标识，通过控制具有相同class的<g>层，实现报警事件标绘内容的显示、隐藏、删除和修改操作；
其中，为了防止用户将绘制的绘制内容超出甲板范围，在甲板底图上按照甲板形状设置一个绘制区域，只在此区域内响应点击事件，超出区域部分不响应点击事件，实现绘制范围的控制。
作为本发明的进一步改进，步骤S400包括：
步骤S410：用户点击发布按钮，触发事件，调用Ajax请求接口，将标绘的数据以Json格式返回给服务器端；
步骤S420：服务器端收到数据后，遍历所有连接到服务器的客户端，通过WebSocket技术，将收到的数据发送给其他客户端；
步骤S430：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
作为本发明的进一步改进，步骤S500包括：
步骤S510：服务器端收到数据后，对数据进行解析和转换；
步骤S520：将转化后的数据对象存储到数据库中。
作为本发明的进一步改进，步骤S600包括：
步骤S610：用户点击回放按钮，触发事件，调用Ajax请求接口，将请求的回放数据标识以Json格式返回给服务器端；
步骤S620：服务端收到回放数据标识，查询数据库里对应的数据标识数据，并将数据以Json格式返回给客户端；
步骤S630：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
借由上述方案，本发明至少具有以下优点：
(1)本发明中SVG技术作为构建船舶甲板和信息数据容器的解决方案的关键点，实现甲板图的放大缩小、平移等基本GIS功能，提高了船舶安全系统中图像和数据的显示精度，改善了用户体验；利用SVG可以编辑和添加元素的优点实现标绘功能。
(2)本发明采用B/S架构，通过Web访问的方式，具有跨平台性，可以在不同操作系统上使用。用户不需要在自己的本地计算机上安装数据和应用程序，只要把请求发送到服务器，服务器就会把数据和分析处理结果传送给用户，减少用户部署的工作量。
(3)本发明采用WebSocket技术进行数据同步，WebSocket支持服务器端向客户端推送功能，服务器可以直接发送数据而不用等待客户端请求，只要建立起WebSocket连接就会一直保持连接，避免了HTTP的非状态性，同时减少了服务器的资源消耗。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1是本发明的流程图；
图2是本发明的标绘面板结构图；
图3是本发明标绘流程图；
图4是本发明的事件标绘流程图；
图5是本发明的边界标绘流程图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例
如图1至图5所示，
一种基于SVG技术的船舶灾害标绘方法，包括以下步骤：
步骤S100：SVG数据制作与发布；
步骤S200：SVG数据请求与显示；
步骤S300：SVG灾害态势标绘；
步骤S400：标绘数据的同步；
步骤S500：标绘数据的存储；
步骤S600：标绘数据的回放。
优选的，步骤S100具体包括：
步骤S110：将船舶甲板图从CAD或其他格式转换为SVG，每层甲板图数据存储为一个SVG数据对象；
步骤S120：图层划分，SVG采用基于XML的DOM文档管理结构，采用组<g>对象将其下面的所有图形管理起来，给每层甲板的数据对象划分数据层、包括标绘层、传感器测点层、舱室层、器材层、防火隔壁层、水密隔壁层和消防区图层，再将整个SVG内联到html中；
步骤S130：根据船舶实际情况以及船舶安全系统需求，添加各个数据层的数据。
优选的，步骤S200具体包括：
步骤S210：用户在客户端请求甲板数据；
步骤S220：服务端通过WEB数据服务以XML流形式向客户端推送；
步骤S230：在页面初始化的时候将WEB数据中的测点和区域加载到测点层和区域层，通过display属性控制各个元素的显示和隐藏。
优选的，步骤S300具体包括：
步骤S310：用户在客户端请求标绘类型；
步骤S320：服务端通过WEB数据服务以Json格式将标绘类型返回给客户端；
步骤S330：客户端根据预先定义好的格式对标绘的数据类型进行分析和处理，并将标绘类型按照“事件”、“边界”和“处置”三种类别显示在标绘面板上，同时绑定对应处理的JavaScript事件；
步骤S340：用户点击标绘功能按钮，触发事件，调用消息响应函数，在消息响应函数中在甲板图对应的图层中绘制并渲染对应的标绘图形。
优选的，步骤S400具体包括：
步骤S410：用户点击发布按钮，触发事件，调用Ajax请求接口，将标绘的数据以Json格式返回给服务器端；
步骤S420：服务器端收到数据后，遍历所有连接到服务器的客户端，通过WebSocket技术，将收到的数据发送给其他客户端；
步骤S430：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
优选的，步骤S500具体包括：
步骤S510：服务器端收到数据后，对数据进行解析和转换；
步骤S520：将转化后的数据对象存储到数据库中。
优选的，步骤S600具体包括：
步骤S610：用户点击回放按钮，触发事件，调用Ajax请求接口，将请求的回放数据标识以Json格式返回给服务器端；
步骤S620：服务端收到回放数据标识，查询数据库里对应的数据标识数据，并将数据以Json格式返回给客户端；
步骤S630：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
本实施例提供了一种船舶甲板图从CAD格式转换为SVG格式的方法，其中包括，船舶甲板CAD图形中单层甲板的分层切割；CAD坐标原点与SVG坐标原点的对准；甲板图的Path提取与转换。
其中，每层甲板中资源和数据的划分，采用组<g>对象将其下面的所有图形管理起来，给每层甲板的数据对象划分数据层、包括标绘层、传感器测点层、舱室层、器材层、防火隔壁层、水密隔壁层和消防区图层。
本实施例还提供了一种SVG资源的请求和渲染方法，为了加快用户操作的响应速度，在界面初始化时，客户端向服务端请求甲板图层资源，测点数据，舱室信息，器材数据，防火隔壁，水密隔壁以及消防区数据；为了加快界面初始化速度，客户端只渲染显示甲板图数据，同时建立二级缓存，将除了甲板图层资源以外的数据，以SVG的图元的形式，放入二级缓存中，并不进行渲染。甲板图层数和SVG的图元通过Snap.js进行操作控制和显示。
本实施例提供了一种基于SVG的标绘方法，其中将标绘类型的划分为“事件”、“边界”和“处置”三种类别。
其中，“事件”的标绘类型包括：生化事件、火灾、破损浸水、舱壁扭曲、甲板破裂、管路破损。
其中，“边界”的标绘类型包括：防火边界、烟气边界、气体污染、浸水边界、舱口烟气、生化边界。
其中，“处置”的标绘类型包括：支撑、甲板冷却、舱壁冷却。
其中，标绘的全部类型存入数据库中，可以根据实际需求进行动态配置，客户端在进行标绘时，请求标绘的数据类型，在标绘面板上划分为事件标绘按钮组，区域标绘按钮组，处置事件标绘组，通过JavaScript脚本绑定点击事件。弹出标绘面板之后，事件标绘按钮组显示，当“事件”标绘完成之后弹出“边界”和“处置”按钮组。在初始化区域的时候，在各个区域层上绑定点击事件，点击的时候通过判断标绘面板上激活的按钮判断是标绘“事件”还是“边界”和“处置”。具体地，“事件”标绘流程参考图4，“边界”标绘流程参考图5。
其中，将用户点击事件的屏幕坐标转换为SVG甲板图层的相对坐标，根据甲板图层的平移和缩放矩阵，将屏幕的坐标转换为该甲板层的相对坐标。
其中，为每个标绘类型预制一个图元，每个图元都分配一个唯一标识的UUID，通过该UUID控制图元的显示、隐藏、删除和修改操作。为每个报警事件分配一个<g>层，将该事件的标绘图元都放入此<g>层中，同时为该<g>层分配一个UUID作为class标识，通过控制具有相同class的<g>层，实现报警事件标绘内容的显示、隐藏、删除和修改操作。
其中，为了防止用户将绘制的绘制内容超出甲板范围，在甲板底图上按照甲板形状设置一个绘制区域，只在此区域内响应点击事件，超出区域部分不响应点击事件，从而实现绘制范围的控制。
本实施例提供了一种标绘数据同步的方法，用户在客户端通过HTTP请求将数据发送给服务器端，服务器端解析数据，判断为需要标绘的同步数据，通过WebSocket的方式，主动将数据发送给其他客户端。
其中，同步的标绘数据格式组织为Json格式，服务器端可以把此数据原样返回给其他客户端解析使用。
其中，通过遍历所有连接客户端的标识，包括名称或者IP地址等信息，判断WebSocket发送的客户端标识与发起标绘的客户端是否一致，避免发起标绘客户端再进行一次标绘数据的绘制。
本实施例提供一种标绘数据的存储方法，服务器端收到客户端的数据后，将SVG的图元以字符串的形式直接存入数据库，这样客户端再请求绘制时，不需要再解析SVG的图元数据，可以直接将SVG图元添加到对应的<g>层中。
本实施例提供了一种标绘数据回放的方法，标绘数据的回放以报警事件为入口，客户端通过向服务器端发送报警事件的标识，在服务器端获取对应的标绘SVG的图元，服务器端将数据转换为JSON格式返回给客户端解析并显示。
本发明至少具有以下优点：
(1)本发明中SVG技术作为构建船舶甲板和信息数据容器的解决方案的关键点，实现甲板图的放大缩小、平移等基本GIS功能，提高了船舶安全系统中图像和数据的显示精度，改善了用户体验；利用SVG可以编辑和添加元素的优点实现标绘功能。
(2)本发明采用B/S架构，通过Web访问的方式，具有跨平台性，可以在不同操作系统上使用。用户不需要在自己的本地计算机上安装数据和应用程序，只要把请求发送到服务器，服务器就会把数据和分析处理结果传送给用户，减少用户部署的工作量。
(3)本发明采用WebSocket技术进行数据同步，WebSocket支持服务器端向客户端推送功能，服务器可以直接发送数据而不用等待客户端请求，只要建立起WebSocket连接就会一直保持连接，避免了HTTP的非状态性，同时减少了服务器的资源消耗。
以上所述仅是本发明的优选实施方式，并不用于限制本发明，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变型，这些改进和变型也应视为本发明的保护范围。

Claims (6)

1.一种基于SVG技术的船舶灾害标绘方法，其特征在于，包括以下步骤：
步骤S100：SVG数据制作与发布；
步骤S200：SVG数据请求与显示；
步骤S300：SVG灾害态势标绘；
步骤S400：标绘数据的同步；
步骤S500：标绘数据的存储；
步骤S600：标绘数据的回放；
所述步骤S300包括：
步骤S310：用户在客户端请求标绘类型；
步骤S320：服务端通过WEB数据服务以Json格式将标绘类型返回给客户端；
步骤S330：客户端根据预先定义好的格式对标绘的数据类型进行分析和处理，并将标绘类型按照“事件”、“边界”和“处置”三种类别显示在标绘面板上，同时绑定对应处理的JavaScript事件；
步骤S340：用户点击标绘功能按钮，触发事件，调用消息响应函数，在消息响应函数中在甲板图对应的图层中绘制并渲染对应的标绘图形；
其中，“事件”的标绘类型包括：生化事件、火灾、破损浸水、舱壁扭曲、甲板破裂和管路破损；
其中，“边界”的标绘类型包括：防火边界、烟气边界、气体污染、浸水边界和生化边界；
其中，“处置”的标绘类型包括：支撑、甲板冷却和舱壁冷却；
其中，标绘的全部类型存入数据库中，根据实际需求进行动态配置，客户端在进行标绘时，请求标绘的数据类型，在标绘面板上划分为事件标绘按钮组，区域标绘按钮组，处置事件标绘组，通过JavaScript脚本绑定点击事件，弹出标绘面板之后，事件标绘按钮组显示，当“事件”标绘完成之后弹出“边界”和“处置”按钮组，在初始化区域，在各个区域层上绑定点击事件，点击的时候通过判断标绘面板上激活的按钮判断是标绘“事件”还是“边界”和“处置”；
其中，将用户点击事件的屏幕坐标转换为SVG甲板图层的相对坐标，根据甲板图层的平移和缩放矩阵，将屏幕的坐标转换为该甲板图层的相对坐标；
其中，为每个标绘类型预制一个图元，每个图元都分配一个唯一标识的UUID，通过该UUID控制图元的显示、隐藏、删除和修改操作，为每个报警事件分配一个<g>层，将该事件的标绘图元都放入此<g>层中，同时为该<g>层分配一个UUID作为class标识，通过控制具有相同class的<g>层，实现报警事件标绘内容的显示、隐藏、删除和修改操作；
其中，为了防止用户将绘制的绘制内容超出甲板范围，在甲板底图上按照甲板形状设置一个绘制区域，只在此区域内响应点击事件，超出区域部分不响应点击事件，实现绘制范围的控制。
2.如权利要求1所述的一种基于SVG技术的船舶灾害标绘方法，其特征在于，所述步骤S100包括：
步骤S110：将船舶甲板图从CAD或其他格式转换为SVG，每层甲板图数据存储为一个SVG数据对象；
步骤S120：图层划分，SVG采用基于XML的DOM文档管理结构，采用组<g>对象将其下面的所有图形管理起来，给每层甲板的数据对象划分数据层、包括标绘层、传感器测点层、舱室层、器材层、防火隔壁层、水密隔壁层和消防区图层，再将整个SVG内联到html中；
步骤S130：根据船舶实际情况以及船舶安全系统需求，添加各个数据层的数据。
3.如权利要求1所述的一种基于SVG技术的船舶灾害标绘方法，其特征在于，所述步骤S200包括：
步骤S210：用户在客户端请求甲板数据；
步骤S220：服务端通过WEB数据服务以XML流形式向客户端推送；
步骤S230：在页面初始化的时候将WEB数据中的测点和区域加载到测点层和区域层，通过display属性控制各个元素的显示和隐藏。
4.如权利要求1所述的一种基于SVG技术的船舶灾害标绘方法，其特征在于，所述步骤S400包括：
步骤S410：用户点击发布按钮，触发事件，调用Ajax请求接口，将标绘的数据以Json格式返回给服务器端；
步骤S420：服务器端收到数据后，遍历所有连接到服务器的客户端，通过WebSocket技术，将收到的数据发送给其他客户端；
步骤S430：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
5.如权利要求1所述的一种基于SVG技术的船舶灾害标绘方法，其特征在于，所述步骤S500包括：
步骤S510：服务器端收到数据后，对数据进行解析和转换；
步骤S520：将转化后的数据对象存储到数据库中。
6.如权利要求1所述的一种基于SVG技术的船舶灾害标绘方法，其特征在于，所述步骤S600包括：
步骤S610：用户点击回放按钮，触发事件，调用Ajax请求接口，将请求的回放数据标识以Json格式返回给服务器端；
步骤S620：服务端收到回放数据标识，查询数据库里对应的数据标识数据，并将数据以Json格式返回给客户端；
步骤S630：其他客户端收到服务器端的数据后，调用处理函数，在甲板图对应的图层中绘制并渲染对应的标绘图形。
CN201910753274.0A 2019-08-15 2019-08-15 一种基于svg技术的船舶灾害标绘方法 Active CN110502561B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910753274.0A CN110502561B (zh) 2019-08-15 2019-08-15 一种基于svg技术的船舶灾害标绘方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910753274.0A CN110502561B (zh) 2019-08-15 2019-08-15 一种基于svg技术的船舶灾害标绘方法

Publications (2)

Publication Number Publication Date
CN110502561A CN110502561A (zh) 2019-11-26
CN110502561B true CN110502561B (zh) 2022-11-11

Family

ID=68588135

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910753274.0A Active CN110502561B (zh) 2019-08-15 2019-08-15 一种基于svg技术的船舶灾害标绘方法

Country Status (1)

Country Link
CN (1) CN110502561B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112347304A (zh) * 2020-10-19 2021-02-09 上海企翔智能科技有限公司 设备监视画面历史回放方法、装置、计算机设备和存储介质
CN113779658B (zh) * 2021-08-23 2023-11-21 中冶集团武汉勘察研究院有限公司 一种基于b/s及c/s端自动生成可编辑勘察图件的方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104317818A (zh) * 2014-09-26 2015-01-28 国家电网公司 一种在线标绘与会商的系统及方法
CN104598606A (zh) * 2015-01-30 2015-05-06 北京东方泰坦科技股份有限公司 一种针对动态异构空间信息标绘数据的整合方法
CN106843639A (zh) * 2016-12-26 2017-06-13 上海与德信息技术有限公司 图标的显示方法和图标的显示装置
CN107578172A (zh) * 2017-09-08 2018-01-12 中国人民解放军海军工程大学 一种舰艇消防态势信息传送标绘系统
CN109344217A (zh) * 2018-10-09 2019-02-15 四川长虹电器股份有限公司 一种基于JavaScript和SVG的WebGIS实现方法

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140028683A1 (en) * 2012-07-24 2014-01-30 Jun Luo Methods and software of interactively and dynamically investigating data
CA3008302A1 (en) * 2017-06-13 2018-12-13 Radicalogic Technologies, Inc. Platform for context based syndromic surveillance

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104317818A (zh) * 2014-09-26 2015-01-28 国家电网公司 一种在线标绘与会商的系统及方法
CN104598606A (zh) * 2015-01-30 2015-05-06 北京东方泰坦科技股份有限公司 一种针对动态异构空间信息标绘数据的整合方法
CN106843639A (zh) * 2016-12-26 2017-06-13 上海与德信息技术有限公司 图标的显示方法和图标的显示装置
CN107578172A (zh) * 2017-09-08 2018-01-12 中国人民解放军海军工程大学 一种舰艇消防态势信息传送标绘系统
CN109344217A (zh) * 2018-10-09 2019-02-15 四川长虹电器股份有限公司 一种基于JavaScript和SVG的WebGIS实现方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于 SVG 的地质灾害在线应急态势符号设计与实现;朱文娟等;《测绘与空间地理信息》;20171231;第40卷(第12期);第73-76页 *

Also Published As

Publication number Publication date
CN110502561A (zh) 2019-11-26

Similar Documents

Publication Publication Date Title
EP2649499B1 (en) Methods and systems for conducting a remote desktop session via html that supports a 2d canvas and dynamic drawing
EP2649534B1 (en) Methods and systems for facilitating a remote desktop session utilizing a remote desktop client common interface
US7676549B2 (en) Techniques for providing accessibility options in remote terminal sessions
EP2649532B1 (en) Methods and systems for remote desktop session redrawing via http headers
CN110502561B (zh) 一种基于svg技术的船舶灾害标绘方法
EP2649533B1 (en) Methods and systems for facilitating a remote desktop session utilizing long polling
WO2018078457A1 (en) Multi-window architecture and data communication for a remote access application session
CN113902866B (zh) 一种双引擎驱动的数字孪生系统
US20140115606A1 (en) Multi-platform mobile and other computing devices and methods
CA2654040A1 (en) Dragging and dropping objects between local and remote modules
US11917103B2 (en) Cloud integration to desktop-based emergency service applications
WO2013052207A1 (en) System for sending a file for viewing on a mobile device
CN111177292A (zh) 一种面向应急突发事件的WebGIS协同标绘方法和系统
US8373698B2 (en) Holographic enterprise network
CN112911320A (zh) 一种直播方法、装置、计算机设备和存储介质
US6404430B1 (en) Virtual space information processor
WO2011152684A2 (en) Remote user interface cooperative application
JP2007037021A (ja) 移動通信端末装置、移動通信端末プログラム、サーバ装置、サーバプログラム、及び情報配信方法
JP2000057374A (ja) 共有仮想画面による情報伝達方法及びシステム及び共有仮想画面による情報伝達プログラムを格納した記憶媒体
US11822872B2 (en) Rendering based on a document object model
CN111538556A (zh) 一种信息显示方法、装置、设备及计算机可读存储介质
CN113568687A (zh) 展示Web页面的方法、相关设备和计算机可读存储介质
CN116680493B (zh) 一种航线地图数据预缓存方法、存储介质及电子设备
CN114564260B (zh) 一种触摸终端远程控制方法及系统、触摸终端、存储介质
CN112671970B (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: 215000 room 1203 / 1204, G1 building, No. 88, Jinjihu Avenue, Suzhou Industrial Park, Jiangsu Province

Applicant after: Suzhou Yujiang boat Technology Co.,Ltd.

Address before: 215000 room 1203 / 1204, G1 building, No. 88, Jinjihu Avenue, Suzhou Industrial Park, Jiangsu Province

Applicant before: Suzhou Hasan Intelligent Technology Co.,Ltd.

TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20200428

Address after: 215000 room 1203 / 1204, G1 building, No. 88, Jinjihu Avenue, Suzhou Industrial Park, Jiangsu Province

Applicant after: Suzhou Yujiang boat Technology Co.,Ltd.

Applicant after: Suzhou Xianghao Marine Equipment Co.,Ltd.

Address before: 215000 room 1203 / 1204, G1 building, No. 88, Jinjihu Avenue, Suzhou Industrial Park, Jiangsu Province

Applicant before: Suzhou Yujiang boat Technology Co.,Ltd.

GR01 Patent grant
GR01 Patent grant