OpenLayers6实战，OpenLayers鼠标拖拽方式绘制半圆环形（半圆扇形）

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

#前端 #javascript #vue.js #OpenLayers #特殊图形绘制 #绘制半圆环形 #磁铁形状绘制

本文介绍了如何在OpenLayers中利用鼠标拖拽方式绘制半圆环形，即磁铁形状。内容包括依赖安装、在Vue项目中的使用、功能实现的步骤及代码示例，详细解释了通过计算内弧和外弧来连接形成半圆环的过程。

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

前言

本章讲解如何使用OpenLayers特殊图形绘制，通过鼠标拖拽方式来绘制出半圆环形（半圆扇形）的功能，效果像磁铁一样的半圆弧。

上一章中我们以及实现了四分之一圆环形的特殊图形绘制《OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制》，本章在上一章章基础上修改而成。

openlayers

二、依赖和使用

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

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值

				
			

			

				

					大剑师兰特的GIS世界
				

				

					09-07
					
					1633
					
				

			

		

		

			
				
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。

			
		

	



                

            
              



	

		

			

				
					
OpenLayers6特殊图形绘制教程目录汇总文档，使用OpenLayers画点、线、曲线、多边形、圆形、半圆、椭圆、圆环、环形扇形、三角形、矩形、平行四边形、梯形、菱形、五角星、六角形和箭头等

				
			

			

				

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

				

					04-12
					
					1131
					
				

			

		

		

			
				
本章用于汇总OpenLayers地图中各种特殊图形绘制系列汇总目录。内容包含：点、线、多边形、圆形、半圆、四分之一圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、正方形、长方形、平行四边形、梯形、菱形、五角星、六角形（六芒星）以及箭头等等特殊图形。

			
		

	



              


  
              

                


	

		

			

				
					
openlayers 在地图上绘制三角形、矩形、扇形、圆形、半圆、空心圆环等图形

				
			

			

				

					sea9528的博客
				

				

					12-04
					
					4902
					
				

			

		

		

			
				
Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。

			
		

	





	

		

			

				
					
Vue+Openlayers 绘制一个简单的弧线

				
			

			

				

					tefuir_w的博客
				

				

					05-08
					
					1677
					
				

			

		

		

			
				
vue + openlayers 绘制简单的弧线

			
		

	



		

			
		



	

		

			

				
					
openlayers画轨迹

				
			

			

				

					12-29
				

			

		

		

			
				
openlayers画轨迹功能，实现动态回访

			
		

	





	

		

			

				
					
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程

				
			

			

				

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

				

					07-31
					
					2581
					
				

			

		

		

			
				
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。

			
		

	





	

		

			

				
					
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总

				
			

			

				

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

				

					05-29
					
					1836
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					10-31
					
					4931
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
openlayer 绘制扇形

				
			

			

				

					“跟他人学，和自己比”
				

				

					06-02
					
					2073
					
				

			

		

		

			
				
我比较懒，就不废话了，直接上代码！包我就不复制了，根据官网提供的API自己引用吧！openlayers API地址创建地图

			
		

	





	

		

			

				
					
OpenLayers画点、画圆、画线方法

					
热门推荐

				
			

			

				

					qq_44220795的博客
				

				

					03-03
					
					1万+
					
				

			

		

		

			
				
文章目录准备工作项目搭建画地图画圆更改Style画点画线
准备工作
项目搭建
创建Vue项目
vue create OpenLayers 

安装openlayers包，在package,.json中添加
"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "ol": "^6.4.3" 👈添加这个
  },

命令行安装
npm i 

画地图
导入要用的包
impo

			
		

	





	

		

			

				
					
Openlayers实现图形绘制

				
			

			

				

					10-14
				

			

		

		

			
				
主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
OpenGL实现贝塞尔曲线或曲面

				
			

			

				

					08-19
				

			

		

		

			
				
主要为大家详细介绍了OpenGL实现贝塞尔曲线或曲面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
openlayers3 画扇形

				
			

			

				

					weixin_33910460的博客
				

				

					11-18
					
					600
					
				

			

		

		

			
				
参考了http://www.cnblogs.com/lingxue3769/archive/2011/11/01/2231409.html同学的博客
和
百度知道https://zhidao.baidu.com/question/244106942859229564.html同学的回复
我这边修改了下根据点来画
/*** 创建扇形* @param [x,y] center 扇形中心点* @...

			
		

	





	

		

			

				
					
049：vue+openlayers 鼠标pointermove显示城市名片

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-14
					
					2707
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。

			
		

	





	

		

			

				
					
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形

				
			

			

				

					“跟他人学，和自己比”
				

				

					06-17
					
					3259
					
				

			

		

		

			
				
这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以 r 为半径绘制，不是鼠标手动绘制。首先绘制圆，首先有一个数据源和一个图层来存放绘制的圆形，这个很简单。然后创建变量自己该就可以，我估计都搞openlayer了，这些基础应该不至于不知道，我这边就写关键代码，我想应该没问题，我用的是默认3857坐标，不是4326。
好的，通过上面的代码实现了创建一个图层在地图上来放置绘制的圆形。接下来就是向这个数据源去添加圆形，这个呢，还是嘛，和我之前写的博客差不多，那几部分相互嵌套，我还是把图在贴

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-22
					
					377
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers：实现平滑曲线（附完整源码）

				
			

			

				

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

				

					01-31
					
					578
					
				

			

		

		

			
				
openlayers：实现平滑曲线（附完整源码）

			
		

	





	

		

			

				
					
openlayer 绘制线

				
			

			

				

					“跟他人学，和自己比”
				

				

					03-25
					
					1992
					
				

			

		

		

			
				
openlayer 绘制线

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

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

			
		

	





	

		

			

				
					
前端组件级权限控制

					
最新发布

				
			

			

				

					马优晨
				

				

					01-06
					
					338
					
				

			

		

		

			
				
前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值