OpenLayers之加载常用控件

0.默认控件

OpenLayers 的地图容器通过ol.control.defaults默认加载了3个常用控件：缩放控件（ol.control.Zoom）、旋转控件（ol.control.Rotate）、图层数据源属性控件（ol.control.Attribution）。因此在默认情况下，可通过左上角的缩放按钮控制地图的缩放，也可通过右下角的图层数据源属性按钮来展开或折叠具体的数据源信息。

1.滑块缩放控件

map.addControl(new ZoomSlider())

2.缩放至特定位置控件

var zoomToExtent = new ZoomToExtent({
	extent: [13100000, 4290000, 13200000, 5210000]
});
map.addControl(zoomToExtent)

3.全屏控件

map.addControl(new FullScreen())

4.坐标拾取控件

 map.addControl(new MousePosition({
   // 设置数据格式
   coordinateFormat:createStringXY(6),
   // 设置空间参考系统为'EPSG:4326'
   projection:'EPSG:4326'
 }))

5.鹰眼控件

map.addControl(new OverviewMap({
  // 控制鹰眼控件展开
  collapsed:false
}))

6.比例尺控件

map.addControl(new ScaleLine());

7.旋转控件

同时按住键盘的Shift键+Alt键，然后用鼠标拖拽地图，可以使地图旋转：此时地图右上角会出现一个复位键，点击它可以让地图恢复原始角度。

最后附上源码

<template>
  <div id="map" class="imap">
  </div>
  <!-- 注意:div必需指定高度,否则加载不出来 -->
</template>
<script setup>
  import {
    onMounted,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  import {
    ZoomSlider,
    ZoomToExtent,
    FullScreen,
    MousePosition,
    OverviewMap,
    ScaleLine
  } from 'ol/control'
  import {
    createStringXY
  } from 'ol/coordinate';
  onMounted(() => {
    var map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的tk",
            attributions: '矢量底图',
            wrapX: false
          }),
          preload: Infinity
        }),
        new TileLayer({
          source: new XYZ({
            url: "http://t0.tianditu.gov.cn/cva_w/wmts?tk=你的tk",
            attributions: '矢量注记',
            wrapX: false
          }),
          preload: Infinity //将地图进行缓存，通过缓存提高用户体验，拖动缩放不会出现太多空白区域。infinity---预读，preload:0---默认为0不显示
        }),
      ],
      view: new View({
        //地图初始中心点
        center: [113.83, 37.05],
        projection: "EPSG:4326",
        minZoom: 2,
        maxZoom: 18,
        zoom: 12
      })
    });

    //1.滑块缩放控件
    map.addControl(new ZoomSlider())
    //2.缩放至特定位置控件
    var zoomToExtent = new ZoomToExtent({
      extent: [13100000, 4290000, 13200000, 5210000]
    });
    map.addControl(zoomToExtent)
    //3.全屏控件
    map.addControl(new FullScreen())
    //4.坐标拾取控件
    map.addControl(new MousePosition({
      // 设置数据格式
      coordinateFormat: createStringXY(6),
      // 设置空间参考系统为'EPSG:4326'
      projection: 'EPSG:4326'
    }))
    //5.鹰眼控件
    map.addControl(new OverviewMap({
      // 控制鹰眼控件展开
      collapsed: false
    }))
    // 6.比例尺控件
    map.addControl(new ScaleLine());
    // 7.旋转控件
    // 同时按住键盘的Shift键+Alt键，然后用鼠标拖拽地图，可以使地图旋转：此时地图右上角会出现一个复位键，点击它可以让地图恢复原始角度。



    window.olmap = map
  })
</script>
<style scoped>
  .imap {
    height: 100%;
    width: 100%;
  }
</style>```