vue实现工位地图
Vue 实现工位地图的方法
使用 SVG 或 Canvas 绘制地图
在 Vue 项目中可以通过 SVG 或 Canvas 技术绘制工位地图。SVG 适合静态或简单交互的地图，Canvas 适合高性能动态渲染。引入第三方库如 d3.js 或 fabric.js 可以简化绘制逻辑。
<template>
<div>
<svg width="800" height="600">
<rect v-for="(seat, index) in seats"
:key="index"
:x="seat.x"
:y="seat.y"
width="50"
height="50"
fill="#ccc"
@click="selectSeat(seat)" />
</svg>
</div>
</template>
<script>
export default {
data() {
return {
seats: [
{ x: 100, y: 100, id: 1 },
{ x: 200, y: 100, id: 2 }
]
};
},
methods: {
selectSeat(seat) {
console.log('Selected seat:', seat.id);
}
}
};
</script>集成地图库
使用专业地图库如 Leaflet 或 Mapbox 可以快速实现工位地图功能。这些库支持缩放、拖拽、标记等交互功能。
安装 Leaflet：
npm install leaflet在 Vue 中集成：
<template>
<div id="map"></div>
</template>
<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
export default {
mounted() {
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 添加工位标记
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('工位 A');
}
};
</script>
<style>
#map { height: 400px; }
</style>使用第三方 Vue 地图组件
直接使用 Vue 封装的地图组件如 vue2-leaflet 或 vue-mapbox 可以进一步简化开发。
安装 vue2-leaflet：
npm install vue2-leaflet示例代码：
<template>
<l-map :zoom="13" :center="[51.505, -0.09]">
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :lat-lng="[51.5, -0.09]">
<l-popup>工位 B</l-popup>
</l-marker>
</l-map>
</template>
<script>
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
export default {
components: { LMap, LTileLayer, LMarker, LPopup }
};
</script>实现工位状态管理
通过 Vuex 或本地状态管理工位的占用、空闲等状态，动态更新地图显示。
data() {
return {
seats: [
{ id: 1, x: 100, y: 100, status: 'available' },
{ id: 2, x: 200, y: 100, status: 'occupied' }
]
};
},
methods: {
getSeatColor(status) {
return status === 'available' ? '#4CAF50' : '#F44336';
}
}模板中使用动态样式：
<rect v-for="seat in seats"
:fill="getSeatColor(seat.status)"
@click="toggleSeatStatus(seat)" />响应式设计
通过 CSS 媒体查询或动态计算尺寸确保地图在不同设备上正常显示。
#map {
width: 100%;
height: 60vh;
min-height: 300px;
}通过以上方法可以灵活实现工位地图功能，根据项目需求选择合适的技术方案。
