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）如何在圆圈上添加标题＆＃34;近似区域＆＃34 ;;并且还能够定义颜色和字体。

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在Circle上添加Text

1 个答案: