`
jjxliu306
  • 浏览: 157692 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Openlayers3 绘制圆

    博客分类:
  • GIS
阅读更多

 

需求中出现了在地图上画圆的需求,此需求在ol3以上的版本的ol是很简单的,直接上代码:

 

//创建一个数据集合
 var features = new ol.Collection(); 

	 //100 个圆
	for(var i  = 0 ; i < 100 ; i++) {

		var center_x = 120 + Math.random() * 0.1 ;
		var center_y =  30 + Math.random() * 0.1 ;
		//圆形,中心点和半径
		var cricle = new ol.geom.Circle([center_x ,center_y] , 0.002) ;
	
		var feature = new ol.Feature({
			geometry: cricle,
			labelPoint: new ol.geom.Point([center_x ,center_y]),
			name: '' + i
		});

		features.push(feature);
	
	
	}

 

 

创建一个数据图层:

  var clayer = new ol.layer.Vector({
        source: new ol.source.Vector({features: features}),
        style: function (feature) {
			var s = new ol.style.Style({
				 fill: new ol.style.Fill({
				 color: 'rgba(255, 0, 0, 0.4)'
				}),
				stroke: new ol.style.Stroke({
				 color: '#ffcc33',
				 width: 2
				 }) ,
				text:new ol.style.Text({
					text: feature.get("name")
				 })
			}) ;
		
			return s;
		
		} 
      });

 

 

创建地图:

var view = new ol.View({
		 projection: 'EPSG:4326',
        center: [120, 30],
        zoom: 10
      });


	 var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          clayer
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: view
      });

 

 

到此全部结束。效果如图:



 

demo在附件

 

 

 

  • 大小: 208.9 KB
0
1
分享到:
评论

相关推荐

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

    在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑,简化代码实现过程,保留核心功能,例如:vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群:具备一定编程基础,...

    openlayers5绘制点线面圆.zip

    这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目,演示如何在OpenLayers 5中实现这些绘制功能。 在OpenLayers 5中,我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。首先,你需要...

    openlayers3各种元素图形绘制

    在这个主题中,我们将深入探讨如何利用OpenLayers 3在WebGIS中绘制各种特殊的图形,如进攻方向、自由地、分队战斗、弓形、扇形、箭头以及钳击。 1. **进攻方向**:在军事或战略规划中,表示进攻方向是非常重要的。...

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

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

    openlayers3添加闪烁点

    在OpenLayers 3中添加闪烁点是一项常见的需求,特别是在地理信息系统(GIS)应用中,用于突出显示特定位置或实时更新的数据。OpenLayers 是一个流行的JavaScript库,用于在Web浏览器中展示地图,支持多种数据源和...

    Openlayers实现图形绘制

    在OpenLayers中实现图形绘制是一项常见的任务,尤其对于地理信息系统(GIS)开发人员来说,它提供了丰富的功能来绘制和编辑地图上的几何形状。OpenLayers是一个强大的JavaScript库,用于在Web浏览器中显示地图,并且...

    openlayers 添加文字标注

    openlayers 实现在地图上添加文字标注。为图片注记添加文本标签

    Openlayers绘制地图标注

    在OpenLayers中绘制地图标注是将特定的信息或者兴趣点(POI)以图标或文字的形式在地图上清晰呈现的关键操作。这有助于用户更好地理解和解析地图上的数据。以下是对OpenLayers中绘制地图标注的详细说明: 1. **标注...

    openlayers

    除了基本的线绘制,OpenLayers还支持多边形、圆、圆弧等复杂几何形状。同时,`ol.interaction.Draw`交互允许用户在地图上动态绘制线和多边形。你可以设置交互类型,如`'LineString'`,然后监听`drawend`事件,获取...

    openlayers 3 例子中文解析

    ### OpenLayers 3 示例中文解析 #### 1. 局部化OpenStreetMap与不同层级显示地图 - **知识点:** - **OpenStreetMap**:一个免费且开放的地图项目,用户可以贡献地理数据。 - **地图层级控制**:通过调整地图的...

    《OpenLayers Cookbook》随书源代码

    同时,可能还会涉及到多边形、线和圆的绘制,用于表示区域边界或测量距离。 除了基本的地图操作,源代码可能包含关于事件监听和响应的实例,比如点击地图、拖拽、缩放等操作的处理。这有助于开发者理解如何实现地图...

    openlayer所有资料

    在学习OpenLayers的过程中,你将接触到地图坐标系统、图层叠加、矢量数据的绘制、地图交互事件处理、图层样式定义等多个方面。此外,你还可以通过实践学习如何与其他Web技术(如HTML、CSS和Ajax)结合,创建出丰富的...

    多边形圆形矩形等多种图形绘制

    本资源包"多边形圆形矩形等多种图形绘制"聚焦于使用地图插件、HTML5、CSS3以及Jquery来实现各种几何图形的绘制。下面我们将深入探讨这些技术及其在图形绘制中的应用。 首先,地图插件是用于在网页上展示地理信息的...

    geodesic_circle:使用OpenLayers2将测地线圆与“正常”圆进行比较

    这个项目名为"geodesic_circle",旨在使用OpenLayers2展示如何在地图上绘制测地线圆,并与传统意义上的圆形进行比较。测地线圆是地球上两点间最短路径,即大圆航线,对于全球范围的地图应用至关重要。 首先,我们...

    openlayers5属性空间查询.zip

    3. **空间查询**:利用`getFeaturesInExtent`方法,传入一个表示地理范围的`ol.geom.Geometry`对象或`ol.Extent`。 ```javascript var extent = ...; // 你的查询范围 var featuresInExtent = vectorSource....

    Openlayers测距测面积

    这里使用了Haversine公式,它基于球面三角学,计算地球上两点之间的大圆距离。代码如下: ```javascript var EARTH_RADIUS = 6378137; function rad(d) { return d * Math.PI / 180.0; } function GetDistance(lat...

    画弧、画圆、画扇、画轨迹图

    根据javascript画弧圆扇轨迹的脚本,算法相对复杂

    基于openlayers实现角度测量功能

    通过这种方式,我们可以为OpenLayers添加自定义的角度测量功能,使得用户在绘制线段后能够直观地获取到它们之间的角度信息。这对于地理信息系统(GIS)应用来说非常实用,例如在测量地形坡度、建筑角度或道路转向等...

    openlayersdemo.zip

    在这个"openlayersdemo.zip"中,我们主要关注的是如何在OpenLayers中绘制自定义的Canvas图层,并解决地图缩放时图层位置不一致的问题。 首先,让我们深入了解一下Canvas。Canvas是HTML5的一个重要特性,它提供了一...

Global site tag (gtag.js) - Google Analytics