OpenLayers6入门，OpenLayers加载天地图

已于 2024-02-20 09:42:47 修改
阅读量1.4k 收藏 3
点赞数 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 个专栏收录
132 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 ¥69.90 ¥99.00
订阅专栏
本文介绍了如何使用OpenLayers6在Vue项目中加载天地图，包括申请天地图key、加载xyz格式的天地图URL，如普通地图、卫星影像图和纯标记图。详细讲述了卫星图和普通地图的Url规则，并提供了代码实现和测试效果演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

前言

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

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

二、依赖和使用

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

                

                
                
        

        

    

  


        

            

                

                

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

        


    



                



	

		

			

				
					
openlayers加载天地图

				
			

			

				

					m0_51431448的博客
				

				

					02-04
					
					2080
					
				

			

		

		

			
				
vue集成openlayers，加载天地图

			
		

	



                

            
              



	

		

			

				
					
Openlayers实战：加载天地图

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-14
					
					1208
					
				

			

		

		

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

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers集成天地图服务开发指南

				
			

			

				

					GISer help GISer
				

				

					03-22
					
					997
					
				

			

		

		

			
				
以下是一份面向GIS初学者的OpenLayers开发详细教程，从专业GIS开发角度解析代码实现：


：包含地图控件、图层等可视化样式
：OpenLayers核心功能库
推荐使用固定版本号（如v7.3.0）确保稳定性

1.2 地图容器设置


使用视口单位(vh/vw)实现响应式布局
保留5%边距防止滚动条遮挡
建议添加实现水平居中

二、地图核心配置解析
2.1 地图实例化


：绑定HTML元素的ID
：图层加载顺序遵循数组索引（先添加的在下层）
：地图的空间参照系与初始状态

2.2 坐标系与投影转

			
		

	





	

		

			

				
					
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加载天地图示例

					
最新发布

				
			

			

				

					gitblog_06792的博客
				

				

					04-21
					
					393
					
				

			

		

		

			
				
OpenLayers加载天地图示例

    
        
            【下载地址】OpenLayers加载天地图示例
            本开源项目展示了如何使用OpenLayers加载天地图瓦片，为用户提供了一个完整的地图展示与操作示例。通过详细的代码和配置，您可以轻松将天地图作为底图集成到OpenLayers中，并在此基础上进行个性化开发。无论您是地图开发新手还是经验丰...

			
		

	





	

		

			

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

				
			

			

				

					
				

				

					06-09
					
					368
					
				

			

		

		

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

效果：

地图

影像

地形

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

			
		

	





	

		

			

				
					
OpenLayers加载天地图

				
			

			

				

					Moon Star
				

				

					10-17
					
					2690
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers7加载天地图

				
			

			

				

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

				

					02-02
					
					783
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上加载天地图.天地图瓦片访问需要先到天地图申请key。天地图官网链接本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）

			
		

	





	

		

			

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

				
			

			

				

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

				

					10-31
					
					4194
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					05-29
					
					1487
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					非科班Java出身GISer的博客
				

				

					02-24
					
					3599
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers5加载天地图.zip

				
			

			

				

					06-21
				

			

		

		

			
				
此代码采用开源的openlayers5,显示天地图的注记图层，天地图路网图层，欢迎下载使用。

			
		

	





	

		

			

				
					
openlayers5加载天地图影像.zip

				
			

			

				

					06-23
				

			

		

		

			
				
使用openlayers5加载天地图影像，可以供参考使用，希望可以改进代码，重新使用。

			
		

	





	

		

			

				
					
openlayer6加载天地图.html

				
			

			

				

					08-02
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					记录生活点滴
				

				

					01-06
					
					1万+
					
				

			

		

		

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




			
		

	





	

		

			

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

				
			

			

				

					liu2004051957的博客
				

				

					11-22
					
					4850
					
				

			

		

		

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

			
		

	





	

		

			

				
					
OpenLayer加载天地图

				
			

			

				

					阿叁博客
				

				

					06-15
					
					327
					
				

			

		

		

			
				
登录天地图的官方网站,创建一浏览器应用，获取其中的键值，

（gu）










			
		

	





	

		

			

				
					
Openlayer - vue中加载天地图（入门篇）

				
			

			

				

					人与人之间最小的差别是智商，最大的差别是坚持。
				

				

					08-15
					
					568
					
				

			

		

		

			
				
基于Vue脚手架构建的，按照教程天地图就可以显示出来了。

			
		

	





	

		

			

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

				
			

			

				

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

				

					01-31
					
					567
					
				

			

		

		

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

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值