Openlayers的常用控件（一）——Select和FullScreen

• OpenLayers框架内包含多种控件，比如选中、全屏、比例尺等等等等，这些控件的存在会给地图的展示带来很好的效果，从这篇文章开始，会对OpenLayers的常用控件进行介绍。
  

一、Select

• Select控件是用于选中Feature的控件，之前在OpenLayers的交互教程中已经分享过了这方面的内容，就不再进行赘述了。
• 链接：Openlayers的交互功能（三）——Feature的选中Select控件

二、FullScreen

1.FullScreen全屏控件

• 谷歌浏览器中的F11会将浏览器页面进入全屏状态，OpenLayers可以支持这种功能，方式是通过初始化一个FullScreen控件，点击按钮以后会将地图进入到全屏状态中。

2.代码实现

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
</template>

<script setup>
// 引入需要的包
import TileLayer from "ol/layer/Tile";
import { OSM } from "ol/source";
import { View } from "ol";
import { Map } from "ol";
import { onMounted } from "vue";
import { FullScreen } from "ol/control";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let selectedFeature; // 选中的图斑
let select; // 选中控件
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      new TileLayer({
        source: new OSM(), // 加载OSM底图
      }),
    ],

    // 以EPSG:4326为坐标系定义地图的视图中心和缩放级别
    view: new View({
      projection: "EPSG:4326",
      center: [125.3574397847, 43.8865062907],
      zoom: 18,
    }),
  });

  // 添加全屏控件
  let fullScreen = new FullScreen();
  map.addControl(fullScreen);
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

2.实现效果