OpenLayers教程三：地图控件之缩放控件

目录

一、地图控件简介

二、普通缩放控件

三、滑块缩放控件

四、缩放至特定位置控件

五、修改控件样式

---

一、地图控件简介

    OpenLayers封装了很多控件用于对地图进行操作、显示地图信息等。

    具体来说，控件是一个地图上可见的小部件，其DOM元素位于屏幕上的固定位置。它们可以包含用户输入（以按钮的形式），也可以只提供信息。控件的位置是使用CSS来确定，当然也可以使用CSS来调整。默认情况下，控件被放置在地图控件层（地图控件层在上一篇文章讲过），也就是CSS类名为ol-overlayContainer-stopEvent的元素中，但也可以调整，使控件基于外部DOM元素来实现。

    从OpenLayers的API来看，具体有如下控件类：

    具体来说，这些控件是干嘛的呢？这里简单介绍一下

• 归属控件（Attribution）    ——    用于展示地图资源的版权或者归属，它会默认加入到地图中。
• 全屏控件（FullScreen）    ——    控制地图全屏展示
• 坐标拾取控件（MousePosition）    ——    用于在地图上拾取坐标
• 鹰眼控件（OverviewMap）    ——    生成地图的一个概览图
• 旋转控件（Rotate）    ——    用于鼠标拖拽旋转地图，它会默认加入到地图中。
• 比例尺控件（ScaleLine）    ——    用于生成地图比例尺
• 滑块缩放控件（ZoomSlider）    ——    以滑块的形式缩放地图
• 缩放至特定位置控件（ZoomToExtent）    ——    用于将地图视图缩放至特定位置
• 普通缩放控件（Zoom）    ——    普通缩放控件，它会默认加入到地图中。

 

二、普通缩放控件

    现在先在上一篇文章中创建的openlayers文件夹中再创建一个controls文件夹：

    然后把first文件夹中的simple_map.html复制到controls文件夹中，并将其改名为zoom.html:

    普通缩放控件具有两个按钮分别用于地图的缩小和放大。因为它会默认加入到地图中，所以在前面一篇文章中，我们其实已经见到它了，用浏览器打开zoom.html：

    可以用鼠标分别点击这两个按钮用于地图缩小和放大。

  &nbs