OpenLayers6入门，OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片

已于 2024-03-05 10:15:48 修改
阅读量472 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript OpenLayers 懒加载瓦片 图层延迟加载 事件触发加载瓦片
于 2023-08-08 23:31:56 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.youkuaiyun.com/eguid/article/details/132178502
版权
本文介绍了如何在OpenLayers6中实现地图初始化时不加载瓦片，通过事件触发来懒加载地图瓦片图层。内容包括依赖安装、在Vue中使用OpenLayers、功能实现步骤以及代码示例，展示了如何在地图被点击时加载和清除图层源。

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

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

前言

本章讲解怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。
openlayers

二、依赖和使用

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

                

                
                
        

        

    

  


        

            

                

                

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

        


    


                



	

		

			

				
					
Openlayers实战：加载WMTS数据

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-21
					
					821
					
				

			

		

		

			
				
Web Map Tile Service(WMTS) 是 2010 年开发的相对较新的标准 Web 服务。此类Web 服务的理念类似于 WMS。但它是为 256 x 256 像素大小的 2D 平铺模式设计的协议使用 WMTS 的好处之一是可以在不同比例的服务器端地图切片上预染，并在客户端缓存.因此，这会导致更快的交付、更少的带宽以及更好的快速加载用户体验。在Openlayers实战中，我们用外部的一个服务器发布的WMTS来做示例演示，加载出瓦片数据。

			
		

	



                

            
              



	

		

			

				
					
221：vue+openlayers 加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-14
					
					967
					
				

			

		

		

			
				
第221个本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的WMS数据，其核心目标是在地图上显示瓦片，点击瓦片层，可以获取到瓦片上的信息。https://xiaozhuanlan.com/topic/8026571943 这是另外的一种方法。

			
		

	



              


  
              

                


	

		

			

				
					
vue-openlayers中初始地图加载

				
			

			

				

					猪猪侠的博客
				

				

					02-25
					
					630
					
				

			

		

		

			
				
Vue引入openlayers的命令
npm install ol

template>
  <div id="map" style="width: 100%;height: 100%">

  </div>
</template>

<script>
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import {XYZ} from "ol/source";
impo

			
		

	





	

		

			

				
					
vue+openlayer加载wmts

				
			

			

				

					
				

				

					06-28
					
					832
					
				

			

		

		

			
				
官网：WMTShttps://openlayers.org/en/latest/examples/wmts.html

			
		

	



		

			
		



	

		

			

				
					
openlayer加载geoserver发布的wms服务

				
			

			

				

					A_ta_and_run的博客
				

				

					05-10
					
					1361
					
				

			

		

		

			
				
