openlayers 地图上加图标_OpenLayers学习笔记中级篇（四、地图图标操作）

图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。

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

1、overlay方式添加图标

地图图标加载

还是先运行看一下效果如下：

这样我们就把一个五角星加载地图上北京的位置上！来看一下具体的流程：

首先我们定义了一个div用来放置五角星图片，然后我们定义了一个Overlay，在Overlay的元素位置上放上五角星的div  id，然后非常重要的一步是给五角星图片设置一个位置，最后把Overlay图层加入到地图上即可！

功能已经完成了，下面我们来分析一下这种方式加载图标的优点和缺点：

缺点：

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