Openlayers3 绘制圆

 

需求中出现了在地图上画圆的需求，此需求在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在附件