OL的控件

控件是可见的小部件，使用DOM元素固定在屏幕上某个位置，通常包含在class样式为ol-overlaycontainer-stopevent的DOM元素容器内，比起使用简单的DOM元素处理与用户的常用操作，封装成控件更容易处理事件冒泡的问题。一般为了方便用户操作地图，每个地图API都会提供一些封装好的开箱即用的控件。如导航、比例尺、鼠标位置等。

当我们加载一个地图的时候，没有指定controls控件参数，ol会帮我们默认加载三个控件：

• ol.control.Zoom：缩放控件
• ol.control.Rotate：旋转控件
• ol.control.Attribution：图层数据源属性控件

添加控件的方式：

1. 初始化map对象时配置控件数组。但这样就会替换掉默认的控件，只显示配置的控件数组中的控件。
2. 在map初始化完后调用其addControl方法添加。

import '../style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import ScaleLine from 'ol/control/ScaleLine'
import FullScreen from 'ol/control/FullScreen'
//比例尺控件
let scaleLineControl = new ScaleLine({
    units: "metric"
})
//全屏显示控件
let fullSreen = new FullScreen();

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  }),
  // 方式一 添加
  controls:[fullSreen]
});

//方式二
map.addControl(scaleLineControl);

常用控件主要有：

• 缩放控件

  ol.control.ZoomSlider用于控制地图的缩放级别。

  import ZoomSlider from 'ol/control/ZoomSlider'
  let zoomSlider = new ZoomSlider()
  map.addControl(zoomSlider);
  

• 复位（定位）控件

  ol.control.ZoomToExtent用于将地图视图定位到指定区域，可以实现像书签、收藏等类似的功能。

  // 复位
  import ZoomToExtent from 'ol/control/ZoomToExtent'
  let initExtent = map.getView().calculateExtent();
  let zoomToExtent = new ZoomToExtent({
      extent: initExtent
  })
  map.addControl(zoomToExtent);
  

• 鼠标位置控件

  ol.control.MousePosition用于显示鼠标所在地图上的位置信息。

  var mouseControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4)   //坐标格式
      , projection: 'EPSG:3857'                           //投影坐标系
      , className: 'custom-mouse'                         //自定义的坐标信息显示样式
      , target: document.getElementById("mouse_position") //需要dom对象
      , undefinedHTML: '&nbsp'                            //定义未定义坐标的标记
  });
  map.addControl(mouseControl);
  

• 比例尺控件

  //比例尺控件
  var scaleLineControl = new ol.control.ScaleLine({
      units: "metric",//设置比例尺单位,支持degrees/imperial/us/nautical/metric，默认:metric
      target: "scaleline",//设置target，将控件渲染到地图视图外部,不指定默认在地图左下角
  });
  map.addControl(scaleLineControl);
  

• 鹰眼控件

  //鹰眼控件
  var overviewControl = new ol.control.OverviewMap({
      layers: [                   // 在鹰眼中加载相同坐标系下不同数据源的图层
          new ol.layer.Tile({
              source: new ol.source.OSM()
          })
      ]
      ,collapseLabel: "\u00BB"    //展开时功能按钮上的标识
      ,label: "\u00AB"            //折叠时功能按钮上的标识
      ,collapsed: false           //初始状态是否展开
  });
  map.addControl(overviewControl);