OpenLayers3 서클 위의 텍스트 추가

Question

많은 것을 검색 한 후에 마침내지도에서 원을 그릴 수있는 코드 블록을 발견했습니다.

HTML :

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

CSS :

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

자바 스크립트 : https://jsfiddle.net/79hjbxw9/

1) 난에 텍스트를 넣을 수있는 방법이이 바이올린입니다

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

}); 

그만큼 "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 
     }); 

행동

당신은 내 일 저장