文字标注

前面基本都在围绕着图标进行说明，其实用Feature + Style的方式，也是可以单独添加文字的，虽然简单，但可能有些同学会忽略这样的做法，所以在此用一个简单的示例来说明：

代码如下：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
  var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
  })
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }), 
      layer
    ],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104.06, 30.67],
      zoom: 10
    })
  });

  var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104.06, 30.67])
  });
  // 设置文字style
  anchor.setStyle(new ol.style.Style({
    text: new ol.style.Text({
      // font: '10px sans-serif' 默认这个字体，可以修改成其他的，格式和css的字体设置一样
      text: '淡叔所在地成都',
      fill: new ol.style.Fill({
          color: 'red'
      })
    })
  }));
  layer.getSource().addFeature(anchor);
</script>

还有很多属性可以设置，比如缩放，旋转，以及位移等等，非常简单，可自行设置调试。