OpenLayers学习笔记中级篇（四、地图图标操作）
图标是GIS应用中必不可少的要素，比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息，比如地址，评价，或者更为复杂的业务信息。本节将从基本的应用入手讲解，直到比较高级一些的自定义特色图标和信息展示。
在OpenLayer3中添加图标有两种方式，一种是我们这一小节马上就要介绍的，比较传统的overlay，另一种是下一小节马上就要介绍的Feature + Style的方式。 overlay之所以传统，是因为它就是传统的html方式显示图片。 下面就是用这种方式加载一个五角星的示例：
1、overlay方式添加图标
地图图标加载
还是先运行看一下效果如下：
这样我们就把一个五角星加载地图上北京的位置上！来看一下具体的流程：
首先我们定义了一个div用来放置五角星图片，然后我们定义了一个Overlay，在Overlay的元素位置上放上五角星的div id，然后非常重要的一步是给五角星图片设置一个位置，最后把Overlay图层加入到地图上即可！
功能已经完成了，下面我们来分析一下这种方式加载图标的优点和缺点：
缺点：
当图标比较多的情况下，如果采用这种方式，那么我们会加入非常多的HTML元素，从而造成效率降低。 关于效率的测试，大家可以自行测试。 为什么会这样呢？ 因为界面上元素的遍历在数量比较多的情况下，会变慢，基于此基础上的渲染，鼠标事件都会变慢。
优点：
这种使用传统的方式显示图标可以应用传统的HTML技术，比如鼠标移动到图标上，鼠标图标变成手势。 我们可以用css来处理就可以了，比如在head里面添加下面的代码：
就可以看到鼠标放到锚点上去的时候，鼠标图标从箭头，变成手了。 类似的其他技术都可以应用上去，比如css动画。 鉴于动画在前端的重要性，下面单独用实例来讲解。
2、给图标添加动画效果，话不多说，直接上代码：
地图图标加载
这是一个动态的动画效果，大家可以自己测试一下看看效果，还是很不错的。这里我们也只是比demo1多做了一些css样式的改变，这也是overlayer加载图标的优点，我们可以使用css来处理图标的加载样式。除了这种css实现动画之外，我们还可以直接加载gif动画，这是非常简单的，在此不再赘述！
下面我们来介绍第二种加载图标的方法：Feture+Style的方式加载图标。其实这种方式之前我们已经使用过了，就是在地图加载章节那儿的矢量地图的加载方式那儿，下面我们根据具体的代码来看一下：
3、feature+style加载图标
地图图标加载
还是先运行代码看一下：
图标加载成功，下面我们进行代码的讲解，看一下我们这种方法具体的加载顺序：
首先我们需要一个vector的layer来放置图标，然后我们创建一个Feature，并设置好在地图上的位置，然后我们设置样式Feature，在样式中就可以设置图标，最后将feature添加到之前的创建的layer中去，就可以加载出来图标了！下面我们来对比一下overlayer和feature方式加载的异同点：
效果是一样的，但从代码上来看，是不一样的:
- 首先
overlay需要HTML元素img，但这种方式不需要 overlay是添加在map上的，但是这种方式需要一个Vector的layer，并添加在其上- 我们没有办法像
overlay那样使用一些HTML技术
虽然不能用css直接修改图标显示，但并不是说使用这种方式没有自定义的余地，大家可以先在官网API上看一下ol.style.Icon的构造参数，会看到可以设置位置，透明度，放大缩小，旋转等，基本能满足大多数的应用，由于和CSS不同，很多同学在应用时遇到一些问题，所以下面给出了一些具体的使用示例。
4、大家看上面的效果图时会发现，我们的图标是不能随着层级的放大缩小而改变自己的大小的，这样有时候图标的显示是非常丑陋的，我们下面做一个根据层级放大缩小图标的功能！这个功能很简单，在ol.style.Icon中是可以设置scale的，这样就为 我们提供了方便。 通过设置它，就可以做到。话不多说，直接上代码如下：
地图图标加载
大家可以自行测试一下效果！
5、下面我们再来设置一下如何直接通过绘制的形式直接加载图标，OpenLayers 3提供了一个规则几何体的样式类ol.style.RegularShape，使用它可以轻松绘制正方形，三角形等,也支持星形规则几何图形，直接上代码如下：
地图图标加载
看一下效果：
我们绘制的三角形和五角星都加载到了地图上，其实加载的方式和feature加载图标的方法是一样的，只不过我们把要加的图标换成了我们使用ol.style.Style自己绘制的图形，另外由代码我们也可以得到，我们可以通过这种方法加载各种规则的多边形！除了基本的设置之外，还支持图形旋转，以及跟随地图旋转而旋转，这些设置在其他的应用中也多有涉及，此处不再用实例来介绍，可自行验证。
6、有了加载规则的绘制图标，那么一些不规则的图标如何绘制并加入到地图种呢？别着急，马上来实现它！我们可以用canvas自己来绘制不规则的图标，好了，直接上代码如下：
地图图标加载
看一下效果图：
我们成功绘制了不规则图标并把它加入到了地图中！我们使用了ol.style.Icon样式的img属性来设置，需要注意的是，必须设置imgSize属性，因为仅仅通过img设置的图像对象，没有办法自动获取宽高。 同时，官网也提供了一个类似的例子earthquake-custom-symbol，只是使用OpenLayers3 内部提供的封装库来绘制图像到canvas上，原理一样。有了这种方式之后，相信做任何图标都不会遇到难题了。
7、现在我们加载各种样式的图标都不是问题了，但是我们目前加载的图标都是静态的，实际项目中我们可能需要对图标做点击时间然后进行各种操作，在实际业务应用中，需要根据环境条件，动态的修改图标样式，以反馈数据变化。 比如像下面这样，点击五星，五星图标会用红色填充，话不多受，直接上代码：
地图图标加载
看一下效果：
点击前：
点击后：
这里我输出了一句“我要红了”，其实在正式项目中，我们可以在这一句话的位置进行数据的反馈等操作！
8、前面我们加载的都是图标，下面我们来做一个加载文字的demo，话不多说，直接上代码：
文字标注加载
看一下效果：
加载成功！关于文字标注，还有很多属性可以设置，比如缩放，旋转，以及位移等等，非常简单，可自行设置调试。
9、styleFunction的应用
很多时候，我们会忽略styleFunction的存在，但很明显的，它可以让我们的图标或者标签应用更加灵活，比如根据层级放大缩小图标也可以用styleFunction来实现，直接上代码：
styleFunction应用
大家可以自己运行代码看一下效果，这里解释一下代码：对比一下前面同样功能的代码，你会发现这样更加的简单， 同时在此基础上扩展开来的应用也会更加的多。 比如动态替换图标，或者让图标不显示等等，可自行来实现这两个需求，以掌握此方式的使用。
在上面这个例子中，我们是在feature上应用了styleFunction，通过官网API文档可以看到，其类型为ol.FeatureStyleFunction，函数仅带有一个参数resolution，在上面的代码中看到了，在函数体内this指的是当前的feature，根据文档说明，这个函数要范围一个style数组。 这一点需要注意，虽然实际使用中，即使没有返回数组也不会出错，但还是希望大家能遵守官网API的说明来使用该接口。
我们知道，除了feature可以设置样式之外，layer也是可以设置样式的，同样地也支持styleFunction，但是需要注意的是，其定义和feature的不一样，类型为ol.style.StyleFunction，该函数具有两个参数，第一个参数为feature，第二个参数为resolution，同样地，该函数需要返回style数组。styleFunction在feature上具有很好的灵活性，那么应用在layer上，同样威力无穷，比如像下面这个，直接上代码：
styleFunction应用
看一下效果：
在地图上可以看到中心位置有一个圆，一个点，一个五边形，但这次都没有直接在这些feature上设置样式，而是创建layer使用的style function，根据feature定义的type，返回不同的样式。这就是一个典型的根据feature的属性进行不同渲染的例子，可以在业务上无限扩展，比如feature的属性可以是速度，可以是大小，可以是时间，可以是权重等等。 由此可见，只要掌握了这个方法，前端按照条件渲染就不再困难。
好了，关于地图标注的加载和相关操作就进行到这儿了，上门我们写过的demo可以满足绝大多数项目的需要了，希望大家多多动手练习！下一节我们将根据openlayers官网的demo来做地图开发时的各种事件，大家加油！