需求中出现了在地图上画圆的需求,此需求在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在附件
相关推荐
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑,简化代码实现过程,保留核心功能,例如:vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群:具备一定编程基础,...
利用openlayer5在地图上进行绘制点,圆,参考自openlayers5官网。
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
主要为大家详细介绍了Openlayers实现图形绘制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
openlayers3绘制点、线、多边形、圆,获取坐标与后台交互
根据javascript画弧圆扇轨迹的脚本,算法相对复杂
自定义openlayers绘图控件,支持绘制点、折现、多边形、圆、方形等,支持opelayers4、openlayers5。
基于vue框架下,使用openlayers插件在海图上(海图服务器用的openlayers官网的)进行两点间移动动画以及基础图形绘制,比如圆、贴图、自定义连线等
绘制多边形,直线和圆。 图标标记。 这使用来自代码。 追踪。 将跟踪器/对象显示为地图层中的要素。 它使用Polaric Server后端通过websocket和JSON获取更新。 该软件当前在运行。 新功能可能会在上进行测试。 ...