OpenLayers3在Circle上添加文字

Question

經過很多搜索之後，我終於設法找到了一段代碼，可以讓我在地圖上畫一個圓圈。

HTML：

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

CSS：

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

的JavaScript：

$(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))); 

}); 

這是小提琴：https://jsfiddle.net/79hjbxw9/

1）我怎樣才能在把一個文本該標題爲「大概區域」;也能夠定義顏色和字體。

2）我也想改變圓形邊框的顏色和厚度。

Answer 1

您可以在矢量圖層上使用樣式。

聲明你的風格

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

，然後將其連接到您的層

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

這裏是一個fiddle看到它在行動