Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形

已于 2024-05-27 23:25:22 修改
阅读量327 收藏 1
点赞数 5
分类专栏： Vue+OpenLayers7入门到实战 # Vue+OpenLayers7入门 文章标签： vue.js 前端 javascript OpenLayers 地图图形绘制 画线 画圆
于 2024-03-26 16:36:32 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/137050511
版权
Vue+OpenLayers7入门到实战 同时被 2 个专栏收录
69 篇文章 17 订阅 ¥89.90 ¥99.00
订阅专栏
Vue+OpenLayers7入门
61 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏
本文详细介绍了如何在Vue项目中结合OpenLayers7实现地图上的图形绘制功能，包括绘制线段、圆形和多边形。文章提供依赖安装、代码实现及测试效果展示，帮助读者快速掌握这一技术。
摘要由CSDN通过智能技术生成

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

前言

本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。

注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档

本章只实现了绘制图形，在此基础上扩展了拖拽编辑修改图形的功能请参考：Vue+OpenLayers7入门到实战：OpenLayers实现在地图上拖拽编辑修改绘制图形

Vue+OpenLayers7入门到实战

二、依赖和使用


                

                
                
        

        

        

    




        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形

				
			

			

				

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

				

					04-14
					
					2023
					
				

			

		

		

			
				
通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。

			
		

	



                

              
                



	

		

			

				
					
8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）

				
			

			

				

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

				

					07-01
					
					5342
					
				

			

		

		

			
				
本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。最后，我们提供了清空绘制和退出绘制模式的操作。

			
		

	



                


  
              

                


	

		

			

				
					
openlayers3画线功能例子

				
			

			

				

					01-03
				

			

		

		

			
				
openlayers3 画线，画扇形图，   能正常运行的小例子，

			
		

	





	

		

			

				
					
openlayer 点线面的绘制

				
			

			

				

					在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
				

				

					06-27
					
					209
					
				

			

		

		

			
				
我的标注是一个点击去绘制几何要素的自定义功能，本质是绘制点线面；绘制结束，把绘制的几何要素的经纬度进行回填，然后表单提交，然后“添加我的标注”成功。也对所有的标注进行页面展示。

			
		

	



		

			
		



	

		

			

				
					
openlayer 绘制线

				
			

			

				

					大家好，我是+V
				

				

					03-25
					
					1644
					
				

			

		

		

			
				
openlayer 绘制线

上一小节说了一下openlayer绘制坐标标记点，这一次说一下绘制线，其实也很简单。

	// 初始化地图
      initMap() {
        map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          

			
		

	





	

		

			

				
					
初始化一个简单的openlayers地图

				
			

			

				

					qq_45089709的博客
				

				

					01-20
					
					361
					
				

			

		

		

			
				
初始化一个简单的openlayers地图

			
		

	





	

		

			

				
					
openlayers 绘制动态迁徙线、曲线

				
			

			

				

					q1025387665a的博客
				

				

					06-23
					
					4259
					
				

			

		

		

			
				
前言：本来懒得写这个博客，实在深感无聊，没啥事情做，出篇博客让大家看看。文章会尽可能简短。掉帧属录屏效果，尚未测试过性能，因为这个可以看自己调节。以下为一条贝塞尔曲线分了180段的效果描述。
颜色属于瞎编乱造，只为示例，不为效果负责。
1、先生成起点与终点的表示点。这个很重要，原因在于：openlayers 会智能的检测图层中的数据源（source）是否有需要更新的features，如果你没有设置features，或者不在视图内，是不会触发渲染、因此，也就不会触发我们需要的prerender事件。
2、监听

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers实现在地图上拖拽编辑修改绘制图形

				
			

			

				

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

				

					05-27
					
					204
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上拖拽编辑修改绘制图形。《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。

			
		

	





	

		

			

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

				
			

			

				

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

				

					02-02
					
					552
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图

				
			

			

				

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

				

					01-24
					
					508
					
				

			

		

		

			
				
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。

			
		

	





	

		

			

				
					
openlayers在线绘制

				
			

			

				

					08-24
				

			

		

		

			
				
在线绘制折线，多边形，并且返回相应的绘制后坐标，进行3857或4326坐标转换

			
		

	





	

		

			

				
					
openlayers3各种元素图形绘制

				
			

			

				

					11-02
				

			

		

		

			
				
openlayers3 各种特殊图形绘制：进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上

				
			

			

				

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

				

					04-25
					
					545
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上的功能。前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。

			
		

	





	

		

			

				
					
vue3+openlayers画点、画线

				
			

			

				

					RainHg的博客
				

				

					07-07
					
					4337
					
				

			

		

		

			
				
vue3使用openlayers画点、线

			
		

	





	

		

			

				
					
OpenLayers绘图

				
			

			

				

					qq_38425662的博客
				

				

					12-13
					
					317
					
				

			

		

		

			
				
Draw Features
     
    
    
    
        /**
         * 绘图工具 点 线 圆 面
         */
    






    $(function(){
        init();
    });
    var map;
    var draw;
    var raster =

			
		

	





	

		

			

				
					
openlayers,绘制线生成控制点，拖动锚点和控制点来编辑线

					
最新发布

				
			

			

				

					weixin_43301869的博客
				

				

					08-09
					
					430
					
				

			

		

		

			
				
【代码】openlayers,绘制线生成控制点，拖动锚点和控制点来编辑线。

			
		

	





	

		

			

				
					
openLayers绘制点、线、面

				
			

			

				

					Raccon_的博客
				

				

					10-24
					
					1986
					
				

			

		

		

			
				
笔记

			
		

	





	

		

			

				
					
openlayers 绘图功能

				
			

			

				

					qq_25064691的博客
				

				

					04-24
					
					569
					
				

			

		

		

			
				
效果

代码
if (value === 'Square') {
            value = 'Circle';
            //正方形图形（圆）
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
        }
        else  if (value=='Circle'){
            geometryFunction = ol.interaction.Dr

			
		

	





	

		

			

				
					
vue+openlayers: 编辑图形(放缩、平移、变形、旋转),停止编辑

				
			

			

				

					11-18
				

			

		

		

			
				
Vue OpenLayers是一个基于Vue.js和OpenLayers的地图编辑器插件，可以用来编辑地图上的图形。要编辑图形，可以通过放缩、平移、变形、旋转等操作来修改图形的形状和位置。首先，我们需要在Vue组件中引入Vue OpenLayers，并在页面上添加地图容器。

然后，我们可以使用Vue OpenLayers提供的工具和方法来对图形进行编辑。比如，可以通过调用放缩工具来放大或缩小图形的大小，或者调用平移工具来移动图形的位置。同时，还可以使用变形工具来修改图形的形状，或者调用旋转工具来旋转图形的方向。

当图形编辑完成后，我们可以通过调用停止编辑的方法来结束编辑状态，这样就可以保存修改后的图形信息或者进行其他操作了。在停止编辑后，图形就不能再进行进一步的编辑操作了，但可以继续进行其他的地图操作。

总之，通过Vue OpenLayers插件，我们可以方便地对地图上的图形进行编辑，包括放缩、平移、变形、旋转等操作，并且可以随时停止编辑，非常方便实用。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值