control 是什么

• Controls是用来控制地图的。如通过按钮控制地图大小，在地图map上添加修饰等。

• 在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。

常用的控件

• controldefaults，地图默认包含的控件。

• fullscreen，全屏控件，用于全屏幕查看地图。

• mouseposition，鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影。

• overviewmap，地图全局视图控件（鹰眼图）。

• scaleline，比例尺控件。

• zoom，地图放控件。

• zoomslider，地图缩放滑块刻度控件。

使用控件

• 实例化地图map，通过参数control传入，不传值默认controldefaults中的控件。

• 也可以利用map对象的addControl()或addControls()方法在地图上添加Controls对象。

• 需要在默认控件基础上继续添加控件，可以使用ol.control.defaults().extend([new ol.control.FullScreen()]) 方法传入。

fullscreen 全屏控件

map.addControl(new ol.control.FullScreen())

mouseposition 显示鼠标所在坐标

    var mousePositionControl = new ol.control.MousePosition({
      //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
      projection: 'EPSG:4326',
      //显示鼠标位置信息的目标容器
      target: document.getElementById('mouse-position'),
      //未定义坐标的标记
      undefinedHTML: ''
    })
    this.map.addControl(mousePositionControl)

scaleline 控件、zoom 控件、zoomslider 控件

map.addControl(new ol.control.ScaleLine())
map.addControl(new ol.control.Zoom())
map.addControl(new ol.control.ZoomSlider())

overviewmap 地图全局视图（鹰眼图）

• 使用地图作为另一个定义地图的概览图创建一个新控件。

• 常用参数

  • collapsed，收缩选项，默认为true，收缩。

  • collapsible，是否可以收缩为图标按钮，默认为 true。

  • label，当 overviewmapcontrol 收缩为图标按钮时，显示在图标按钮上的文字或者符号，默认为 »。

  • layers，overviewmapcontrol针对的图层，默认情况下为所有图层，一般这里设置的图层和map图层数据一致。

    var overview = new ol.control.OverviewMap({
      collapsed: false,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
          })
        })
      ]
    })
    map.addControl(overview)

• 当然除了这些控件，官网上还有其他的控件。

• 我们也可以自定义控件来操作地图。可以通过使用侦听器创建元素，创建一个实例，将其用于简单的自定义控件：

var myControl = new Control({element: myElement});