上一节提到，事件是用户与地图交互的基础，绘图自然也离不开各种事件操作，例如，在绘制线要素的时候，鼠标要点击两个以上的点来确定要绘制的一条线。当然，绘图功能背后不仅仅是点击事件这么简单。
在学习绘图功能之前，要先了解和学习一下Interaction(交互)。只要是涉及与地图的交互，就会涉及Intercation，它定义了用户与地图进行交互的基本要素和事件。Interaction定义了很多交互功能，包含默认添加的交互功能，如鼠标拖拽旋转、键盘移动地图、鼠标滚轮放大和缩小地图等。同时，OpenLayers3也兼容了移动端设备，有很多触摸操作事件，如两个手指缩放地图等操作，这是OpenLayers3的一个改进。
具体的地图默认事件可以在ol.interaction中查看。因为是默认事件，用户在进行开发时，无须设置就可以使用这些功能，即在生成地图时，已经内置好了这些功能供用户使用。以下是一些内置默认事件。
ol.interaction.DragRotate:按住“Alt＋Shift”键，用鼠标左键拖动地图，就能让地图旋转，旋转后地图右上角会出现一个箭头按钮，点击后可以重新显示回正方向。
ol.interaction.DoubleClickZoom:用鼠标左键双击地图，可以放大地图。
ol.interaction.DragPan:按住鼠标左键，可以平移地图。
ol.interaction.PinchRotate:如果是触摸屏，用两个手指在触摸屏上旋转，可以旋转地图。
ol.interaction.PinchZoom:如果是触摸屏，用两个手指在触摸屏上缩放，就可以缩放地图。
ol.interaction.KeyboardPan:使用键盘上的上、下、左、右键，可以平移地图。
ol.interaction.KeyboardZoom:使用键盘上的“＋/－”键，可以缩放地图。
ol.interaction.MouseWheelZoom:滚动鼠标滑轮，可以缩放地图。
ol.interaction.DragZoom:按住键盘上“Shift”键，同时用鼠标左键在地图上框选，可以实现框选放大地图。
除了地图默认事件，用户还可以使用ol.interaction.Select来选取地图上任意的feature进行各种操作。以下是一个选取某个点改变颜色的例子:
(www.xing528.com)
【说明】首先创建一个用于存放circle的layer，设置圆的半径为7，填充色为蓝色，然后在地图中添加底图和circleLayer，接着分别创建两个圆并添加到circleLayer中。map.addInteraction添加了一个用于选择feature的交互，这里代码中的第一个参数是ol.interaction.Select，它定义了选中后的要素的样式填充为红色，并且圆的半径为10。第二个参数设置了过滤条件，它有两个参数feature和layer，可以使用feature写过滤，也可以用layer写过滤，或者根据业务将它们相结合，这里是返回选中要素类型为点类型的要素。我们可以看到选中前和选中后的效果对比，选中后的圆变成了红色且半径变为10，如图6-2、图6-3所示。
OpenLayers3的交互不只有选择，还有更强大的绘图功能。使用绘图类ol.interaction.Draw，支持点、线、多边形、圆等图形绘制。下面是一个绘制点、线、多边形和圆的例子。
首先定义html元素:
图6-2 原点样式(左侧圆点为蓝色)
图6-3 点击后点样式(左侧圆点为红色)
【说明】这个例子中，首先要初始化一个矢量数据源对象，将其加载到矢量数据图层中，然后加载到map中。紧接着定义绘图交互的函数，使用的是前面提到的ol.interaction.Draw类，其数据源就是矢量图层数据源，也就是将我们绘制的图形放在这里面(可以把其看成存放绘制的矢量图形的容器)。ol.interaction.Draw中的type是绘图类型，根据下拉框中的值进行选择，在官方API中定义了Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon、Circle等类型。当然，我们不要忘记把初始化交互绘图对象赋值给draw后，要使用map.addInteraction()方法将其加入到map中，这样就可以进行绘图了。如果想要移除绘图控件，则调用map.removeInteraction()函数并传入想要移除的控件。创建source的时候，设置wrapX属性为false，目的是为了避免当地图缩小到一定程度之后，会显示多个地图的问题。
绘图效果如图6-4所示。
图6-4 绘图效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
