Vue+OpenLayers7入门到实战：OpenLayers加载wkt格式数据，OpenLayers解析wkt格式的要素数据并渲染到地图上

最新推荐文章于 2024-12-12 13:41:52 发布
原创 最新推荐文章于 2024-12-12 13:41:52 发布 · 505 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #GIS #OpenLayers #wkt格式数据

本文介绍了如何在Vue项目中利用OpenLayers7加载和解析WKT（Well-Known Text）格式的点、线、面数据，并将其渲染到地图上。通过代码实现和演示测试，展示了在Vue中集成OpenLayers7的步骤，帮助读者快速理解和应用。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上加载并解析wkt格式数据，以及渲染wkt格式的要素数据到地图上的功能。
使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。

wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》.

Vue+OpenLayers7入门到实战

二、依赖和使用

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

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
Openlayers实战：加载WKT文件

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-19
					
					635
					
				

			

		

		

			
				
在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载WKT文件。WKT格式是一种文本格式，用于描述二维和三维几何对象的空间特征。WKT是“Well-Known Text”的缩写，是一种开放的国际标准，由Open Geospatial Consortium（OGC）定义和维护。WKT格式通常用于在计算机系统之间交换空间数据，例如在GIS（地理信息系统）软件和数据库之间。

			
		

	



                

            
              



	

		

			

				
					
Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据

				
			

			

				

					非科班Java出身GISer的博客
				

				

					03-01
					
					3611
					
				

			

		

		

			
				
WebGIS 开发中，对于数据量不是很大的场景，可以直接从数据库读取数据，通过创建点线面要素（Feature），然后添加到矢量图层（vectorLayer）中，在地图上展示。添加点线面的方法可以封装一下，方便使用。...

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers6入门，读取wkt格式数据，OpenLayers解析并显示wkt格式的要素数据

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					09-11
					
					913
					
				

			

		

		

			
				
本章介绍OpenLayers如何解析并显示wkt格式的要素数据。使用Point（点）、（LINESTRING）线，和（POLYGON）多变形的wkt数据进行演示。wkt介绍请参考博主另一篇文章《GIS入门，WKT格式详解》

			
		

	





	

		

			

				
					
openlayers渲染wkt数据

				
			

			

				

					jimjiayu
				

				

					09-15
					
					945
					
				

			

		

		

			
				
openlayers渲染wkt数据

			
		

	



		

			
		



	

		

			

				
					
加载wkt就如此简单 -来自openlayers

				
			

			

				

					zw3413的专栏
				

				

					12-29
					
					3172
					
				

			

		

		

			
				
一个简单的加载wkt到地图的示例，代码来自openlayers官网。


<!DOCTYPE html>
<html>
  <head>
    <title>WKT</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战目录，OpenLayers7中文文档，OpenLayers7中文手册，OpenLayers7中文教程，OpenLayers7文档pdf

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					03-04
					
					3516
					
				

			

		

		

			
				
本篇作为《Vue+OpenLayers7入门到实战》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers7开发。

			
		

	





	

		

			

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

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					10-31
					
					4933
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门专栏目录，OpenLayers7中文文档，OpenLayers7中文手册api，OpenLayers7中文教程

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					04-17
					
					987
					
				

			

		

		

			
				
本篇作为《Vue+OpenLayers7入门教程》所有文章的二合一汇总目录，方便查找。本专栏源码是由OpenLayers7.x版本结合Vue框架编写。本专栏基本上每章都有详细的源代码和运行示例以供参考，且保证每章代码都可以正常运行，非常适合入门读者从零开始学习。本专栏从Vue搭建脚手架到如何引入OpenLayers7依赖的每一步详细新手教程，再到通过各种简单的入门案例带领大家快速上手Vue+OpenLayers7开发。

			
		

	





	

		

			

				
					
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					04-23
					
					2131
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers：实现渲染WKT数据（附完整源码）

				
			

			

				

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

				

					02-12
					
					287
					
				

			

		

		

			
				
openlayers：实现渲染WKT数据（附完整源码）

			
		

	





	

		

			

				
					
使用Vue和OpenLayers读取WKT数据并显示图形

				
			

			

				

					TechNovaX的博客
				

				

					09-28
					
					512
					
				

			

		

		

			
				
这里的示例代码只展示了一个点（POINT）类型的图形，你可以根据实际需求修改和扩展。最后，我们创建了一个矢量图层，并将其添加到地图上。在本文中，我们将介绍如何使用Vue和OpenLayers库来读取WKT（Well-Known Text）数据并在Web界面上显示图形。至此，我们已经成功使用Vue和OpenLayers读取WKT数据并在Web界面上显示图形。在开始之前，确保你已经安装了Vue和OpenLayers，并创建了一个新的Vue项目。在这里，我们引入了之前创建的Map组件，并在模板中直接使用它。

			
		

	





	

		

			

				
					
openlayers处理后台发送的GeoJSON或WKT字符串

				
			

			

				

					weixin_42547014的博客
				

				

					10-23
					
					1396
					
				

			

		

		

			
				
【处理WKT格式字符串】
var splitfeature = new ol.format.WKT().readFeature(('WKT字符串'), {
    dataProjection: 'EPSG:4326',   //目标坐标系
    featureProjection: 'EPSG:4326' //当前坐标系
});

source.addFeatures(splitfeature);

var vectorLayer = new ol.layer.Vector({source: sourc

			
		

	





	

		

			

				
					
OpenLayer 将WKT转换为Feature要素

				
			

			

				

					西柚2015地信小白GISer
				

				

					01-14
					
					1049
					
				

			

		

		

			
				
通常前后端geometry交互都是通过WKT完成的，前端一般使用后台返回的WKT来进行数据渲染。

OpenLayer将WKT转换为Feature需要进行以下步骤:


	如下图引入ol/format/WKT~WKT
	


使用方法readFeature(source,opt_options)


使用方法
source: WKT字符串

opt_options: 从上步骤图片可以看出主要是设置要素数据的投影


...

			
		

	





	

		

			

				
					
Vue + Openlayers入门教程（一）：WMS、WFS、WKT、WMTS、GeoJSON、天地图加载与GeoServer安装、发布图层

				
			

			

				

					菜鸟的博客
				

				

					06-29
					
					1499
					
				

			

		

		

			
				
介绍了Geoserver的安装、图层发布与openlayers加载WMS、WFS、WKT、WMTS、GeoJSON、天地图

			
		

	





	

		

			

				
					
055：vue+leaflet 上传WKT文件，在地图上显示图形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					02-12
					
					937
					
				

			

		

		

			
				
第055个本示例的目的是介绍演示如何在vue+leaflet中加载WKT文件，将图形显示在地图上。WKT(Well-known text)是一种文本标记语言,可以表示的几何对象包括：点，线，多边形，TIN（不规则三角网）及多面体。可以通过几何集合的方式来表示不同维度的几何对象。

			
		

	





	

		

			

				
					
Openlayers中Feature与WKT之间的转换，Feature坐标系的转换 WKT与GEOJSON转换

				
			

			

				

					Light_10的博客
				

				

					07-17
					
					693
					
				

			

		

		

			
				
【代码】Openlayers中Feature与WKT之间的转换，Feature坐标系的转换。

			
		

	





	

		

			

				
					
meethigher-基于openlayers的wkt绘制展示功能

				
			

			

				

					meethigher的博客
				

				

					05-22
					
					1525
					
				

			

		

		

			
				
平时经常跟经纬度打交道，绘制经纬度目前常用的三个结构：geojson、wkt、wkb。这篇文章简单记录下，实现wkt绘制展示的过程。

			
		

	





	

		

			

				
					
23.在 Vue 3 中使用 OpenLayers 读取 WKT 数据并显示图形

					
最新发布

				
			

			

				

					小彭的博客
				

				

					12-12
					
					1307
					
				

			

		

		

			
				
在 GIS（地理信息系统）领域，WKT（Well-Known Text）是一种用于表示几何数据的文本格式。结合 OpenLayers 和 Vue 3，可以轻松将 WKT 数据转换为图形，并展示在地图上。WKT 数据的基础知识。在 Vue 3 中集成 OpenLayers。读取 WKT 数据并显示到地图上的完整实现。WKT 是一种开放的文本格式，用于描述几何对象，例如点（Point）、线（LineString）、多边形（Polygon）等。表示坐标为(30, 10)的一个点。

			
		

	





	

		

			

				
					
Terraformer WKT转换工具：地理信息处理利器

				
			

			

				

					
				

			

		

		

			
				
在实际应用中，Terraformer可以结合其他GIS库，如Leaflet、OpenLayers、Mapbox等，以及JavaScript的前端框架如React、Vue、Angular等，构建具有地图显示和地理空间数据分析功能的Web应用。此外，它也能被用于服务器...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值