CQL_FILTER= 过滤语句（sql）将上面的源添加到图层里，如果项目里图层过多的话可以设置zindex，params: {‘LAYERS’: ‘服务图层名字’,url后面可以跟sql_filter进行条件过滤。1.引入瓦片图层和瓦片wms服务源。3. 将图层添加到map。

			
		

	





	

		

			

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

				
			

			

				

					04-29
				

			

		

		

			
				
2. 初始化地图对象：接着，使用OpenLayers创建地图实例，指定地图容器、投影类型（通常使用 EPSG:3857，也称为 Web Mercator）和初始视图。  ```javascript  var map = new ol.Map({  target: 'map',  view: new ol....

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers懒加载瓦片，点击事件后才开始加载瓦片，初始化地图时不加载瓦片

				
			

			

				

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

				

					03-12
					
					319
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7怎么在地图初始化时不加载瓦片，通过事件触发才开始懒加载地图瓦片图层。

			
		

	





	

		

			

				
					
openlayers加载本地离线地图瓦片（重新发2018-10-23）

				
			

			

				

					10-24
				

			

		

		

			
				
7. **地图初始化**：在JavaScript中，你需要创建一个`Map`对象，指定容器元素（例如一个具有ID的div），并添加刚才创建的瓦片图层到地图实例中。这样，当页面加载时，OpenLayers会自动加载本地瓦片数据并显示地图。 ...

			
		

	





	

		

			

				
					
使用openlayers加载离线地图实例

				
			

			

				

					10-06
				

			

		

		

			
				
3. **初始化地图**：在JavaScript中，使用OpenLayers的Map类创建地图实例。指定地图容器的ID，设置地图的中心点和初始分辨率。例如：  ```javascript  var map = new ol.Map({  target: 'map',  view: new ol.View({...

			
		

	





	

		

			

				
					
Vue.js与OpenLayers：加载Geoserver瓦片WMS数据并使用getFeatureInfoUrl获取瓦片数据信息

				
			

			

				

					laugh666的博客
				

				

					08-16
					
					486
					
				

			

		

		

			
				
本文介绍了如何利用Vue.js和OpenLayers实现加载Geoserver瓦片WMS数据，并通过点击地图获取瓦片数据的详细信息。当然，除了本文提到的功能，OpenLayers还有许多其他功能和扩展，你可以参考官方文档深入学习。本文将介绍如何利用Vue.js和OpenLayers实现加载Geoserver瓦片WMS数据，并通过getFeatureInfoUrl获取瓦片数据的详细信息。获取瓦片数据信息的过程。方法根据给定的坐标和分辨率生成了一个URL，该URL将用于获取瓦片数据的详细信息。

			
		

	





	

		

			

				
					
197: vue+openlayers 预加载preload瓦片地图，减少过渡期间的空白区域

				
			

			

				

					大剑师兰特的GIS世界
				

				

					01-10
					
					1078
					
				

			

		

		

			
				
第197个本示例的目的是介绍演示如何在vue+openlayers项目中演示瓦片预加载和没有预加载的不同状态。当我们平移和缩放地图时，经常会遇到过渡期间的空白区域(因为内容正在加载)，过一会儿，切片图像才出现了。，将预载的值设置为当前可见层的较低分辨率水平的数量。采用了Infinity，这样所有较低的分辨率级别都会被考虑在内。也可以采用Infinity，这样所有较低的分辨率级别都会被考虑在内。

			
		

	





	

		

			

				
					
openlayers瓦片的使用

				
			

			

				

					h360583690的博客
				

				

					06-22
					
					1088
					
				

			

		

		

			
				
openlayers瓦片的使用

			
		

	





	

		

			

				
					
源码分析之Openlayers图层篇概览

					
最新发布

				
			

			

				

					Jinuss的博客
				

				

					12-05
					
					740
					
				

			

		

		

			
				
全网最全的一张图介绍Openlayers的图层篇的重点结构

			
		

	





	

		

			

				
					
OpenLayers之多源数据加载二：瓦片地图原理

				
			

			

				

					不睡觉的怪叔叔的博客
				

				

					08-07
					
					7049
					
				

			

		

		

			
				
目录

一、瓦片地图简介

二、LOD

三、瓦片计算

3.1、切片方式

3.2、瓦片数量计算

3.3、瓦片坐标系

四、分辨率

4.1、墨卡托投影坐标系下的分辨率

4.2、OpenLayers默认使用的分辨率

一、瓦片地图简介

    瓦片地图（切片地图）源于一种大地图解决方案，针对一整块非常大的地图进行切片，分成很多相同大小的小块地图，在用户访问的时候，再一块一块小地图加载，拼接...

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers加载离线xyz瓦片地图并显示离线鹰眼控件

				
			

			

				

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

				

					11-08
					
					1194
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers加载离线xyz瓦片地图图层，并显示离线xyz瓦片的鹰眼控件。OpenLayers入门，OpenLayers地图鹰眼控件OpenLayers入门，OpenLayers加载离线瓦片xyz地图，vue项目如何使用离线瓦片。

			
		

	





	

		

			

				
					
OpenLayers6学习笔记（三）—— 瓦片地图基础知识

				
			

			

				

					weixin_44030304的博客
				

				

					11-04
					
					2694
					
				

			

		

		

			
				
一. 数据加载

OpenLayers的地图数据通过图层（Layer）进行组织渲染，通过数据源（Source）设置具体的地图数据来源。Layer可以看作渲染地图的容器，具体的数据需要通过Source设置，Source和Layer是一对一的关系，有一个Source必然需要有一个Layer。
地图数据根据数据源（Source）可分为Image、Tile、Vector三大类型的数据源，对应设置到地图图层（Layer）的Image、Tile、Vector三大类型的图层上，其中矢量图层Vector通过样式（Style

			
		

	





	

		

			

				
					
openlayer 瓦片缩放空白的问题

				
			

			

				

					qq_39330397的博客
				

				

					06-15
					
					634
					
				

			

		

		

			
				
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。

			
		

	





	

		

			

				
					
Openlayers动态刷新wms服务图层

				
			

			

				

					wwf1225的博客
				

				

					06-29
					
					2130
					
				

			

		

		

			
				
wms - OpenLayers not refreshing a layer - Geographic Information Systems Stack Exchange最近开发一个基于openlayers的webgis在线编辑系统。openlayers加载wms服务作为资源底图展示。前端负责要素绘制，然后保存到后台数据库对应的表中，每次创建完成一次资源，都需要重新刷新wms服务，更新资源底图。示例说明如下图碰到的问题主要是被百度搜索引擎坑了，最近科学上网欠费了，只能使用百度，搜索了一波网上的方案，归类

			
		

	





	

		

			

				
					
openlayers请求地图瓦片超时的问题解决

				
			

			

				

					范天缘的博客
				

				

					07-19
					
					476
					
				

			

		

		

			
				
只能显示地图的放大缩小控件和底部文字。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值