OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡

已于 2024-05-09 14:10:47 修改
阅读量1.4k 收藏 4
点赞数 2
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： webgl javascript vue.js OpenLayers geojson
于 2023-07-24 17:45:18 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/131901451
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门
69 篇文章 92 订阅 ¥69.90 ¥99.00
订阅专栏

返回目录：OpenLayers6入门目录

前言

在上一章中《OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，但是如果加载的Feature要素数量特别多，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。

openlayers

二、依赖和使用

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

                

                
                
        

        

        

    




        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题

				
			

			

				

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

				

					04-13
					
					2950
					
				

			

		

		

			
				
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。

			
		

	



                

              
                



	

		

			

				
					
Openlayers扩展H5绘制10W+数据

				
			

			

				

					08-14
				

			

		

		

			
				
NULL
博文链接：https://jjxliu306.iteye.com/blog/2317352

			
		

	



                


  
              

                


	

		

			

				
					
openlayers海量点渲染（2w点左右）

				
			

			

				

					我灰灰凭啥输
				

				

					05-27
					
					6240
					
				

			

		

		

			
				
效果图



此处用到了openlayers的webgl属性

	import GeoJSON from 'ol/format/GeoJSON';						//用来加载矢量数据
	import WebGLPointsLayer from 'ol/layer/WebGLPoints';			//使用webgl渲染


