在OpenLayer3中添加图标有两种方式

在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。 下面就是用这种方式加载一个锚点的示例：

<div id="map" style="width: 100%"></div>
<!--下面就是传统的显示一个图片图标的方式，用img-->
<div id="anchor"><img src="../img/anchor.png" alt="示例锚点"/></div>
<script type="text/javascript">
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  // 下面把上面的图标附加到地图上，需要一个ol.Overlay
  var anchor = new ol.Overlay({
    element: document.getElementById('anchor')
  });
  // 关键的一点，需要设置附加到地图上的位置
  anchor.setPosition([104, 30]);
  // 然后添加到map上
  map.addOverlay(anchor);
</script>

缺点

当图标比较多的情况下，如果采用这种方式，那么我们会加入非常多的HTML元素，从而造成效率降低。 关于效率的测试，大家可以自行测试。 为什么会这样呢？ 因为界面上元素的遍历在数量比较多的情况下，会变慢，基于此基础上的渲染，鼠标事件都会变慢。

优点

这种使用传统的方式显示图标可以应用传统的HTML技术，比如鼠标移动到图标上，鼠标图标变成手势。 我们可以用css来处理就可以了

二.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的构造参数

转载自：https://blog.csdn.net/feiteyizu/article/details/81133845