city-life-line/src/views/subSystem/monitor/MonitorMap.vue

<template>
  <div class="monitor-map-container">
    <div id="monitorMap" class="map"></div>
    <el-drawer v-model="chartVisible" title="实时数据曲线" size="500px">
      <div ref="detailChart" class="detail-chart"></div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getPointsWithLatestData } from '@/api/pipeNetwork/hazard'

const chartVisible = ref(false)
const detailChart = ref(null)
let mapInstance = null

async function initMap() {
  await nextTick()
  const el = document.getElementById('monitorMap')
  if (!el) return
  try {
    const L = await import('leaflet')
    mapInstance = L.map('monitorMap').setView([34.77, 113.65], 13)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(mapInstance)
  } catch (e) {
    el.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;">请安装Leaflet: npm install leaflet</div>'
  }
}

onMounted(() => { initMap() })
</script>

<style scoped>
.monitor-map-container { height: calc(100vh - 100px); padding: 16px; }
.map { width: 100%; height: 100%; border-radius: 4px; }
.detail-chart { width: 100%; height: 400px; }
</style>