18.Vue 3 + OpenLayers：实现添加全屏显示功能示例

前言

在地图应用中，全屏显示功能可以为用户提供更好的视觉体验和交互感受。本文将带大家实现一个基于 Vue 3 和 OpenLayers 的全屏显示地图功能，适合初学者或开发者快速上手。

项目准备

1. 项目搭建

如果尚未创建 Vue 3 项目，可以通过以下方式搭建：

# 使用 Vue CLI vue create vue-openlayers 
# 或使用 Vite（推荐更快的构建工具） npm create vite@latest vue-openlayers --template vue

2. 安装 OpenLayers

在项目根目录下安装 OpenLayers 依赖：

npm install ol

3. 全屏功能实现需求

• 加载地图
• 添加一个全屏显示控件

实现步骤

接下来，基于 Vue 3 Composition API 编写代码，完整代码如下：

代码实现

组件代码

<!--* @Author: 彭麒* @Date: 2024/12/9* @Email: [e-mail]* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><button class="back-button" @click="goBack">返回</button><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers实现添加全屏显示功能示例</div></div><div id="vue-openlayers" ref="mapContainer" class="map-x"></div></div>
</template><script setup>
import 'ol/ol.css'
import {ref, onMounted} from 'vue'
import {Map, View} from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import * as control from 'ol/control'
import router from "@/router";
const goBack = () => {router.push('/OpenLayers');
};
const mapContainer = ref(null) // 引用地图容器
let map = null // 保存地图实例
const initMap = () => {map = new Map({target: mapContainer.value, // 使用 ref 绑定的 DOM 元素layers: [new Tile({source: new OSM({wrapX: true})})],view: new View({projection: 'EPSG:4326', // 设置地图投影center: [114.064839, 22.548857], // 设置地图中心（深圳）zoom: 8 // 初始缩放级别}),controls: control.defaults().extend([new control.FullScreen() // 添加全屏控件])})
}
onMounted(() => {initMap() // 组件挂载后初始化地图
})
</script><style scoped>
.container {width: 840px;height: 520px;margin: 0 auto;border: 1px solid #42B983;
}
#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;
}
h3 {line-height: 40px;
}
</style>

代码详解

1. 添加全屏控件

使用 OpenLayers 提供的 control.FullScreen 模块，通过 control.defaults().extend() 将全屏功能集成到地图控件中。

2. 设置地图视图

在 View 配置中，设置投影方式为 EPSG:4326，并指定初始地图中心点和缩放级别。

3. 使用 Composition API

通过 ref 和 onMounted 来管理 DOM 元素和生命周期，确保地图在容器加载完成后正确初始化。

4. 加载地图图层

通过 Tile 加载 OpenStreetMap（OSM）图层，提供全球的地图数据。

运行效果

运行项目后，可以看到：

1. 地图加载完成，初始视图为深圳地区（经纬度：114.064839, 22.548857）。
2. 在地图右上角显示了一个全屏切换按钮，点击后地图会进入全屏模式。
3. 再次点击按钮，退出全屏模式。

---

完整项目运行

如果你的项目配置正确，只需启动项目即可查看效果：

npm run dev

访问 http://localhost:3000 查看地图加载效果。

---

小结

通过本文，我们成功实现了一个基于 Vue 3 和 OpenLayers 的全屏显示功能。OpenLayers 提供了丰富的地图控件，开发者可以根据需求自由组合，快速构建地图应用。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏和评论！此外，OpenLayers 还有更多实用控件（比如缩放滑块、比例尺等），你可以尝试探索更多功能。

声明：本文及代码仅供学习使用，转载请注明出处。

---

希望这篇文章能帮助你吸引更多读者！发布后，你还可以结合截图和运行效果让文章更生动～ 😊