OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制梯形

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

#前端 #javascript #vue.js #OpenLayers #地图绘制图形 #绘制梯形 #鼠标拖拽绘制梯形

本文详细介绍了如何在OpenLayers6中通过鼠标拖拽方式绘制梯形，包括依赖安装、vue集成、功能实现及代码展示，帮助读者轻松掌握这一功能。

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章讲解如何使用OpenLayers实现鼠标拖拽方式绘制梯形。点击鼠标拖拽梯形，松开鼠标后绘制完成。
openlayers

二、依赖和使用

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

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制矩形（拖拽方式绘制长方形和正方形）

				
			

			

				

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

				

					04-11
					
					908
					
				

			

		

		

			
				
本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。

			
		

	



                

            
              



	

		

			

				
					
OpenLayers6入门，OpenLayers地图鹰眼控件使用

				
			

			

				

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

				

					04-13
					
					2148
					
				

			

		

		

			
				
OpenLayers想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。

			
		

	



              


  
              

                


	

		

			

				
					
移动端openlayers封装绘制Draw-随手画-矩形-圆

				
			

			

				

					厚积薄发.
				

				

					07-17
					
					610
					
				

			

		

		

			
				
如果直接使用官方示例的教程，在移动端绘制没法按压拖拽绘制，百度半天也是没有找到，解决了做一个笔记。

			
		

	





	

		

			

				
					
openLayers使用笔记（绘制几何图形）

				
			

			

				

					一天无聊
				

				

					05-26
					
					1281
					
				

			

		

		

			
				
【代码】openLayers使用笔记（绘制几何图形）

			
		

	



		

			
		



	

		

			

				
					
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制空心圆环

				
			

			

				

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

				

					04-19
					
					783
					
				

			

		

		

			
				
本章讲解OpenLayers特殊图形绘制，也即使用OpenLayers实现鼠标拖拽方式绘制空心圆环的功能。

			
		

	





	

		

			

				
					
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制

				
			

			

				

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

				

					04-22
					
					376
					
				

			

		

		

			
				
本章讲解如何使用OpenLayers在地图上实现鼠标拖拽方式绘制环形（四分之一圆环）的功能。

			
		

	





	

		

			

				
					
OpenLayers6实战，OpenLayers实现鼠标拖拽绘制三角形，OpenLayers自定义绘制特殊图形

				
			

			

				

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

				

					04-02
					
					557
					
				

			

		

		

			
				
本章讲解使用OpenLayers如何绘制三角形。OpenLayers本身是可以通过多边形绘制来绘制自行绘制三角形的，但是这种绘制方式是通过鼠标点击每个点来实现线条链接的，不支持固定的三角形这种特殊图形绘制的。因此本章我们通过自定义OpenLayers的绘制事件，来让OpenLayers支持鼠标拖拽方式绘制三角形，让绘制三角形变得更加方便。

			
		

	





	

		

			

				
					
OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制椭圆

				
			

			

				

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

				

					04-12
					
					670
					
				

			

		

		

			
				
本周讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制椭圆的功能。

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers6地图缩放控件、比例尺控件和鼠标经纬度位置

				
			

			

				

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

				

					04-13
					
					1615
					
				

			

		

		

			
				
使用OpenLayers在地图上添加地图缩放控件，地图比例尺控件和鼠标经纬度位置展示控件。

			
		

	





	

		

			

				
					
OpenLayers 6基于Windows的开发环境配置

				
			

			

				

					liu2004051957的博客
				

				

					11-17
					
					1793
					
				

			

		

		

			
				
使用OpenLayers 6开发WebGIS应用，需要先配置其开发环境。OpenLayers 6提供了两种开发方式.一种是传统开发方式，即载下相应的JS库和CSS样式库，直接在页面中引用即可；另一种是使用NodeJS的开发方式。

			
		

	





	

		

			

				
					
OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例

				
			

			

				

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

				

					03-15
					
					620
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers创建自定义控件。以创建一个地图复位控件为例，讲解如何创建自定义控件来调整地图为默认的中心点、缩放等级和方向。

			
		

	





	

		

			

				
					
【学习笔记之Openlayers3】要素绘制篇（第三篇）

				
			

			

				

					凌往昔
				

				

					01-07
					
					5880
					
				

			

		

		

			
				
直接以项目实例来进行讲解要素绘制 
需要用到的openlayers3中的ol.interaction.Draw 类。这是openlayers3提供的内置交互方式，除了这个用来绘制的类，还有其他的交互类，如：1.按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转，对应的交互类为ol.interactio

			
		

	





	

		

			

				
					
openlayers版本更新差别

				
			

			

				

					原在路上的博客。
				

				

					08-01
					
					1538
					
				

			

		

		

			
				
openlayers版本更新差别

			
		

	





	

		

			

				
					
Node.js 后端 CORS 跨域问题终极解决指南

				
			

			

				

					weixin_45680024的博客
				

				

					12-25
					
					1096
					
				

			

		

		

			
				
node.js后端跨域问题收录

			
		

	





	

		

			

				
					
vue v-for 列表渲染指令注意

				
			

			

				

					KLW75
				

				

					12-27
					
					229
					
				

			

		

		

			
				
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。

			
		

	





	

		

			

				
					
微前端系列：核心概念、价值与应用场景

				
			

			

				

					李刚的学习专栏
				

				

					12-30
					
					635
					
				

			

		

		

			
				
微前端是一种将大型Web应用拆分为多个独立子应用的技术架构，核心思想是"分而治之"。它允许不同团队使用不同技术栈（如Vue、React）独立开发、测试和部署子应用，通过主应用进行整合，为用户提供统一体验。微前端主要解决团队协作阻塞、技术栈锁定、系统升级困难等问题，适用于大型中后台系统、多团队协作项目和遗留系统重构等场景。其核心能力包括子应用的动态加载/卸载、独立运行隔离、路由状态保持以及应用间通信机制。微前端通过JS/CSS隔离、沙箱技术等手段确保系统稳定性，同时支持渐进式重构，是复杂前端系统的有效架构方案

			
		

	





	

		

			

				
					
在移动端使用 WebRTC (Android/iOS)

				
			

			

				

					yk_18的博客
				

				

					12-27
					
					538
					
				

			

		

		

			
				
移动端 WebRTC 挑战:1. 硬件差异- 不同设备性能差异大- 摄像头/麦克风规格不同2. 网络环境- WiFi/4G/5G 切换- 网络不稳定3. 电量消耗- 编解码耗电- 网络传输耗电4. 后台限制- iOS 后台限制严格- Android 后台服务限制5. 权限管理- 摄像头/麦克风权限- 后台运行权限平台SDK特点Android原生性能好iOS原生性能好Flutter跨平台跨平台恭喜你完成了 WebRTC 技术专栏的全部学习!Part 1。

			
		

	





	

		

			

				
					
前端 HTML 入门（标签）

					
最新发布

				
			

			

				

					0.0的博客
				

				

					12-31
					
					425
					
				

			

		

		

			
				
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它不是编程语言，而是标记语言，通过一系列标签描述网页的结构和内容。

			
		

	





	

		

			

				
					
vue前端面试指南

				
			

			

				

					chaopingyao的博客
				

				

					12-30
					
					503
					
				

			

		

		

			
				
生命周期钩子是 Vue 组件在不同阶段执行的函数。1、 创建期间的生命周期函数：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。：此时已经完成了模板的编译，但是还没有挂载到页面中。mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示，DOM 已渲染。2、运行期间的生命周期函数。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

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

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值