OpenLayers6入门，OpenLayers加载船讯网航海地图

已于 2024-02-20 09:41:42 修改
阅读量626 收藏 2
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： vue.js 前端 OpenLayers 船讯网 海图 航海地图
于 2023-08-17 17:50:46 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132346350
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 15 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文档介绍了如何使用OpenLayers6在vue项目中加载船讯网的航海地图，详细解析了航海图的瓦片规则，并提供了代码实现和测试效果演示。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

本章使用OpenLayers6实现加载船讯网航海地图。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖

                

                
                
        

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
59.（leaflet之家）leaflet动态画线

				
			

			

				

					GIS之家家长
				

				

					05-19
					
					488
					
				

			

		

		

			
				
听老人家说：多看美女会长寿
 leaflet之家总目录（订阅之前建议先查看该博客）

文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。
效果如下所示：

                    
                    
                  
下面献上完整代码，代码重要位置会做相应解释
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <ti

			
		

	



                

              
                



	

		

			

				
					
VUE+OpenLayer动态显示船舶位置信息

				
			

			

				

					github_31946551的博客
				

				

					05-23
					
					628
					
				

			

		

		

			
				
特此来总结一下开发心得。使用的是openlayer组件库来实现海图的展示，底图为离线瓦片地图。获取后端数据，判断坐标物是否已存在，存在则更新位置信息、无需新增图层（首次为新增图层。目标：实现前端定时发请求给后端，依据后端返回数据，在地图中展示物体实时坐标信息。目前项目中需要使用海图来展示船舶位置信息。

			
		

	



                


  
              

                


	

		

			

				
					
使用Leaflet进行船舶航行警告区域绘制实战

					
最新发布

				
			

			

				

					weixin_37082777的博客
				

				

					08-14
					
					26
					
				

			

		

		

			
				
目录前言一、坐标格式转换1、数据初认识2、将区域分割成多个点3、数据转换4、数据转换调用二、WebGIS展示空间位置信息1、定义底图2、Polygon的可视化3、实际效果三、总结前言通常而言，海事部门如海事局，通常会在所述的管辖区域内进行航行管控。比如会在海面上进行采砂作业、或者是拖带作业、人员落水、沉船碍...

			
		

	





	

		

			

				
					
OpenLayers 3 入门教程

				
			

			

				

					10-31
				

			

		

		

			
				
OpenLayers 3 入门教程，40页左右。
OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。

			
		

	



		

			
		



	

		

			

				
					
openlayers3入门教程

				
			

			

				

					weixin_30404405的博客
				

				

					12-21
					
					131
					
				

			

		

		

			
				
openlayers3入门教程
摘要
   OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScri...

			
		

	





	

		

			

				
					
OpenLayers3基础教程——OL3 介绍control

				
			

			

				

					weixin_30586257的博客
				

				

					07-05
					
					195
					
				

			

		

		

			
				
概述：
本文讲述的是Ol3中的control的介绍和应用。


OL2和OL3 control比较：
相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control：


Ol2的control


Ol3的control
相比较Ol2，OL3保留了mouseposition，scaleline，zoom，zoomslider，而将很多东西...

			
		

	





	

		

			

				
					
openlayers入门教程

					
热门推荐

				
			

			

				

					weixin_43239880的博客
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
openlayers基础入门到实战平铺图层。对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织。图像图层。服务器呈现的映像，可用于任意范围和分辨率。(3)ol.layer.Vector()很常用矢量图层。矢量平铺图层。图层用于客户端呈现矢量平铺数据。

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers加载船讯网航海地图瓦片到地图上

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					02-20
					
					296
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上加载船讯网航海地图瓦片到地图上的功能。适用于海运等海洋相关行业使用。

			
		

	





	

		

			

				
					
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					10-31
					
					3147
					
				

			

		

		

			
				
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。

> 本专栏源码是由OpenLayers结合Vue框架编写。
> 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。

			
		

	





	

		

			

				
					
OpenLayers 3 入门教程完整版

				
			

			

				

					04-26
				

			

		

		

			
				
OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。

			
		

	





	

		

			

				
					
web电子海图开发包，OpenLayers 4 开发包，

				
			

			

				

					06-10
				

			

		

		

			
				
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。
 查看演示请前往 航易电子海图开发：http://www.sailxy.com

			
		

	





	

		

			

				
					
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					05-29
					
					816
					
				

			

		

		

			
				
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

			
		

	





	

		

			

				
					
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					05-21
					
					9203
					
				

			

		

		

			
				
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。

			
		

	





	

		

			

				
					
Openlayers 入门教程（一）：应该如何学习 Openlayers

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-15
					
					3984
					
				

			

		

		

			
				
关于如何学好Openlayers，主要着手于两个方面，一是熟悉了解其基本的API，学习参数的设置、触发的方法，常用的函数。 另外一个是观摩仿写别人的写的示例，从中受益。`**

			
		

	





	

		

			

				
					
OpenLayers入门（一）

				
			

			

				

					jcxxs_xm的博客
				

				

					01-07
					
					8388
					
				

			

		

		

			
				
Openlayers入门教程OpenLayers入门（一）新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
OpenLayers入门（一）
	大家好，由于最近开始做webgis方面的东西，所以对openlayers需要了解学

			
		

	





	

		

			

				
					
OpenLayers快速入门指南，OpenLayers7官方文档翻译，OpenLayers官方中文文档，OpenLayers官方中文手册

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					08-28
					
					2614
					
				

			

		

		

			
				
OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值