原创 VueVirtuoso 2025-01-28 09:01 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
需求背景
随着科技的进步，虚拟现实（VR）技术在家居行业的应用越来越普遍。我们项目的目标是通过结合 VR 看房和实时场景展示，提升用户的体验，用户可以在家中便能身临其境地感受房屋的空间布局和氛围。此外，我们希望通过高德地图提供的标记点功能，帮助用户快速定位感兴趣的区域。
业务这边想要实现右边链接的效果阿里云付费全景图，类似VR看房，支持360° x 360°任意旋转，支持自定义添加标注，支持切换场景等功能，效果如下
需求分析
「VR 看房」：
用户能够通过 VR 技术查看房屋的内部和外部环境。
提供 360 度全景展示，使用户获得沉浸式体验。
「实时场景展示」：
通过高德地图展示特定区域内的房屋信息。
确保场景内容的及时更新，提升信息的准确性和实用性。
「自定义标记点」：
利用高德地图 API 实现用户自定义标记点，标记感兴趣的房屋。
每个标记点配有信息提示框，展示房屋的基本信息。
「海量标记点创建（MassMarks）」：
支持在地图上实现批量标记展示，确保用户能够高效获取信息。
技术方案
「技术栈」：
「Vue.js」：前端框架，用于构建用户界面。
「Photo Sphere Viewer」：用于显示 360 度全景图的组件。
「高德地图 API」：提供地图服务和标记点功能。
实施步骤
「项目初始化」：创建新的 Vue 项目，并安装依赖：
vue create vr-house-view
cd vr-house-view
npm install photo-sphere-viewer vue-amap
「集成 Photo Sphere Viewer」：在 Vue 组件中使用 Photo Sphere Viewer 显示 360 度全景图。
<template>
<div id="photo-sphere-viewer"></div>
</template>
<script>
import PhotoSphereViewer from 'photo-sphere-viewer';
export default {
mounted() {
const viewer = new PhotoSphereViewer({
container: document.getElementById('photo-sphere-viewer'),
panorama: 'path/to/your/panorama.jpg', // 替换为你的全景图路径
});
},
};
</script>
<style>
#photo-sphere-viewer {
width: 100%;
height: 400px;
}
</style>
「高德地图集成」：创建地图组件，并配置高德地图 API。
<template>
<div id="map" style="width: 100%; height: 400px;"></div>
</template>
<script>
export default {
mounted() {
const map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 13,
});
},
};
</script>
「添加标记点功能」：创建自定义标记点，并展示房屋信息。
// 在地图组件中添加标记点
addMarker(lng, lat, title) {
const marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat),
title: title,
});
marker.setMap(this.map);
marker.on('click', () => {
this.showInfoWindow(lng, lat, title);
});
}
showInfoWindow(lng, lat, title) {
const infoWindow = new AMap.InfoWindow({
content: `<div>${title}</div>`,
position: new AMap.LngLat(lng, lat),
});
infoWindow.open(this.map, new AMap.LngLat(lng, lat));
}
「实现海量标记点」：从后端获取房屋数据，并在地图上批量生成标记点。
async fetchProperties() {
const response = await fetch('/api/properties'); // 替换为你的 API
const properties = await response.json();
properties.forEach(prop => {
this.addMarker(prop.longitude, prop.latitude, prop.title);
});
}
「结合 VR 效果」：在用户点击特定标记点时，切换至对应的 VR 场景。
marker.on('click', () => {
this.viewer.setPanorama(`path/to/vr/${prop.id}.jpg`); // 替换为相应的 VR 场景路径
});
全景图实现使用了 photo-sphere-viewer 插件，它基于three.js和uEvent 2实现
这边实现主要用了 photo-sphere-viewer和他的标记Markers插件
思考与总结
在实现这个项目的过程中，我们关注用户体验的提升。VR 技术让用户更直观地感受到房屋的空间布局，而高德地图的集成则提供了便捷的房屋定位方式。这种结合不仅提升了产品的附加值，也让用户在选择家居产品时感受到更强的参与感。
随着技术的不断发展，我们相信 VR 看房和实时场景展示将成为家居行业的新趋势。
点击关注公众号，“技术干货” 及时达！
