当前位置：首页 > news >正文

济南网站备案流程怎么做网站推广

news 2025/7/15 20:29:29

济南网站备案流程,怎么做网站推广,如何做公司官网,公司介绍视频制作前言在地图应用中，全屏显示功能可以为用户提供更好的视觉体验和交互感受。本文将带大家实现一个基于 Vue 3 和 OpenLayers 的全屏显示地图功能，适合初学者或开发者快速上手。项目准备 1. 项目搭建如果尚未创建 Vue 3 项目，可以通过以下…

前言

在地图应用中，全屏显示功能可以为用户提供更好的视觉体验和交互感受。本文将带大家实现一个基于 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: 1062470959@qq.com* @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>