CN106250062A - 基于浏览器的电子海图实现方法及系统 - Google Patents

基于浏览器的电子海图实现方法及系统 Download PDF

Info

Publication number
CN106250062A
CN106250062A CN201610667115.5A CN201610667115A CN106250062A CN 106250062 A CN106250062 A CN 106250062A CN 201610667115 A CN201610667115 A CN 201610667115A CN 106250062 A CN106250062 A CN 106250062A
Authority
CN
China
Prior art keywords
tile
electronic chart
screen
browser
mouse
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
Application number
CN201610667115.5A
Other languages
English (en)
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.)
Chengdu Spaceon Technology Co Ltd
Original Assignee
Chengdu Spaceon 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 Chengdu Spaceon Technology Co Ltd filed Critical Chengdu Spaceon Technology Co Ltd
Priority to CN201610667115.5A priority Critical patent/CN106250062A/zh
Publication of CN106250062A publication Critical patent/CN106250062A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/06—Digital input from, or digital output to, record carriers, e.g. RAID, emulated record carriers or networked record carriers
    • G06F3/0601—Interfaces specially adapted for storage systems
    • G06F3/0602—Interfaces specially adapted for storage systems specifically adapted to achieve a particular effect
    • G06F3/061—Improving I/O performance
    • 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/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/06—Digital input from, or digital output to, record carriers, e.g. RAID, emulated record carriers or networked record carriers
    • G06F3/0601—Interfaces specially adapted for storage systems
    • G06F3/0628—Interfaces specially adapted for storage systems making use of a particular technique
    • G06F3/0638—Organizing or formatting or addressing of data
    • G06F3/0643—Management of files

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Remote Sensing (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种基于浏览器的电子海图的实现方法及系统。首先将利用瓦片地图金字塔模型产生出不同层级的瓦片，将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号以及按一定的方式进行存储；然后采用优秀的瓦片缓存技术，从而提供海图展示的速度，实现更好的用户体验；然后对于用于显示的电子海图引擎，利用地理经纬度范围与瓦片行列号的转换、缩放与平移、瓦片无缝连接，实现了电子海图在浏览器的屏幕上的快速显示。

Description

基于浏览器的电子海图实现方法及系统
技术领域
本发明涉及一种基于浏览器的电子海图的实现方法及系统。
背景技术
航道拥挤程度的提高、船舶的大型化、以及超高速船舶的出现给船舶航行安全提出了严峻的挑战。解决这个问题的一种方式是集成式地把本船的位置、所处的静态环境、周围的动态目标信息显示在一个屏幕上，使得船舶驾驶员能够迅速地获取所有这些信息，及时地做出操船决策。
海运船舶驾驶中使用各种现代化的导航设备和雷达设备，能够在很短的时间间隔内获取精确可靠的关于船位、船舶运动参数以及周围环境方面的信息。使用电子海图，能够把驾驶员从海图作业这一事务性工作中解脱出来，使其把主要精力放在航行监视和及时制定操船决策上来。
一般把各种数字式海图及其应用系统统称为电子海图。电子海图显示与信息系统（ECDIS）被认为是继雷达/ARPA之后在船舶导航方面又一项伟大的技术革命。从最初纸海图的简单电子复制品到过渡性的电子海图系统（ENS），ECDIS已发展成为一种新型的船舶导航系统和辅助决策系统，它不仅能连续给出船位，还能提供和综合与航海有关的各种信息，有效地防范各种险情。
目前电子海图应用主要是基于C/S端的，海图格式为国际上的通用标准：S52、S57、S63，是矢量格式。它的应用更多是单机应用，每台设备上必须安装电子海图应用软件及相应的一套电子海图，不但更新麻烦而且效率偏低。为了普及电子海图应用技术，开发了基于浏览的电子海图技术，这样只需打开浏览器即可访问相应应用。
发明内容
本发明的目的在于克服现有技术的不足，提供一种基于浏览器的电子海图的实现方法及系统，实现了电子海图在屏幕的浏览器上的快速显示。
本发明的目的是通过以下技术方案来实现的：基于浏览器的电子海图的实现方法，它包括电子海图分割步骤、瓦片缓存步骤和电子海图显示步骤；
所述的电子海图分割步骤包括以下子步骤：使用电子海图引擎创建切图软件，利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号以及进行存储；
所述的瓦片缓存步骤包括以下子步骤：当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
所述的电子海图显示步骤包括地理经纬度范围与瓦片行列号的转换子步骤、缩放子步骤、平移子步骤、瓦片无缝拼接子步骤；
所述的地理经纬度范围与瓦片行列号的转换子步骤包括：设地图切图的原点是（x0,y0），地图的瓦片大小是tileSize，地图屏幕上1像素代表的实际距离是resolution；则计算坐标点（x,y）所在的瓦片的行列号的公式如下：
col=floor((x0-x)/(tileSize*resolution))；
row=floor((y0-y)/(tileSize*resolution))；
式中，col表示行号，row表示列号，floor()表示向下取整；
所述的缩放子步骤包括以下子步骤：
S11：对电子海图进行包括拉框、双击或者滚动鼠标中任意一项或者多项的操作；
S12：针对拉框操作，获得屏幕的地理四角坐标参数；针对双击操作或滚动鼠标操作，获得包括屏幕的地理四角坐标以及当前显示的比例层级在内的参数；
S13：针对只有屏幕的地理四角坐标参数的情况，在瓦片请求时，首先算出与此屏幕四角坐标最吻合的地图级别是多少，然后重新算出此时的屏幕地理坐标以及相关的瓦片的真实范围；针对屏幕的地理四角坐标和当前显示的比例层级参数都有的情况，在瓦片请求时，会重新算出在此显示级别下屏幕的地理坐标，中心点是参数中屏幕四角坐标的中心点；
所述的平移子步骤包括拖拽平移子步骤和点击平移子步骤，所述的拖拽平移子步骤包括以下子步骤：
S21：当当鼠标触发mouseDown事件时，给全局变量flag赋值true，表示鼠标已经点下，记录下初始点；
S22：当鼠标触发mouseMove事件时，判断flag是否为true，如果是，调用平移公式，使图层出现移动，算出屏幕像素的移动mouseX和mouseY；
S23：当鼠标触发mouseUp事件时，判断屏幕地理范围加上移动的地理长度后，是否在整个瓦片请求的容差范围内，如果在的话不用触发瓦片请求；如果不在的话，则需触发瓦片请求，请求的参数即为目前的屏幕地理范围加上容差范围；
所述的点击平移子步骤包括以下子步骤：
S31：当鼠标触发mouseDown事件时，给全局变量isClick赋值true，表示鼠标已经点下，记录下初始点；
S32：当鼠标触发mouseMove事件时，则将此isClick参数赋值false；
S33：当鼠标触发mouseClick事件时，判断isClick是否为true，如果是true，则将地图平移到以初始点为中心的地方；
所述的瓦片无缝拼接子步骤包括以下子步骤：
S41：得到需要请求的瓦片；
S42：算出此地理范围对应的X轴和Y轴的瓦片数，左上角瓦片的行列号及屏幕坐标参数，其中，当前瓦片的屏幕坐标计算公式如下：
coord.x=offSetX+(clipX-fixedTileLeftTopNumX)*tileSize；
coord.y=offSetY+(clipY-fixedTileLeftTopNumY)*tileSize；
式中：offSetX、offSetY表示最左上角瓦片的屏幕坐标，clipX、clipY表示目前瓦片的行列号，fixedTileLeftTopNumY、fixedTileLeftTopNumY表示最左上角瓦片的行列号，coord表示目前瓦片的屏幕坐标；
S43：遍历X轴Y轴，换算出单个瓦片的URL，进行加载，挨个进行瓦拼接；
S44：屏幕显示整张电子海图。
所述的瓦片缓存步骤还包括一个子步骤：在全国多个节点采用CDN系统，通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
对所述的地图屏幕上1像素代表的实际距离resolution进行偏移补偿，公式如下：
resolution=scale*inch2centimeter/dpi；
式中，scale是地图比例尺，inch2centimeter为英寸转厘米的参数，dpi为1英寸所包含的像素。
在所述的步骤S2执行过程中，如果有其他图层或者功能需要监听到地图平移事件，抛出一个地图平移事件，抛出的参数设置为此时鼠标所在的地理坐标以及鼠标平移的地理长度，其中此时鼠标所在的地理坐标通过鼠标的屏幕坐标转换得到，鼠标平移的地理长度通过mouseX和mouseY转换得到。
所述的方法还包括一个即时通讯步骤：采用WebSocket技术，并结合电子海图在flash互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocketAPI，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。
基于浏览器的电子海图系统，包括：
电子瓦片海图分割器：利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号并存储；
瓦片缓存模块：用于当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
flash电子海图引擎：实现电子海图的显示，包括：
地理经纬度范围与瓦片行列号的转换子模块：用于将地理经纬度范围与瓦片行列号进行转换；
缩放子模块：用于实现包括拉框、双击、滚动鼠标在内的操作的电子海图的缩放；
平移子模块：用于实现包括拖拽平移和点击平移的平移操作；
瓦片无缝拼接子模块：在得到瓦片请求后实现瓦片的拼接与整张电子海图的显示。
所述的基于浏览器的电子海图系统还包括一个CDN子系统，所述的CDN子系统通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络实现，CDN子系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
所述的电子海图系统还包括一个即时通讯模块：采用WebSocket技术，并结合电子海图在flash的互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。
本发明的有益效果是：本发明实现了一种基于浏览器的电子海图技术：首先将利用瓦片地图金字塔模型产生出不同层级的瓦片，将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号以及按一定的方式进行存储；然后采用优秀的瓦片缓存技术，从而提供海图展示的速度，实现更好的用户体验；然后对于用于显示的电子海图引擎，利用地理经纬度范围与瓦片行列号的转换、缩放与平移、瓦片无缝连接，实现了电子海图在屏幕的浏览器上的快速显示。
附图说明
图1为本发明结构方框图。
具体实施方式
下面结合附图进一步详细描述本发明的技术方案：
基于浏览器的电子海图的实现方法，它包括电子海图分割步骤、瓦片缓存步骤和电子海图显示步骤；
所述的电子海图分割步骤包括以下子步骤：使用电子海图引擎创建切图软件，利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号以及进行存储；
所述的瓦片缓存步骤包括以下子步骤：当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
所述的电子海图显示步骤包括地理经纬度范围与瓦片行列号的转换子步骤、缩放子步骤、平移子步骤、瓦片无缝拼接子步骤；
所述的地理经纬度范围与瓦片行列号的转换子步骤包括：设地图切图的原点是（x0,y0），地图的瓦片大小是tileSize，地图屏幕上1像素代表的实际距离是resolution；则计算坐标点（x,y）所在的瓦片的行列号的公式如下：
col=floor((x0-x)/(tileSize*resolution))；
row=floor((y0-y)/(tileSize*resolution))；
式中，col表示行号，row表示列号，floor()表示向下取整；
所述的缩放子步骤包括以下子步骤：
S11：对电子海图进行包括拉框、双击或者滚动鼠标中任意一项或者多项的操作；
S12：针对拉框操作，获得屏幕的地理四角坐标参数；针对双击操作或滚动鼠标操作，获得包括屏幕的地理四角坐标以及当前显示的比例层级在内的参数；
S13：针对只有屏幕的地理四角坐标参数的情况，在瓦片请求时，首先算出与此屏幕四角坐标最吻合的地图级别是多少，然后重新算出此时的屏幕地理坐标以及相关的瓦片的真实范围；针对屏幕的地理四角坐标和当前显示的比例层级参数都有的情况，在瓦片请求时，会重新算出在此显示级别下屏幕的地理坐标，中心点是参数中屏幕四角坐标的中心点；
所述的平移子步骤包括拖拽平移子步骤和点击平移子步骤，所述的拖拽平移子步骤包括以下子步骤：
S21：当当鼠标触发mouseDown事件时，给全局变量flag赋值true，表示鼠标已经点下，记录下初始点；
S22：当鼠标触发mouseMove事件时，判断flag是否为true，如果是，调用平移公式，使图层出现移动，算出屏幕像素的移动mouseX和mouseY；
S23：当鼠标触发mouseUp事件时，判断屏幕地理范围加上移动的地理长度后，是否在整个瓦片请求的容差范围内，如果在的话不用触发瓦片请求；如果不在的话，则需触发瓦片请求，请求的参数即为目前的屏幕地理范围加上容差范围；
所述的点击平移子步骤包括以下子步骤：
S31：当鼠标触发mouseDown事件时，给全局变量isClick赋值true，表示鼠标已经点下，记录下初始点；
S32：当鼠标触发mouseMove事件时，则将此isClick参数赋值false；
S33：当鼠标触发mouseClick事件时，判断isClick是否为true，如果是true，则将地图平移到以初始点为中心的地方；
所述的瓦片无缝拼接子步骤包括以下子步骤：
S41：得到需要请求的瓦片；
S42：算出此地理范围对应的X轴和Y轴的瓦片数，左上角瓦片的行列号及屏幕坐标参数，其中，当前瓦片的屏幕坐标计算公式如下：
coord.x=offSetX+(clipX-fixedTileLeftTopNumX)*tileSize；
coord.y=offSetY+(clipY-fixedTileLeftTopNumY)*tileSize；
式中：offSetX、offSetY表示最左上角瓦片的屏幕坐标，clipX、clipY表示目前瓦片的行列号，fixedTileLeftTopNumY、fixedTileLeftTopNumY表示最左上角瓦片的行列号，coord表示目前瓦片的屏幕坐标；
S43：遍历X轴Y轴，换算出单个瓦片的URL，进行加载，挨个进行瓦拼接；
S44：屏幕显示整张电子海图。
所述的瓦片缓存步骤还包括一个子步骤：在全国多个节点采用CDN系统，通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
对所述的地图屏幕上1像素代表的实际距离resolution进行偏移补偿，公式如下：
resolution=scale*inch2centimeter/dpi；
式中，scale是地图比例尺，inch2centimeter为英寸转厘米的参数，dpi为1英寸所包含的像素。
在所述的步骤S2执行过程中，如果有其他图层或者功能需要监听到地图平移事件，抛出一个地图平移事件，抛出的参数设置为此时鼠标所在的地理坐标以及鼠标平移的地理长度，其中此时鼠标所在的地理坐标通过鼠标的屏幕坐标转换得到，鼠标平移的地理长度通过mouseX和mouseY转换得到。
现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。而比较新的技术去做轮询的效果是Comet–用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求。
所述的方法还包括一个即时通讯步骤：采用WebSocket技术，并结合电子海图在flash互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocketAPI，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。
如图1所示，基于浏览器的电子海图系统，包括：
电子瓦片海图分割器：利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号并存储；
瓦片缓存模块：用于当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
flash电子海图引擎：实现电子海图的显示，包括：
地理经纬度范围与瓦片行列号的转换子模块：用于将地理经纬度范围与瓦片行列号进行转换；
缩放子模块：用于实现包括拉框、双击、滚动鼠标在内的操作的电子海图的缩放；
平移子模块：用于实现包括拖拽平移和点击平移的平移操作；
瓦片无缝拼接子模块：在得到瓦片请求后实现瓦片的拼接与整张电子海图的显示。
所述的基于浏览器的电子海图系统还包括一个CDN子系统，所述的CDN子系统通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络实现，CDN子系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
所述的电子海图系统还包括一个即时通讯模块：采用WebSocket技术，并结合电子海图在flash的互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。

Claims (8)

1.基于浏览器的电子海图的实现方法，其特征在于：它包括电子海图分割步骤、瓦片缓存步骤和电子海图显示步骤；
所述的电子海图分割步骤包括以下子步骤：使用电子海图引擎创建切图软件，利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号以及进行存储；
所述的瓦片缓存步骤包括以下子步骤：当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
所述的电子海图显示步骤包括地理经纬度范围与瓦片行列号的转换子步骤、缩放子步骤、平移子步骤、瓦片无缝拼接子步骤；
所述的地理经纬度范围与瓦片行列号的转换子步骤包括：设地图切图的原点是（x0,y0），地图的瓦片大小是tileSize，地图屏幕上1像素代表的实际距离是resolution；则计算坐标点（x,y）所在的瓦片的行列号的公式如下：
col=floor((x0-x)/(tileSize*resolution))；
row=floor((y0-y)/(tileSize*resolution))；
式中，col表示行号，row表示列号，floor()表示向下取整；
所述的缩放子步骤包括以下子步骤：
S11：对电子海图进行包括拉框、双击或者滚动鼠标中任意一项或者多项的操作；
S12：针对拉框操作，获得屏幕的地理四角坐标参数；针对双击操作或滚动鼠标操作，获得包括屏幕的地理四角坐标以及当前显示的比例层级在内的参数；
S13：针对只有屏幕的地理四角坐标参数的情况，在瓦片请求时，首先算出与此屏幕四角坐标最吻合的地图级别是多少，然后重新算出此时的屏幕地理坐标以及相关的瓦片的真实范围；针对屏幕的地理四角坐标和当前显示的比例层级参数都有的情况，在瓦片请求时，会重新算出在此显示级别下屏幕的地理坐标，中心点是参数中屏幕四角坐标的中心点；
所述的平移子步骤包括拖拽平移子步骤和点击平移子步骤，所述的拖拽平移子步骤包括以下子步骤：
S21：当当鼠标触发mouseDown事件时，给全局变量flag赋值true，表示鼠标已经点下，记录下初始点；
S22：当鼠标触发mouseMove事件时，判断flag是否为true，如果是，调用平移公式，使图层出现移动，算出屏幕像素的移动mouseX和mouseY；
S23：当鼠标触发mouseUp事件时，判断屏幕地理范围加上移动的地理长度后，是否在整个瓦片请求的容差范围内，如果在的话不用触发瓦片请求；如果不在的话，则需触发瓦片请求，请求的参数即为目前的屏幕地理范围加上容差范围；
所述的点击平移子步骤包括以下子步骤：
S31：当鼠标触发mouseDown事件时，给全局变量isClick赋值true，表示鼠标已经点下，记录下初始点；
S32：当鼠标触发mouseMove事件时，则将此isClick参数赋值false；
S33：当鼠标触发mouseClick事件时，判断isClick是否为true，如果是true，则将地图平移到以初始点为中心的地方；
所述的瓦片无缝拼接子步骤包括以下子步骤：
S41：得到需要请求的瓦片；
S42：算出此地理范围对应的X轴和Y轴的瓦片数，左上角瓦片的行列号及屏幕坐标参数，其中，当前瓦片的屏幕坐标计算公式如下：
coord.x=offSetX+(clipX-fixedTileLeftTopNumX)*tileSize；
coord.y=offSetY+(clipY-fixedTileLeftTopNumY)*tileSize；
式中：offSetX、offSetY表示最左上角瓦片的屏幕坐标，clipX、clipY表示目前瓦片的行列号，fixedTileLeftTopNumY、fixedTileLeftTopNumY表示最左上角瓦片的行列号，coord表示目前瓦片的屏幕坐标；
S43：遍历X轴Y轴，换算出单个瓦片的URL，进行加载，挨个进行瓦拼接；
S44：屏幕显示整张电子海图。
2.根据权利要求1所述的基于浏览器的电子海图的实现方法，其特征在于：所述的瓦片缓存步骤还包括一个子步骤：在全国多个节点采用CDN系统，通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
3.根据权利要求1所述的基于浏览器的电子海图的实现方法，其特征在于：对所述的地图屏幕上1像素代表的实际距离resolution进行偏移补偿，公式如下：
resolution=scale*inch2centimeter/dpi；
式中，scale是地图比例尺，inch2centimeter为英寸转厘米的参数，dpi为1英寸所包含的像素。
4.根据权利要求1所述的基于浏览器的电子海图的实现方法，其特征在于：在所述的步骤S2执行过程中，如果有其他图层或者功能需要监听到地图平移事件，抛出一个地图平移事件，抛出的参数设置为此时鼠标所在的地理坐标以及鼠标平移的地理长度，其中此时鼠标所在的地理坐标通过鼠标的屏幕坐标转换得到，鼠标平移的地理长度通过mouseX和mouseY转换得到。
5.根据权利要求1所述的基于浏览器的电子海图的实现方法，其特征在于：所述的方法还包括一个即时通讯步骤：采用WebSocket技术，并结合电子海图在flash互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。
6.基于浏览器的电子海图系统，其特征在于：包括：
电子瓦片海图分割器：利用瓦片地图金字塔模型产生出不同层级的瓦片：将不同区域的海图切成一张张瓦片地图，并对这些瓦片进行编号并存储；
瓦片缓存模块：用于当使用者通过浏览器进行浏览，请求调用一张新瓦片时，瓦片缓存模块拦截所述的调用，查看缓存中是否有这些瓦片，如果缓存中能找到则直接返回，如果缓存中找不到再调用服务器上的瓦片；
flash电子海图引擎：实现电子海图的显示，包括：
地理经纬度范围与瓦片行列号的转换子模块：用于将地理经纬度范围与瓦片行列号进行转换；
缩放子模块：用于实现包括拉框、双击、滚动鼠标在内的操作的电子海图的缩放；
平移子模块：用于实现包括拖拽平移和点击平移的平移操作；
瓦片无缝拼接子模块：在得到瓦片请求后实现瓦片的拼接与整张电子海图的显示。
7.根据权利要求6所述的基于浏览器的电子海图系统，其特征在于：还包括一个CDN子系统，所述的CDN子系统通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络实现，CDN子系统实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，提高用户访问网站的响应速度。
8.根据权利要求6所述的基于浏览器的电子海图系统，其特征在于：所述的电子海图系统还包括一个即时通讯模块：采用WebSocket技术，并结合电子海图在flash的互相访问，达到网页电子海图应用于桌面电子海图应用同等的效果；对于WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接进行数据互相传送。
CN201610667115.5A 2016-08-15 2016-08-15 基于浏览器的电子海图实现方法及系统 Pending CN106250062A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610667115.5A CN106250062A (zh) 2016-08-15 2016-08-15 基于浏览器的电子海图实现方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610667115.5A CN106250062A (zh) 2016-08-15 2016-08-15 基于浏览器的电子海图实现方法及系统

Publications (1)

Publication Number Publication Date
CN106250062A true CN106250062A (zh) 2016-12-21

Family

ID=57591950

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610667115.5A Pending CN106250062A (zh) 2016-08-15 2016-08-15 基于浏览器的电子海图实现方法及系统

Country Status (1)

Country Link
CN (1) CN106250062A (zh)

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106708942A (zh) * 2016-11-22 2017-05-24 北京锐安科技有限公司 一种地图引擎实现方法及装置
CN106991153A (zh) * 2017-03-29 2017-07-28 武大吉奥信息技术有限公司 一种基于Web客户端的第三方地图瓦片服务接入方法及系统
CN107481195A (zh) * 2017-08-24 2017-12-15 山东慧行天下文化传媒有限公司 基于多景点区域智能截图生成电子地图的方法及装置
CN108052642A (zh) * 2017-12-22 2018-05-18 重庆邮电大学 基于瓦片技术的电子海图显示方法
CN108279402A (zh) * 2017-12-18 2018-07-13 中国电子科技集团公司第二十八研究所 基于wmts的浏览器端雷达视频显示方法
CN108664619A (zh) * 2018-05-14 2018-10-16 江西理工大学 一种类瓦片技术的海量线划地形图本原存储与调度方法
CN109325083A (zh) * 2018-08-03 2019-02-12 江苏联旺信息科技有限公司 航飞影像图的加载方法、航飞影像图加载软件和航拍器
CN109831701A (zh) * 2019-01-28 2019-05-31 四川长虹电器股份有限公司 数字电视设备浏览器以及跨页面系统事件的扩展方法
CN110716704A (zh) * 2019-09-18 2020-01-21 广州魅视电子科技有限公司 基于web的拼接大屏幕显示布局处理方法
CN110992246A (zh) * 2019-11-22 2020-04-10 广州医药信息科技有限公司 影像的金字塔分层切片方法
CN113094454A (zh) * 2021-02-22 2021-07-09 北京房江湖科技有限公司 一种地图数据搜索方法及装置
CN114661839A (zh) * 2022-01-12 2022-06-24 中国人民解放军32200部队 一种基于瓦片的轨迹地图的展示方法、装置、介质和设备
WO2024113594A1 (zh) * 2022-12-02 2024-06-06 智道网联科技(北京)有限公司 有效行驶区域的快速确定方法、装置及电子设备、存储介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8711181B1 (en) * 2011-11-16 2014-04-29 Google Inc. Pre-fetching map data using variable map tile radius

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8711181B1 (en) * 2011-11-16 2014-04-29 Google Inc. Pre-fetching map data using variable map tile radius

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
李晓晖: "从底层谈，WebGIS原理、设计、实现", 《博客园》 *
聂涛: "基于Web方式的电子海图显示与应用", 《中国优秀硕士学位论文全文数据库 工程科技Ⅱ辑》 *
闵东龙: "基于HTML5的矢量电子海图服务研究", 《中国优秀硕士学位论文全文数据库 工程科技Ⅱ辑》 *

Cited By (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106708942A (zh) * 2016-11-22 2017-05-24 北京锐安科技有限公司 一种地图引擎实现方法及装置
CN106991153A (zh) * 2017-03-29 2017-07-28 武大吉奥信息技术有限公司 一种基于Web客户端的第三方地图瓦片服务接入方法及系统
CN107481195A (zh) * 2017-08-24 2017-12-15 山东慧行天下文化传媒有限公司 基于多景点区域智能截图生成电子地图的方法及装置
CN108279402A (zh) * 2017-12-18 2018-07-13 中国电子科技集团公司第二十八研究所 基于wmts的浏览器端雷达视频显示方法
CN108052642A (zh) * 2017-12-22 2018-05-18 重庆邮电大学 基于瓦片技术的电子海图显示方法
CN108664619A (zh) * 2018-05-14 2018-10-16 江西理工大学 一种类瓦片技术的海量线划地形图本原存储与调度方法
CN109325083A (zh) * 2018-08-03 2019-02-12 江苏联旺信息科技有限公司 航飞影像图的加载方法、航飞影像图加载软件和航拍器
CN109831701B (zh) * 2019-01-28 2021-12-21 四川长虹电器股份有限公司 数字电视设备浏览器以及跨页面系统事件的扩展方法
CN109831701A (zh) * 2019-01-28 2019-05-31 四川长虹电器股份有限公司 数字电视设备浏览器以及跨页面系统事件的扩展方法
CN110716704A (zh) * 2019-09-18 2020-01-21 广州魅视电子科技有限公司 基于web的拼接大屏幕显示布局处理方法
CN110992246A (zh) * 2019-11-22 2020-04-10 广州医药信息科技有限公司 影像的金字塔分层切片方法
CN110992246B (zh) * 2019-11-22 2021-07-13 广州医药信息科技有限公司 影像的金字塔分层切片方法
CN113094454A (zh) * 2021-02-22 2021-07-09 北京房江湖科技有限公司 一种地图数据搜索方法及装置
CN114661839A (zh) * 2022-01-12 2022-06-24 中国人民解放军32200部队 一种基于瓦片的轨迹地图的展示方法、装置、介质和设备
CN114661839B (zh) * 2022-01-12 2024-02-27 中国人民解放军32200部队 一种基于瓦片的轨迹地图的展示方法、装置、介质和设备
WO2024113594A1 (zh) * 2022-12-02 2024-06-06 智道网联科技(北京)有限公司 有效行驶区域的快速确定方法、装置及电子设备、存储介质

Similar Documents

Publication Publication Date Title
CN106250062A (zh) 基于浏览器的电子海图实现方法及系统
EP0845124B1 (en) Computer system for identifying local resources and method therefor
Aulov et al. Human sensor networks for improved modeling of natural disasters
CN105574102B (zh) 一种电子地图数据加载的方法及装置
US11449898B2 (en) Method, device, and storage medium for recommending point of interest for location-based service
CN110704770B (zh) 一种基于WebGIS环境下扩展瓦片地图的显示方法及装置
CN105389167A (zh) 一种Web端实时船舶目标显示方法
CN103955955A (zh) 一种电子地图信息处理方法及装置
CN114625992B (zh) 一种百兆级气象网络数据的可视化方法及系统
JP4925094B2 (ja) 分割地図画像を組み合わせた地図データを送信するプロキシサーバ及びプログラム
CN110825761A (zh) 一种面向船岸分布式电子海图系统的海图数据布置与更新方法
CN106330814A (zh) 展示目标对象的详情信息的方法及装置
CN104766260A (zh) 客运信息显示方法及装置
CN114500428A (zh) 导航分享方法及装置、电子设备、存储介质、程序产品
KR20030006015A (ko) 지리 정보 시스템 및 이제 적합한 지리 정보 제공 방법
CN108279402B (zh) 基于wmts的浏览器端雷达视频显示方法
CN107766436A (zh) 一种地址关联数据处理方法、用户终端和服务器
CN108540534A (zh) 一种终端全屏区域的确定方法及装置
Hu et al. Bringing live AIS information on the web sea charts by using ajax
CN105760476A (zh) 一种基于b/s结构的洪水风险图出图系统及方法
CN112527437A (zh) 自定义元素静态图层生成方法
Suárez et al. Managing and 3D visualization of real-time big geo-referenced data from Las Palmas port through a flexible open source computer architecture
Kim Web-based geovisualization system of oceanographic information using dynamic particles and html5
CN111966876A (zh) 一种基于NodeJs定时生成灾情地图的方法
JP5906135B2 (ja) 地図画像生成装置及びプログラム

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20161221