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

最新推荐文章于 2024-04-22 16:25:11 发布
最新推荐文章于 2024-04-22 16:25:11 发布
阅读量391 收藏 1
点赞数 9
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 绘制图形 半圆 扇形
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/137678951
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
55 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何在OpenLayers6中通过鼠标拖拽方式实现半圆形（半圆扇形）的绘制。文章涵盖依赖安装、在Vue项目中的使用、功能实现及代码细节，最后展示了测试效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

前言

本章讲解使用OpenLayers在地图上实现鼠标拖拽方式绘制半圆形（半圆扇形）
openlayers

二、依赖和使用

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

                

                
                
        

        

    

  


        

            

                

                

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

        


    


                



	

		

			

				
					
openlayers：实现绘制扇形（附完整源码）

				
			

			

				

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

				

					02-06
					
					404
					
				

			

		

		

			
				
openlayers：实现绘制扇形（附完整源码）

			
		

	



                

            
              



	

		

			

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

					
最新发布

				
			

			

				

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

				

					04-22
					
					335
					
				

			

		

		

			
				
本章讲解如何使用OpenLayers特殊图形绘制，通过鼠标拖拽方式来绘制出半圆环形（半圆扇形）的功能，效果像磁铁一样的半圆弧。上一章中我们以及实现了四分之一圆环形的特殊图形绘制《OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制环形（四分之一圆环），OpenLayers特殊图形绘制》，本章在上一章章基础上修改而成。

			
		

	



              


  
              

                


	

		

			

				
					
openlayer 绘制扇形

				
			

			

				

					大家好，我是+V
				

				

					06-02
					
					1796
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayer绘制扇形

				
			

			

				

					weixin_43356511的博客
				

				

					03-20
					
					1454
					
				

			

		

		

			
				
openlayer绘制扇形yi.前瞻er.上代码，实战一开始我以为像这种图像的简单绘制，应该很简单，但是自带的API却没有找到，但是他有绘制多边形（Polygon）的接口，那么我们只需要计算出扇形所有的点位就可以了。然后我就开始在草稿纸上绘制草图,经过分析计算点位用初中学到的正弦、余弦就可以搞定san.完整实例（总结）完整代码如上所示，绘制一个扇形很简单有没有？转载请注明出处: [https://blog.csdn.net/weixin_43356511/article/details/123610458]

			
		

	



		

			
		



	

		

			

				
					
openlayers 画扇形

				
			

			

				

					weixin_30338461的博客
				

				

					11-01
					
					608
					
				

			

		

		

			
				
OpenLayers有一个类: OpenLayers.Geometry.Polygon.createRegularPolygon, 查看源代码定义如下:

/** * APIMethod: createRegularPolygon * Create a regular polygon around a radius. Useful for creating circles  * and the...

			
		

	





	

		

			

				
					
onclick 源码_openlayers6绘制扇形(附源码下载)

				
			

			

				

					weixin_39928667的博客
				

				

					11-22
					
					296
					
				

			

		

		

			
				
前言之前写过一篇openlayers4版本的地图绘制扇形文章，但是由于是封装一层 js代码写的，很多初学者看起来比较有点吃力，所以本篇文章重新写一篇地图绘制扇形文章，直接基于最新版本openlayers6写的，纯粹html + js + css形式，没有任何封装。内容概览1.基于openlayers6实现地图绘制扇形2.源代码demo下载效果图如下：具体实现过程html 样式<html&gt...

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-19
					
					619
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-22
					
					309
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-02
					
					390
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-02
					
					584
					
				

			

		

		

			
				
本章讲解使用OpenLayers实现绘制扇形，绘制特殊殊图形扇形（也即：四分之一圆）的功能。本章代码是在绘制圆形的基础上扩展修改而成：圆形绘制可以参考：《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形。

			
		

	





	

		

			

				
					
vue3+vite+openlayers6实现绘制扇形及环形组件代码

				
			

			

				

					08-05
				

			

		

		

			
				
内容概要：通过带着读者手写openlayers6 绘制扇形及环形，了解 地图容器核心原理。在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形
适合人群：具备一定编程基础，工作1-3年的web前端或webGIS研发人员
能学到什么：①vue3+vite；②地图容器相关知识。
阅读建议：此资源以开发绘制扇形及环形学习其原理地图容器，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。

			
		

	





	

		

			

				
					
openlayers3各种元素图形绘制

				
			

			

				

					11-02
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers3 画扇形

				
			

			

				

					weixin_33910460的博客
				

				

					11-18
					
					578
					
				

			

		

		

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

			
		

	





	

		

			

				
					
OpenLayers中如何画扇形

				
			

			

				

					wang8118的专栏
				

				

					05-16
					
					5198
					
				

			

		

		

			
				
项目中用到了地图展示，但是有个需求是根据参数画扇形，但是OpenLayers没有画扇形的现成函数，在某个牛人的帮助下，修改了下源代码便可以了
1，首先在源码中加入以下代码，最好是在OpenLayers.Geometry.Polygon.createRegularPolygon这个函数的源代码后面加入：

//参数分别是圆心，半径，边数，弧度，旋转角度（即右边半径与x正向轴的角度）OpenLa

			
		

	





	

		

			

				
					
238：vue+openlayers 绘制扩展，弓形、曲线、扇形、双箭头、进攻方向...

				
			

			

				

					大剑师兰特的GIS世界
				

				

					05-16
					
					1582
					
				

			

		

		

			
				
第238个本示例的目的是介绍演示如何在vue+openlayers中利用ol-plot插件进行绘制图形扩展，可以绘制弓形、弧形、标志旗、战斗进攻图形等等。

			
		

	





	

		

			

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

				
			

			

				

					sea9528的博客
				

				

					12-04
					
					4534
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers4 入门开发系列之小区信号扇形图篇

				
			

			

				

					zhoumouren88的博客
				

				

					09-02
					
					370
					
				

			

		

		

			
				
前言

openlayers4 官网的 api 文档介绍地址openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
geoserver 安装部署步骤
geoserver 发布地图服务 WMS
geoserver 发布地...

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-12
					
					881
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers学习——8、openlayers画图形

				
			

			

				

					记录生活点滴
				

				

					01-13
					
					1360
					
				

			

		

		

			
				
openlayers画图形
前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。
     本人不是专业GIS开发，只是记录，方便后续查找。

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值