百度网站服务器,建设工程管理有限公司,做网站制作较好的公司,申请号的网站引言
在 Web 开发中#xff0c;地图可视化和互动功能是越来越重要的应用场景。OpenLayers 是一个强大的开源 JavaScript 库#xff0c;用于显示和处理地图数据#xff0c;支持多种地图服务和交互功能。在这个教程中#xff0c;我们将介绍如何在 Vue 3 中集成 OpenLayers地图可视化和互动功能是越来越重要的应用场景。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: 1062470959qq.com* Description: 此源码版权归吉檀迦俐所有可供学习和借鉴或商用。--
templatebutton classback-button clickgoBack返回/buttondiv classcontainerdiv classw-full flex justify-center flex-wrapdiv classfont-bold text-[24px]在Vue3中使用OpenLayers鼠标点击播放视频/div/divdiv idvue-openlayers/divdiv idpopup-box classol-popupdiv idpopup-contentvideo idvideoid width202 height184 controls autoplaysource srchttps://www.apple.com/newsroom/videos/vision-pro-visionos/large_2x.mp4 typevideo/mp4/video/div/div/div
/templatescript setup langts
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();
});
/scriptstyle 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 和 OSMOpenStreetMap作为底图。
2. 自定义标记和视频源
我们在地图上添加了一个标记表示一个城市并且将视频 URL 和图标 URL 绑定到该标记上。当用户点击标记时会弹出一个视频播放器。
3. 鼠标点击事件
通过监听地图的 singleclick 事件我们获取到点击位置的城市信息并在弹窗中更新视频 URL显示相关视频内容。
4. 视频弹窗
视频播放器被嵌入在一个 ol-popup 弹窗中用户点击标记时弹窗会显示并播放相应的视频。 结语
通过本教程你可以在 Vue 3 项目中集成 OpenLayers实现通过鼠标点击地图标记来播放视频的功能。这种交互方式在很多地图可视化应用中都非常有用比如在城市地图中查看视频介绍、展示产品演示视频等。
希望这篇文章对你有所帮助鼓励大家进一步探索 OpenLayers 的强大功能结合 Vue 3 开发出更多富有创意和交互性的地图应用
