OpenLayers3在圈子上添加文本

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

這是一個擺弄它的小提琴