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

已于 2024-05-27 23:15:54 修改
阅读量2k 收藏 2
点赞数 2
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： javascript vue.js OpenLayers 绘制图形 绘制圆形
于 2023-04-14 14:52:20 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/130153420
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 15 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门
69 篇文章 93 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍了如何使用OpenLayers6在地图上进行图形绘制，包括线段、圆形和多边形。文章提供了vue项目的集成方法，详细讲解了核心知识点，并给出了完整的代码实现示例，帮助读者掌握OpenLayers的图形绘制功能。
摘要由CSDN通过智能技术生成

专栏目录：
OpenLayers6入门教程汇总目录

前言

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

1、本章只实现了绘制功能，图形拖拽修改编辑功能请参考：《OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形》

2、绘制箭头请参考实战篇：《OpenLayers6实战，Openlayers实现绘制箭头，Openlayers绘制轨迹路径箭头，可调箭头角度和箭头长度》

openlayers

二、依赖和使用


                

                
                
        

        

        

    

  


        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

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

				
			

			

				

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

				

					04-12
					
					631
					
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
在地图上基于OpenLayers实现点/线/面静态的绘制显示

				
			

			

				

					nanke_yh的博客
				

				

					12-08
					
					4425
					
				

			

		

		

			
				
在做GIS相关的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于OpenLayers实现点/线/面静态的绘制显示方法。

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					厚积薄发.
				

				

					07-17
					
					295
					
				

			

		

		

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

			
		

	





	

		

			

				
					
初始化一个简单的openlayers地图

				
			

			

				

					qq_45089709的博客
				

				

					01-20
					
					362
					
				

			

		

		

			
				
初始化一个简单的openlayers地图

			
		

	



		

			
		



	

		

			

				
					
OpenLayers绘制图形

				
			

			

				

					weixin_30872789的博客
				

				

					05-13
					
					300
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers3各种元素图形绘制

				
			

			

				

					11-02
				

			

		

		

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

			
		

	





	

		

			

				
					
Openlayers6 图形绘制和修改功能（结合React）

					
最新发布

				
			

			

				

					weixin_44242600的博客
				

				

					08-08
					
					1197
					
				

			

		

		

			
				
通过使用openlayers的`ol.interaction.Draw`和`ol.interaction.Modify`模块实现地图上绘制圆形、矩形、多边形并修改编辑。

			
		

	





	

		

			

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

				
			

			

				

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

				

					03-26
					
					337
					
				

			

		

		

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

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形

				
			

			

				

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

				

					05-27
					
					260
					
				

			

		

		

			
				
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers涂鸦手绘线条、圆形和多边形，涂鸦线条自动收尾连接成多边形

				
			

			

				

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

				

					08-09
					
					546
					
				

			

		

		

			
				
本章再次讲解OpenLayers绘制图形功能，上一章中《OpenLayers图形绘制，OpenLayers实现在地图上绘制线段、圆形和多边形》我们已经讲过多种图形的绘制，本章主要讲解自由涂鸦手绘绘制线条，圆形和任意形状。

			
		

	





	

		

			

				
					
OpenLayers 3 地图框选 画多边形 获取坐标 实例

				
			

			

				

					12-01
				

			

		

		

			
				
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标

			
		

	





	

		

			

				
					
openlayers3画线功能例子

				
			

			

				

					01-03
				

			

		

		

			
				
openlayers3 画线，画扇形图，   能正常运行的小例子，

			
		

	





	

		

			

				
					
OpenLayers画多边形

				
			

			

				

					divi
				

				

					09-19
					
					701
					
				

			

		

		

			
				

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="widt

			
		

	





	

		

			

				
					
openlayer绘制多边形

				
			

			

				

					大家好，我是+V
				

				

					03-28
					
					3120
					
				

			

		

		

			
				
openlayer 绘制多边形
	 /***
	  	绘制多边形
	  	points：多边形顶点组成的列表
	  */
      drawPolygon(points) {
        let layer = this.getLayerFromMap(this.map, 'polygon')  // 先查看一下之前是否存在，如果存在先移除
        if (layer) {
          this.map.removeLayer(layer)
        }
        let 

			
		

	





	

		

			

				
					
openlayer 绘制线

				
			

			

				

					大家好，我是+V
				

				

					03-25
					
					1652
					
				

			

		

		

			
				
openlayer 绘制线

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

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

			
		

	





	

		

			

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

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-14
					
					2102
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers：实现画多边形（附完整源码）

				
			

			

				

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

				

					02-06
					
					282
					
				

			

		

		

			
				
openlayers：实现画多边形（附完整源码）

			
		

	





	

		

			

				
					
openLayers--绘制多边形、获取视图的中心点、获取当前地图等级、设置地图等级

				
			

			

				

					m0_50207524的博客
				

				

					11-04
					
					1546
					
				

			

		

		

			
				
上一篇文章在vue项目中绘制了openlayers绘制了地图和标记点，本篇文章讲解openlayers绘制多边形通过LineString来进行绘制、获取视图的中心位置、获取当前地图等级// 定义多边形}),width: 4,}),})},

			
		

	





	

		

			

				
					
openlayer绘制面

				
			

			

				

					09-28
				

			

		

		

			
				
要使用OpenLayers绘制面，您可以按照以下步骤操作：

1. 首先，确保您已经在项目中引入了OpenLayers库。您可以从OpenLayers官方网站下载并引入它。

2. 创建一个地图容器，可以是一个div元素，用于显示地图。

3. 初始化一个地图对象，并将其添加到地图容器中。

4. 创建一个矢量图层，用于绘制面。

5. 创建一个绘制交互工具，例如ol.interaction.Draw，指定绘制的几何类型为面geometryType: 'Polygon'。

6. 将绘制交互工具添加到地图中。

7. 在绘制完成后，通过监听drawend事件获取绘制的几何对象。

8. 将绘制的几何对象添加到矢量图层中，并更新地图显示。

下面是一个简单的示例代码：

```javascript
// 创建地图容器
var mapContainer = document.getElementById('map');

// 初始化地图对象
var map = new ol.Map({
  target: mapContainer,
  layers: [
    // 添加一个矢量图层
    new ol.layer.Vector({
      source: new ol.source.Vector()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

// 创建绘制交互工具
var draw = new ol.interaction.Draw({
  source: map.getLayers().item(0).getSource(),
  type: 'Polygon'
});

// 添加绘制交互工具到地图
map.addInteraction(draw);

// 监听绘制完成事件
draw.on('drawend', function(event) {
  var feature = event.feature;

  // 添加绘制的几何对象到矢量图层
  map.getLayers().item(0).getSource().addFeature(feature);

  // 更新地图显示
  map.getView().fit(map.getLayers().item(0).getSource().getExtent());
});
```

这样，您就可以在OpenLayers中绘制面了。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值