Openlayers3 draw circle

 

There is a need to draw a circle on the map in the requirements. This requirement is very simple in the version of ol above ol3, and the code is directly added:

 

//create a data set
 var features = new ol.Collection();

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

		var center_x = 120 + Math.random() * 0.1 ;
		var center_y = 30 + Math.random () * 0.1;
		//circle, center point and radius
		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);
	
	
	}

 

 

Create a data layer:

  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;
		
		}
      });

 

 

Create a map:

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
      });

 

 

This is all over. The effect is as shown in the figure:

 

demo is attached