bot_pm
0b8bad8879
#21 GIS 引擎集成: - GeoServer init 脚本（自动创建工作区/数据源） - Leaflet 地图组件 (Vue3 MapView: 点位/弹窗/OSM底图) - GisService: PostGIS 空间查询(附近设备/片区统计/GeoJSON) - GisController: /nearby /device-stats /geojson API #22 IoT 设备接入层: - Kafka Consumer: iot.telemetry + iot.event 消费 - DeviceController: 设备列表/详情/注册/指令下发 REST API #26 消息通知: - NotifyService: 短信/WebSocket/APP Push/多渠道分发 - NotifyController: SMS/Push API #25 DevOps: - 10个微服务 Dockerfile (Eclipse Temurin JRE17) - CI build.sh: Maven构建 + Docker镜像打包 - Frontend Nginx 反向代理配置
43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<template>
|
|
<div ref="mapContainer" class="map-container"></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
center?: [number, number]
|
|
zoom?: number
|
|
markers?: Array<{ lat: number; lng: number; name: string; value?: string }>
|
|
}>()
|
|
|
|
const mapContainer = ref<HTMLElement>()
|
|
|
|
let map: any = null
|
|
|
|
onMounted(async () => {
|
|
const L = (await import('leaflet')).default
|
|
await import('leaflet/dist/leaflet.css')
|
|
|
|
map = L.map(mapContainer.value!).setView(props.center || [44.6000, 82.9000], props.zoom || 10)
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap', maxZoom: 18
|
|
}).addTo(map)
|
|
|
|
if (props.markers) {
|
|
props.markers.forEach(m => {
|
|
L.marker([m.lat, m.lng])
|
|
.addTo(map)
|
|
.bindPopup(`<b>${m.name}</b><br/>${m.value || ''}`)
|
|
})
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => { if (map) map.remove() })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.map-container { width: 100%; height: 500px; border-radius: 8px }
|
|
</style>
|