OpenLayers3 Text über den Kreis hinzufügen

Question

Nachdem ich viel gesucht habe, habe ich endlich einen Code gefunden, mit dem ich einen Kreis auf der Karte zeichnen kann.

HTML:

<div id="mapHolder"></div> 

CSS:

#mapHolder{ 
    width: 100%; 
    height: 200px; 
    background-color: #ccc; 
} 

JavaScript: https://jsfiddle.net/79hjbxw9/

1) Wie kann ich mich auf einen Text setzen können:

$(document).ready(function(){ 
    var map = new ol.Map({ 
      target: 'mapHolder', 
      interactions: ol.interaction.defaults({mouseWheelZoom:false}), 
      layers: [ 
      new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }) 
      ], 
      view: new ol.View({ 
      center: ol.proj.transform([parseFloat(8.680239), parseFloat(50.114034)], 'EPSG:4326','EPSG:3857'), 
     zoom: 13 
      }) 
     }); 



    var vectorSource = new ol.source.Vector(); 
    var circleLayer = new ol.layer.Vector({ 
    source: vectorSource 
    }); 
    map.addLayer(circleLayer); 

    var coordinate = ol.proj.transform([parseFloat(8.680239), parseFloat(50.114034)], 'EPSG:4326','EPSG:3857'); 
    vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coordinate, 2000))); 

}); 

dies die Geige ist das Kreis mit dem Titel "Ungefähre Fläche"; und auch in der Lage sein, die Farbe und Schriftart zu definieren.

2) auch ich möchte die Farbe und die Stärke der Kreisgrenze ändern.

Answer 1

Sie können das mit einem Stil auf Ihrer Vektorebene erreichen.

Erklären Sie Ihren Stil

 var myStlye = new ol.style.Style ({ 
     fill: new ol.style.Fill({ 
     color: 'rgba(255,100,50,0.5)' 
     }), 
     stroke: new ol.style.Stroke({ 
     color: 'blue', 
     width: 3 
     }), 
     text: new ol.style.Text({ 
     textAlign: "Start", 
     textBaseline: "Middle", 
     font: 'Normal 12px Arial', 
     text: 'Approximate Area', 
     fill: new ol.style.Fill({ 
      color: '#ffa500' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#000000', 
      width: 3 
     }), 
     offsetX: -45, 
     offsetY: 0, 
     rotation: 0 
     }) 
    }); 

und es dann auf Ihre Schicht

var circleLayer = new ol.layer.Vector({ 
     style:myStlye, 
     source: vectorSource 
     }); 

hier anhängen ein fiddle ist es