OpenLayers6入门，OpenLayers加载天地图

已于 2024-02-20 09:42:47 修改
阅读量1k 收藏 2
点赞数 5
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6入门 OpenLayers6一本通 文章标签： 前端 vue.js javascript OpenLayers 天地图
于 2023-11-10 16:29:13 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/134335555
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了如何使用OpenLayers6在Vue项目中加载天地图，包括申请天地图key、加载xyz格式的天地图URL，如普通地图、卫星影像图和纯标记图。详细讲述了卫星图和普通地图的Url规则，并提供了代码实现和测试效果演示。
摘要由CSDN通过智能技术生成

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

前言

本章讲解如何使用OpenLayers6加载天地图，需要先到天地图申请key。天地图官网链接

本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
openlayers

二、依赖和使用

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

                

                
                
        

        

        

    




        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    5
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Openlayers 教程 01 - 初始化（helloworld ）以及加载天地图底图示例

				
			

			

				

					linzi19900517的博客
				

				

					02-24
					
					2325
					
				

			

		

		

			
				
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。

			
		

	



                

              
                



	

		

			

				
					
openlayers 加载天地图示例

				
			

			

				

					02-24
				

			

		

		

			
				
本示例将详细讲解如何使用OpenLayers来加载并操作天地图。  首先，我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成：地图容器、投影、图层和控制。地图容器是地图显示的地方，...

			
		

	



                


  
              

                


	

		

			

				
					
openlayers学习——1、openlayers加载天地图

				
			

			

				

					记录生活点滴
				

				

					01-06
					
					1万+
					
				

			

		

		

			
				
openlayers加载天地图
前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法




			
		

	





	

		

			

				
					
openlayers 使用WMTS和XYZ加载天地图切片服务

					
最新发布

				
			

			

				

					无心使然云中漫步
				

				

					06-17
					
					1116
					
				

			

		

		

			
				
WMTS：是一种由Open Geospatial Consortium (OGC)制定的开放标准，它定义了在Web上发布和使用预渲染地图瓦片的标准方法。这种标准化确保了不同厂商和平台之间的互操作性。XYZ：是一种更偏向于自定义的地图瓦片服务格式，通常用于OpenStreetMap和其他提供标准XYZ URL格式的地图服务。它没有像WMTS那样的严格标准，但提供了一种灵活的方式来提供地图瓦片。

			
		

	



		

			
		



	

		

			

				
					
Openlayers实战：加载天地图

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-14
					
					910
					
				

			

		

		

			
				
国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户。其属于国家队的，有一定的权威性。在Openlayers中如何加载天地图呢，方法很简单，用XYZ的形式。它分为底图和标注，可以灵活的做配合使用。

			
		

	





	

		

			

				
					
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）

					
热门推荐

				
			

			

				

					全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
				

				

					06-11
					
					1万+
					
				

			

		

		

			
				
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。

			
		

	





	

		

			

				
					
openlayers加载天地图

				
			

			

				

					m0_51431448的博客
				

				

					02-04
					
					1659
					
				

			

		

		

			
				
vue集成openlayers，加载天地图

			
		

	





	

		

			

				
					
OpenLayers加载天地图

				
			

			

				

					Moon Star
				

				

					10-17
					
					2563
					
				

			

		

		

			
				
Vue中使用OpenLayers加载天地图图层。网站中创建应用

			
		

	





	

		

			

				
					
Openlayers+天地图在页面上显示（初始化）（使用vue3）

				
			

			

				

					m0_57816620的博客
				

				

					10-18
					
					2071
					
				

			

		

		

			
				
使用openlayers+天地图完成初始化页面的显示

			
		

	





	

		

			

				
					
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果

				
			

			

				

					liu2004051957的博客
				

				

					11-22
					
					4107
					
				

			

		

		

			
				
OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果。

			
		

	





	

		

			

				
					
openlayers5加载天地图影像.zip

				
			

			

				

					06-23
				

			

		

		

			
				
本文将深入探讨如何使用OpenLayers 5加载天地图影像，这是一个中国本土的、提供丰富地理信息的在线地图服务。  首先，了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统，它提供了多种地图服务，包括影像...

			
		

	





	

		

			

				
					
使用openlayers加载离线地图实例

				
			

			

				

					10-06
				

			

		

		

			
				
本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用。  首先，理解OpenLayers的核心概念至关重要。OpenLayers是一个开源的JavaScript库，它允许开发者在网页中嵌入地图，支持多种地图...

			
		

	





	

		

			

				
					
openlayers加载瓦片地图并手动标记坐标点

				
			

			

				

					04-29
				

			

		

		

			
				
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。  一、OpenLayers 瓦片地图  瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...

			
		

	





	

		

			

				
					
openlayer6加载天地图.html

				
			

			

				

					08-02
				

			

		

		

			
				
openlayers6.* 加载在线天地图示例，换上自己的tk，直接可以运行

			
		

	





	

		

			

				
					
（转）Openlayers 2.X加载天地图

				
			

			

				

					
				

				

					06-09
					
					293
					
				

			

		

		

			
				
http://blog.csdn.net/gisshixisheng/article/details/44621923
概述：
在前面的章节，讲到了Arcgis for js加载天地图，在本节讲述如何在Openlayers 2.X的版本中加载天地图，并添加自己的wms服务。

效果：

地图

影像

地形

去掉本地wms
实现：
1、天地图服务
在天地...

			
		

	





	

		

			

				
					
openlayers：实现加载天地图（附完整源码）

				
			

			

				

					希望我的博客，能帮上你解决学习中工作中所遇到的问题
				

				

					01-31
					
					400
					
				

			

		

		

			
				
openlayers：实现加载天地图（附完整源码）

			
		

	





	

		

			

				
					
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍

				
			

			

				

					weixin_73005544的博客
				

				

					09-24
					
					4769
					
				

			

		

		

			
				
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍

			
		

	





	

		

			

				
					
openlayers切换加载天地图和高德地图

				
			

			

				

					ssy001128的博客
				

				

					06-09
					
					1150
					
				

			

		

		

			
				
openlayers切换加载天地图和高德地图

			
		

	





	

		

			

				
					
【WebGIS起步】（2）、npm启动openlayers项目加载显示天地图

				
			

			

				

					xiaobai_1900的博客
				

				

					10-13
					
					714
					
				

			

		

		

			
				
快速启动openlayers项目，并实现天地图的加载与显示。

			
		

	





	

		

			

				
					
OpenLayers3入门教程：地图加载与控件配置

				
			

			

				

					
				

			

		

		

			
				
"OpenLayers3的学习笔记，记录了关于GIS中OpenLayers3的基本概念、地图加载方式、控件使用以及各种数据源类型。"  OpenLayers3（简称OL3）是一个强大的JavaScript库，用于在Web上创建交互式地图应用。它允许开发者...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值