Mall 360 Store Map

Vue 3 商场 360 度 3D 楼层地图组件，支持 1-5 楼叠层查看、单层查看、商铺编辑、自定义绘制店铺区域、图标和名称修改。

在线预览

适用场景

• 商场、商业综合体、展馆的楼层导览
• 可视化展示多楼层商铺分布
• 后台维护商铺名称、分类、图标和介绍
• 快速绘制原型商场地图或演示 3D 导览效果

功能

• 1-5 楼 3D 叠层展示
• 支持鼠标拖拽 360 旋转、滚轮缩放
• 支持查看全部楼层或单独查看某一层
• 支持按分类筛选店铺
• 支持点击店铺后编辑名称、分类、图标、介绍
• 支持绘制模式，在楼板上拖拽创建自定义店铺区域
• 支持删除店铺、清空当前楼层、恢复示例数据
• 支持保存到浏览器本地存储

安装

npm install @gl-zcc/mall-360-store-map

组件依赖 Vue 3 和 Three.js。如果你的项目还没有安装：

npm install vue three

使用

<template>
  <Mall360StoreMap />
</template>

<script setup lang="ts">
import Mall360StoreMap from '@gl-zcc/mall-360-store-map';
import '@gl-zcc/mall-360-store-map/style.css';
</script>

操作说明

• 点击左侧楼层按钮，可在“全部楼层”和单个楼层之间切换。
• 在 3D 视图中拖拽鼠标可旋转查看，滚轮可缩放。
• 点击店铺后，可在右侧面板修改名称、分类、图标和介绍。
• 切换到“绘制”模式后，在楼板上拖拽即可创建新的店铺区域。
• 点击保存按钮后，当前商铺数据会写入浏览器本地存储。

注意事项

• 组件当前内置示例数据和本地存储逻辑，适合快速演示和二次开发。
• 如果要接入真实业务数据，可以基于组件源码扩展数据导入、导出或接口保存。
• 组件使用 Three.js 渲染 3D 场景，建议放在有明确宽高的容器或完整页面中使用。
• 样式需要单独引入 @gl-zcc/mall-360-store-map/style.css。

本地预览

npm install
npm run dev

打开终端显示的本地地址即可预览 demo。