在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。 下面就是用这种方式加载一个锚点的示例：
var anchor = new ol.Overlay({ element: document.getElementById('anchor') }); anchor.setPosition([104, 30]); map.addOverlay(anchor); </script>
代码如下：
<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来处理就可以了，比如在head里面添加下面的代码：
<style type="text/css">
#anchor {
cursor:pointer;
}
</style>
就可以看到鼠标放到锚点上去的时候，鼠标图标从箭头，变成手了。 类似的其他技术都可以应用上去，比如css动画。 鉴于动画在前端的重要性，下面单独分出一个小节用实例来讲解。