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

最新推荐文章于 2024-05-29 20:27:13 发布
最新推荐文章于 2024-05-29 20:27:13 发布
阅读量610 收藏 2
点赞数 16
分类专栏： Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： 前端 javascript vue.js OpenLayers 绘制椭圆 画椭圆形 鼠标拖拽绘制椭圆
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/137678678
版权
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安装依赖

                

                
                
        

        

    

  


        

            

                

                

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

        


    



                



	

		

			

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

				
			

			

				

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

				

					04-12
					
					913
					
				

			

		

		

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

			
		

	



                

            
              



	

		

			

				
					
170：vue+openlayers 绘制地图上多个点的信封envelope矩形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					11-08
					
					528
					
				

			

		

		

			
				
第170个本示例的目的是介绍演示如何在vue+openlayers项目中如何根据多边形的几个坐标点来获取面积值。

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解

				
			

			

				

					老胡的CSDN博客
				

				

					12-23
					
					3520
					
				

			

		

		

			
				
引言

OpenLayers可以通过代码绘制多种几何形状，也可以通过draw类型的交互组件绘制几何形状，官方实例提供了类如圆、折线、矩形、星形等方法。除此之外，椭圆这种图形其实也是非常常见的几何图形，但是官方没有提供现成的API，本文从使用代码绘制和交互绘制两种途径详细讲解一下椭圆的绘制。



一点理论基础

众所周知，OGC提供的标准geometry类型只有点、线、面以及它们的组合，并没有圆和...

			
		

	





	

		

			

				
					
OpenLayers 画圆画椭圆

				
			

			

				

					Gary Leong
				

				

					05-14
					
					2093
					
				

			

		

		

			
				
var draw; // global so we can remove it later
function addInteraction() {
  var value = typeSelect.value;
  if (value !== 'None') {
    draw = new Draw({
      source: source,
      type: 'Circle'
    });
    map.addInteraction(draw);
  }
}

这是OpenLayers官方

			
		

	



		

			
		



	

		

			

				
					
椭圆轨迹绘制

				
			

			

				

					11-16
				

			

		

		

			
				
椭圆轨迹绘制MATLAB程序，采用等弦差法，验证可行，显示椭圆轨迹

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-12
					
					399
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					07-31
					
					2298
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					05-29
					
					1482
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-23
					
					1783
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Openlayers3 绘制圆

				
			

			

				

					04-26
				

			

		

		

			
				
NULL
博文链接：https://jjxliu306.iteye.com/blog/2371473

			
		

	





	

		

			

				
					
openlayers：实现画几何图形（附完整源码）

				
			

			

				

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

				

					01-31
					
					132
					
				

			

		

		

			
				
openlayers：实现画几何图形（附完整源码）

			
		

	





	

		

			

				
					
OpenLayers教程：图形绘制之绘制几何图形

				
			

			

				

					不睡觉的怪叔叔的博客
				

				

					07-27
					
					2481
					
				

			

		

		

			
				
OpenLayers的ol.interaction.Draw类实现了交互式绘制几何图形的功能，可以把它看作一个绘制图形的控件，使用合适的参数初始化它，并将它加入地图对象就可以进行交互式的图形绘制。

  我们直接来看一个示例：



  drawShapes.html:


<!DOCTYPE html>
<html lang="en">
<head&...

			
		

	





	

		

			

				
					
openlayers--绘制图形

				
			

			

				

					weixin_43866037的博客
				

				

					12-16
					
					264
					
				

			

		

		

			
				
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

			
		

	





	

		

			

				
					
OpenLayers绘制图形

				
			

			

				

					超频化石鱼的博客
				

				

					10-07
					
					3916
					
				

			

		

		

			
				
OpenLayers的显示构成由外向内为：

ol.Map：地图对象。
	ol.layer.Vector：图层对象layer。Map含有多个layer，最终的显示效果是由多个layer叠加而成。
	ol.source.Vector和ol.style.Style：
一个layer由两部分构成：数据源source和样式style。其含义是，该layer下所有的图形都使用同样的绘制样式。

ol.sou...

			
		

	





	

		

			

				
					
用openlayers3绘图(点、线、圆、正方形....)

				
			

			

				

					weixin_44592912的博客
				

				

					08-20
					
					3016
					
				

			

		

		

			
				
用openlayers3绘图(点、线、圆、正方形…)
HTML部分
 <div id="map">
        
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</...

			
		

	





	

		

			

				
					
三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据

				
			

			

				

					aaa_div的博客
				

				

					05-28
					
					1803
					
				

			

		

		

			
				
已经绘制了一个图形，但是并没有获取到。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据，因为drawend事件里feature还没被加到图层上。features绑定的数组不是普通的数组，Collection是openlayers内部定义的一个类似数组的集合。总的来说，两种方法都可以，甚至可以定义一个数组，每次绘制完都push一下当前绘制的feature。想要在地图上绘制图形，需要用到一个交互类Draw，new Draw，设置绘制的图形类型。

			
		

	





	

		

			

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

				
			

			

				

					凌往昔
				

				

					01-07
					
					5817
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers绘制点、圆、多边形

				
			

			

				

					qq_46005282的博客
				

				

					02-26
					
					911
					
				

			

		

		

			
				
我用的是4326坐标系，有些地方和3857坐标系不一样思维导图是大佬整理的，我拿来用了。

			
		

	





	

		

			

				
					
openlayers 画椭圆

					
最新发布

				
			

			

				

					09-13
				

			

		

		

			
				
OpenLayers 是一个开源的 Web GIS 客户端库，用于开发地图应用程序。在 OpenLayers 中绘制椭圆，可以通过创建一个 `Circle` 对象，并将其作为 `Feature` 添加到地图上实现。但需要注意的是，OpenLayers 原生不支持直接绘制椭圆，不过可以通过创建一个圆弧集合来模拟椭圆的外观。

以下是一个简单的例子，展示如何在 OpenLayers 中绘制一个椭圆形状的特征：

```javascript
// 创建椭圆的中心点坐标
var center = ol.proj.fromLonLat([lon, lat]); // lon, lat 是椭圆中心的经纬度

// 创建一个椭圆的长轴和短轴长度（单位为米）
var radius1 = 50000; // 长轴半径
var radius2 = 25000; // 短轴半径

// 创建一个椭圆对象
var ellipse = new ol.geom.Ellipse(center, radius1, radius2);

// 将椭圆对象转换为多边形对象，以便可以在地图上渲染
var circleFeature = new ol.Feature(ellipse.transform('EPSG:3857', map.getView().getProjection()));

// 设置椭圆的样式
circleFeature.setStyle(new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'red', // 边框颜色
        width: 2 // 边框宽度
    }),
    fill: new ol.style.Fill({
        color: 'rgba(255, 0, 0, 0.1)' // 填充颜色
    })
}));

// 创建一个图层来存放椭圆特征
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [circleFeature]
    })
});

// 将图层添加到地图上
map.addLayer(vectorLayer);
```

需要注意的是，上述代码中的 `Ellipse` 类并不是 OpenLayers 原生提供的，因此需要自己实现或者使用第三方库来创建椭圆形状。有的开发者会通过多边形近似椭圆的方法来实现。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值