文字标注

前面基本都在围绕着图标进行说明,其实用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>

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