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

});

这是 fiddle: https://jsfiddle.net/79hjbxw9/

1) 如何在标题为 "Approximate Area" 的圆圈上放置文本；还可以定义颜色和字体。

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 可以看到它的实际效果

OpenLayers3 在圆上添加文字

OpenLayers3 add Text over Circle

html

javascript

css

openlayers-3