style及应用

前面已经介绍了第一种加载图标的方式，现在介绍第二种方式，使用Feature + Style来实现，用这种方式实现之前的效果如下：

代码如下：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
  // 我们需要一个vector的layer来放置图标
  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, 30],
      zoom: 10
    })
  });

  // 创建一个Feature，并设置好在地图上的位置
  var anchor = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  // 设置样式，在样式中就可以设置图标
  anchor.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
      src: '../img/anchor.png'
    })
  }));
  // 添加到之前的创建的layer中去
  layer.getSource().addFeature(anchor);
</script>

效果是一样的，但从代码上来看，是不一样的:

• 首先overlay需要HTML元素img，但这种方式不需要
• overlay是添加在map上的，但是这种方式需要一个Vector的layer，并添加在其上
• 我们没有办法像overlay那样使用一些HTML技术

应用

虽然不能用css直接修改图标显示，但并不是说使用这种方式没有自定义的余地，大家可以先在官网API上看一下ol.style.Icon的构造参数，会看到可以设置位置，透明度，放大缩小，旋转等，基本能满足大多数的应用，由于和CSS不同，很多同学在应用时遇到一些问题，所以下面给出了一些具体的使用示例。