OpenLayers6实战，OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域

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

#前端 #vue.js #javascript #OpenLayers #地图框选放大 #绘制圆形区域

本文介绍如何在OpenLayers6中实现绘制圆形并放大地图到所选区域的功能。通过监听绘制事件，完成图形绘制后自动调整地图视野到圆形边界。

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

前言

本章讲解如何使用OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域。
openlayers

二、依赖和使用

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

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
openlayers：实现画圆（附完整源码）

				
			

			

				

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

				

					02-06
					
					652
					
				

			

		

		

			
				
openlayers：实现画圆（附完整源码）

			
		

	



                

            
              



	

		

			

				
					
OpenLayers6实战，OpenLayers实现绘制矩形区域放大地图功能，鼠标框选放大地图

				
			

			

				

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

				

					03-25
					
					445
					
				

			

		

		

			
				
本章讲解如何使用OpenLayers实现绘制矩形区域放大地图功能，鼠标框选放大地图的功能。本章是在上一章《OpenLayers6实战，OpenLayers实现绘制圆形放大地图功能，在地图上画圆放大地图到鼠标框选区域》基础上实现的矩形（四边形）的框选功能。

			
		

	



              


  
              

                


	

		

			

				
					
Openlayers3 绘制圆

				
			

			

				

					04-26
				

			

		

		

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

			
		

	





	

		

			

				
					
（五）openlayers加圆形以及引入element-ui组件

				
			

			

				

					fang427的博客
				

				

					04-26
					
					850
					
				

			

		

		

			
				
openlayers加圆形以及引入elemen-ui组件

			
		

	



		

			
		



	

		

			

				
					
openlayers根据半径绘制圆形，多圆连线并标记距离

				
			

			

				

					“跟他人学，和自己比”
				

				

					08-24
					
					2487
					
				

			

		

		

			
				
其实这个效果很好实现的，之前有几篇博文呢，关于 openlayers 根据半径绘制圆形，根据经纬度坐标绘制连线啥的都有涉及过，所以说如果要想实现今天想做的功能拼接一下就可以了，做一个快乐的代码裁缝。

			
		

	





	

		

			

				
					
【OpenLayers】画圆

				
			

			

				

					a571574085的博客
				

				

					04-18
					
					1178
					
				

			

		

		

			
				
需要转成投影坐标才能正确绘制，绘制完再转回去



//错误画法
new ol.geom.Circle([114.298353,30.623705],13);


//正确画法
const coordm = fromLonLat(coord);//转成投影坐标系
const circlem = new Circle(coordm, radius);//画圆
const circle = circ...

			
		

	





	

		

			

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

				
			

			

				

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

				

					03-26
					
					804
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-14
					
					2723
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					04-19
					
					791
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Openlayers 教程 09 - 以单位米为半径，绘制圆形图形要素

				
			

			

				

					非科班Java出身GISer的博客
				

				

					08-21
					
					2004
					
				

			

		

		

			
				
Openlayers 教程 - 以单位米为半径，绘制圆形图形要素。

			
		

	





	

		

			

				
					
openlayers5绘制点线面圆.zip

				
			

			

				

					08-01
				

			

		

		

			
				
利用openlayer5在地图上进行绘制点，圆，参考自openlayers5官网。

			
		

	





	

		

			

				
					
openLayers实战(七)：根据坐标信息绘制圆形

				
			

			

				

					在下魔王ii的博客
				

				

					08-18
					
					1538
					
				

			

		

		

			
				
要解决这个问题，你可以尝试使用一个更适合的地图投影，例如使用球面墨卡托投影。球面墨卡托投影是一种常见的投影方式，它可以在保持形状不变的同时，将地球表面展示在平面上。地图投影的目的是将球形地球表面展示在二维平面上，但由于地球的形状是椭球形的，所以无法完美地展示。记住，在地图展示上，我们无法完美地呈现地球的真实形状，追求完美的圆形可能并不现实。在球形地球上，绘制的圆会是一个完美的圆形，但当我们在地图上使用椭球形投影时，圆形会变得扁扁的。确保设置正确的投影参数和地理坐标系，以及正确的单位，以获得更准确的圆形。

			
		

	





	

		

			

				
					
地图技术知识：openlayers学习之绘制点标记（鼠标单击事件）

				
			

			

				

					weixin_45031595的博客
				

				

					01-22
					
					3885
					
				

			

		

		

			
				
步骤思想
1、创建地图视图
2、创建矢量容器
3、创建矢量图层
4、将矢量图层添加至地图
5、监听地图点击事件
6、创建矢量点
7、设置样式
8、将矢量容器的矢量元素清空
9、再将新的矢量点add
组件代码
<template>
  <div id="container">
    <div id="map"
         style="width: 100%; height: 100%"></div>
  </div>
</templa

			
		

	





	

		

			

				
					
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 6/7 绘制自定义圆 渐变圆

					
最新发布

				
			

			

				

					qq_36287830的博客
				

				

					12-24
					
					1168
					
				

			

		

		

			
				
openlayers 6/7 绘制自定义圆 渐变圆 OpenLayers 是一个开源的 JavaScript 库，用于在网页上显示地图。它允许开发者创建交互式的地图应用，并且支持多种地图数据源和服务。OpenLayers 提供了丰富的功能和灵活性，使得它成为开发基于Web的地图应用程序的强大工具。// 自定义渲染函数// 获取圆心坐标和边界坐标// 获取绘图上下文// 计算圆的半径// 定义内半径和外半径，这里内半径为0，外半径是计算出的半径乘以1.4倍// 创建一个径向渐变，从圆心到外半径x,y,x,y,

			
		

	





	

		

			

				
					
openlayers点图元渲染及画圆

				
			

			

				

					苟冬新
				

				

					03-31
					
					1558
					
				

			

		

		

			
				
下面是openlayers点图元渲染效果图及在4326坐标系中画圆效果图。

因为功能需要所以写的可能有点麻烦，只截取了方法实现的代码。
 // 渲染点图标及画圆
  renderIcon(rows) {
  	let rows = {};
    rows.centerPoint = "116.64560693, 40.05946214";
    let self = this;
    self.vectorSource = new VectorSource(); // 图元数据源

    self

			
		

	





	

		

			

				
					
Openlayers 教程 08 - 圆的操作 - 几何圆与地理圆（正多边形）

				
			

			

				

					非科班Java出身GISer的博客
				

				

					03-21
					
					2445
					
				

			

		

		

			
				
Openlayers 圆的操作，介绍创建圆的方法以及根据圆获取圆形多边形的方法。



			
		

	





	

		

			

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

				
			

			

				

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

				

					07-01
					
					6038
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers绘制圆的半径线条

				
			

			

				

					qq_52959651的博客
				

				

					07-12
					
					601
					
				

			

		

		

			
				
之前不晓得咋算圆的面积，就是圆的一个点，无意中看见一个大佬的文章，顿时有了思路。核心代码就上面那些，我这边用暂时还没什么问题。

			
		

	





	

		

			

				
					
openlayers画圆

				
			

			

				

					08-23
				

			

		

		

			
				
您可以使用OpenLayers的`Circle`类来绘制圆形。下面是一个示例代码：  ```javascript // 创建地图 var map = new ol.Map({  target: 'map',  layers: [  new ol.layer.Tile({  source: new ol.source.OSM(),  }),  ]...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值