初始化矢量图层，从文件加载点的地理信息

	this.vectorSource = new Vector({
      url: 'http://localhost:9528/data.ge

			
		

	





	

		

			

				
					
vue3 + openlayers---使用GeoJSON的方式加载点线面

				
			

			

				

					QDxin_xyz的博客
				

				

					05-31
					
					262
					
				

			

		

		

			
				
【代码】vue3 + openlayers---使用GeoJSON的方式加载点线面。

			
		

	



		

			
		



	

		

			

				
					
SuperMap GIS基础产品云GIS FAQ集锦（2）

				
			

			

				

					SuperMap技术控
				

				

					05-06
					
					2762
					
				

			

		

		

			
				
2.将iServer当成tomcat来作为服务开机自启动，参考：https://blog.csdn.net/gybshen/article/details/79564613	  Windows系统下：参考iserver帮助文档中的“以 Windows 系统服务的方式启动 iServer/iPortal/iEdge”：http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/Appendix/WindowsService.htm。

			
		

	





	

		

			

				
					
解决浏览器不能加载本地geojson数据，openlayers

				
			

			

				

					rainbowday_的博客
				

				

					11-29
					
					1970
					
				

			

		

		

			
				
openlayers加载geojson数据不显示

控制台报错

Access to XMLHttpRequest at 'file:///E:/open_layers/modular/countries.geojson' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension,

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers如何加载百万级大数据量GeoJson点要素数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡

				
			

			

				

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

				

					05-09
					
					283
					
				

			

		

		

			
				
在上一章中《OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，但是如果加载的Feature要素数量特别多，浏览器就会很卡，所以需要用到webgl图层进行加载。本章讲解一下如何使用webgl图层叠加海量GeoJson点要素数据加载的功能。

使用npm安装依赖



使用Yarn安装依赖


vue中如何使用OpenLaye

			
		

	





	

		

			

				
					
OpenLayers入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上

				
			

			

				

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

				

					07-28
					
					548
					
				

			

		

		

			
				
前面两章已经讲了OpenLayers如何加载GeoJson数据到矢量图层和webgl图层上，前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。

			
		

	





	

		

			

				
					
基于openlayers和canvas绘制海量数据的实现

				
			

			

				

					01-26
				

			

		

		

			
				
 - **分块渲染**：由于浏览器内存有限，不能一次性加载所有数据，因此通常会将海量数据分成多个小块，只加载可视区域内的数据进行渲染。  - **动态加载**：当用户滚动或平移地图时，旧的数据块被卸载，新的数据块被...

			
		

	





	

		

			

				
					
2015-OpenLayers-3-入门教程详细版_openlayers_

				
			

			

				

					09-29
				

			

		

		

			
				
2. **图层叠加**: 将多个图层叠加到同一地图上，展示不同类型的地理信息。  3. **矢量图层**: 加载GeoJSON数据，创建交互式点、线、面图层，并实现点击事件监听。  4. **动态加载数据**: 根据地图的可视范围动态请求...

			
		

	





	

		

			

				
					
Cesium，OpenLayers的支持.zip

				
			

			

				

					01-11
				

			

		

		

			
				
OpenLayers的特点在于其灵活性和可定制性，允许开发者轻松添加地图图层、叠加矢量数据、实现缩放、平移等交互功能。它还支持多种数据源，如GeoJSON、TopoJSON等，为WebGIS应用提供了丰富的功能。  将**Cesium**与**...

			
		

	





	

		

			

				
					
Openlayers 3.xx js包 及入门详细教程

				
			

			

				

					01-24
				

			

		

		

			
				
这个库提供了丰富的功能，包括地图的加载、图层管理、数据可视化、地理空间操作等，使得开发者能够轻松地集成地理信息系统（GIS）功能到他们的网站或Web应用中。2015年发布的OpenLayers 3.x版本引入了许多新特性和...

			
		

	





	

		

			

				
					
OpenLayers3基本入门教程.docx

				
			

			

				

					06-10
				

			

		

		

			
				
**OpenLayers 3基本入门教程**  OpenLayers 3是一个强大的JavaScript库，用于在网页上创建交互式的地图应用。它提供了一种灵活的方式来显示各种地图数据，包括来自不同服务的瓦片地图、矢量数据和地理信息系统（GIS...

			
		

	





	

		

			

				
					
体渲染原理及WebGL实现【Volume Rendering】

				
			

			

				

					新缸中之脑
				

				

					08-12
					
					2400
					
				

			

		

		

			
				
体渲染（Volume Rendering）是NeRF神经场辐射AI模型的基础，与传统渲染使用三角形来显示 3D 图形不同，体渲染使用其他方法，例如体积光线投射 (Volume Ray Casting)。本文介绍体渲染的原理并提供Three.js实现代码，源代码可以从下载。推荐：用快速搭建可编程3D场景。

			
		

	





	

		

			

				
					
更新商品前端接口编写

				
			

			

				

					weixin_55639995的博客
				

				

					07-12
					
					423
					
				

			

		

		

			
				
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。

			
		

	





	

		

			

				
					
Sortable.js板块拖拽示例

				
			

			

				

					w11111xxxl的博客
				

				

					07-14
					
					780
					
				

			

		

		

			
				
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。

			
		

	





	

		

			

				
					
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单

					
最新发布

				
			

			

				

					uu0216的博客
				

				

					07-16
					
					814
					
				

			

		

		

			
				
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。

			
		

	





	

		

			

				
					
vue 自定义滚动条同步拖动（移动端）

				
			

			

				

					u014206461的博客
				

				

					07-12
					
					230
					
				

			

		

		

			
				
vue 自定义滚动条同步拖动（移动端）

			
		

	





	

		

			

				
					
openlayers加载海量数据

				
			

			

				

					10-14
				

			

		

		

			
				
OpenLayers是一个强大的地理信息系统（GIS）库，用于在Web浏览器中展示地图数据。当加载海量数据时，可以采取一些优化策略来提高性能和用户体验。

首先，可以使用数据分块加载的方法。将海量数据划分为多个较小的区域，并按需加载每个区域的数据。这可以减少一次性加载所有数据所需的时间，并避免因加载大量数据而导致浏览器崩溃或运行缓慢。

其次，使用矢量数据代替栅格数据。矢量数据可以以更小的文件大小呈现复杂的地图特征，相比之下，栅格数据可能会导致较大的文件和较长的加载时间。

另外，可以根据用户的视口来动态加载数据。根据用户当前的地图视图，只加载可见区域的数据，而延迟加载其他区域的数据。这样可以减少非必要的数据加载和降低对网络带宽的需求。

还可以利用缓存机制。一旦数据被加载到客户端，将其缓存在本地，以便在之后的操作中再次使用。这样可以减少对服务器的请求次数，提高访问速度。

最后，使用数据压缩和优化技术。对数据进行压缩可以减小文件大小，从而减少加载时间。此外，使用一些优化算法，如空间索引和数据剖分，可以提高数据查询和渲染的效率。

综上所述，OpenLayers加载海量数据时，可以采取多种策略来优化性能，提高用户体验。通过数据分块加载、使用矢量数据、动态加载、缓存机制和数据压缩等方法，可以有效地处理大量的地理信息数据。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值