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

45.在 Vue 3 中使用 OpenLayers 鼠标点击播放视频

news 2025/11/15 22:06:01

引言

在 Web 开发中，地图可视化和互动功能是越来越重要的应用场景。OpenLayers 是一个强大的开源 JavaScript 库，用于显示和处理地图数据，支持多种地图服务和交互功能。在这个教程中，我们将介绍如何在 Vue 3 中集成 OpenLayers，并通过鼠标点击地图上的点来播放视频。

本文将展示如何使用 Vue 3 的 Composition API 构建一个动态的地图应用，点击地图上的标记（如城市）时，弹出一个视频播放框，展示相关视频内容。我们将结合 OpenLayers 和 Vue 3 的强大功能，实现一个简单的示例，帮助大家更好地理解和运用这两者的结合。

技术栈

Vue 3：现代前端框架，使用 Composition API。
OpenLayers：开源地图渲染库，用于处理和展示地图。
TypeScript：增强的 JavaScript，提供静态类型检查和类型推导。
CSS：用于样式的编写。

项目概述

我们将通过以下步骤来实现项目：

在 Vue 3 中安装并配置 OpenLayers。
初始化地图并在地图上添加自定义标记。
实现鼠标点击标记播放视频的功能。
创建一个简单的视频弹窗，展示视频内容。

步骤 1：安装 OpenLayers

首先，我们需要在 Vue 3 项目中安装 OpenLayers。你可以使用 npm 或 yarn 来安装：

npm install ol

步骤 2：创建 Vue 3 组件

接下来，我们将创建一个 Vue 3 组件，包含一个 OpenLayers 地图和视频播放功能。

<!--* @Author: 彭麒* @Date: 2024/12/26* @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"></div><div id="popup-box" class="ol-popup"><div id="popup-content"><video id="videoid" width="202" height="184" controls autoplay><source src="https://www.apple.com/newsroom/videos/vision-pro-visionos/large_2x.mp4" type="video/mp4"></video></div></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import Feature from 'ol/Feature';
import { Point } from 'ol/geom';
import rocketImg from '@/assets/OpenLaysers/maker.png';
const map = ref(null);
const overlayer = ref(null);
const vsource = ref(new VectorSource({}));
const videoUrl = ref('');
const cname = ref('');
const cimgurl = ref('');
import router from "@/router";const goBack = () => {router.push('/OpenLayers');
};
const citys = ref([{position: [116.00, 39.80],videourl: "https://www.apple.com/newsroom/videos/vision-pro-visionos/large_2x.mp4",imgurl: rocketImg,},
]);const companyPoint = () => {let features = [];let data = citys.value;for (let i = 0; i < data.length; i++) {let feature = new Feature({geometry: new Point(data[i].position),citydata: data[i],});let img = data[i].imgurl;feature.setStyle(pointStyle(img));features.push(feature);}vsource.value.addFeatures(features);
};const pointStyle = (img) => {let Styles = [];Styles.push(new Style({image: new Icon({src: img,anchor: [0.5, 0.5],scale: 0.8,}),}));return Styles;
};const clickPoint = () => {const box = document.getElementById('popup-box');overlayer.value = new Overlay({element: box,autoPan: {animation: {duration: 250,},},});map.value.addOverlay(overlayer.value);map.value.on('singleclick', (e) => {let feature = map.value.forEachFeatureAtPixel(e.pixel, (feature, layer) => {return feature;});if (feature) {let cityInfo = feature.get('citydata');console.log(cityInfo);cname.value = cityInfo.name;cimgurl.value = cityInfo.imgurl;overlayer.value.setPosition(e.coordinate);videoUrl.value = cityInfo.videourl;} else {overlayer.value.setPosition(undefined);}});
};const initMap = () => {let osmLayer = new Tile({source: new OSM(),});let cityLayer = new VectorLayer({source: vsource.value,});map.value = new Map({target: "vue-openlayers",layers: [osmLayer, cityLayer],view: new View({center: [116.4074, 39.9042],zoom: 6,projection: 'EPSG:4326',}),});clickPoint();
};onMounted(() => {initMap();companyPoint();
});
</script><style scoped>
.container {width: 840px;height: 590px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 470px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}.ol-popup {position: absolute;background-color: rgba(255, 0, 255, 0.8);padding: 5px;border-radius: 5px;border: 1px solid #cccccc;bottom: 12px;left: -50px;color: #FFFFFF;min-width: 200px;
}.ol-popup:after,
.ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;
}.ol-popup:after {border-top-color: rgba(255, 0, 255, 0.8);border-width: 10px;left: 48px;margin-left: -10px;
}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;
}#popup-content {width: 202px;height: 184px;border-radius: 10px;border: 1px solid #fff;padding: 10px;
}
</style>

代码讲解

1. 地图初始化

通过 OpenLayers 的 Map 和 View 对象，我们创建了一个简单的地图，并设置了中心点和缩放级别。地图层使用了 Tile 和 OSM（OpenStreetMap）作为底图。

2. 自定义标记和视频源

我们在地图上添加了一个标记，表示一个城市，并且将视频 URL 和图标 URL 绑定到该标记上。当用户点击标记时，会弹出一个视频播放器。

3. 鼠标点击事件

通过监听地图的 singleclick 事件，我们获取到点击位置的城市信息，并在弹窗中更新视频 URL，显示相关视频内容。

4. 视频弹窗

视频播放器被嵌入在一个 ol-popup 弹窗中，用户点击标记时，弹窗会显示，并播放相应的视频。

结语

通过本教程，你可以在 Vue 3 项目中集成 OpenLayers，实现通过鼠标点击地图标记来播放视频的功能。这种交互方式在很多地图可视化应用中都非常有用，比如在城市地图中查看视频介绍、展示产品演示视频等。

希望这篇文章对你有所帮助，鼓励大家进一步探索 OpenLayers 的强大功能，结合 Vue 3 开发出更多富有创意和交互性的地图应用！

引言

技术栈