feat: 新增2d地图组件leaflet

packages/mobile/package.json

@@ -15,6 +15,7 @@
     "vant": "^4.9.21",
     "@vueuse/core": "^14.0.0",
     "dayjs": "^1.11.19",
+    "leaflet": "^1.9.4",
     "axios": "^1.13.2",
     "@h5/shared": "workspace:*"
   },

packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue

@@ -24,7 +24,13 @@
       />
 
       <!-- 发生地点 (occurLocation) -->
-      <van-field v-model="formData.event.occurLocation" label="发生地点" placeholder="请填写" />
+      <PositionPickerMobile
+        v-model="formData.event.occurLocation"
+        label="发生地点"
+        placeholder="请选择"
+        :initial-longitude="formData.event.startStakeLng"
+        :initial-latitude="formData.event.startStakeLat"
+      />
 
       <!-- 起点桩号 (event.startStakeNo) -->
       <van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />
@@ -164,6 +170,7 @@ import { ref, computed, onMounted } from 'vue';
 import PanelItem from '@/components/PanelItem.vue';
 import BasePicker from '@/components/BasePicker.vue';
 import BaseDatePicker from '@/components/BaseDatePicker.vue';
+import PositionPickerMobile from '../components/PositionPickerMobile.vue';
 import RoadRoutesPicker from '../components/RoadRoutesPicker.vue';
 import MaterialPicker from '../components/MaterialPicker.vue';
 import { request } from '@shared/utils/request';
@@ -293,7 +300,7 @@ const validate = () => {
     return false;
   }
   if (isEmpty(formData.value.event?.occurLocation)) {
-    showToast('请输入发生地点');
+    showToast('请选择发生地点');
     return false;
   }
   if (isEmpty(formData.value.event?.disasterMileage)) {

packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue

@@ -51,7 +51,13 @@
         <van-field v-model="formData.event.endStakeLat" label="止点桩纬度" placeholder="请填写" type="number" />
 
         <!-- 路况位置 (occurLocation) -->
-        <van-field v-model="formData.event.occurLocation" label="路况位置" placeholder="请填写" />
+        <PositionPickerMobile
+          v-model="formData.event.occurLocation"
+          label="路况位置"
+          placeholder="请选择"
+          :initial-longitude="formData.event.startStakeLng"
+          :initial-latitude="formData.event.startStakeLat"
+        />
 
         <!-- 阻断点小地名 (event.blockedPointName) -->
         <van-field v-model="formData.event.blockedPointName" label="阻断点小地名" placeholder="请填写" />
@@ -167,6 +173,7 @@ import PanelItem from '@/components/PanelItem.vue'
 import BasePicker from '@/components/BasePicker.vue'
 import BaseDatePicker from '@/components/BaseDatePicker.vue'
 import DisasterFileUpload from '../components/DisasterFileUpload.vue'
+import PositionPickerMobile from '../components/PositionPickerMobile.vue'
 import RoadRoutesPicker from '../components/RoadRoutesPicker.vue'
 import LossList from '../components/LossList.vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -332,7 +339,7 @@ const validate = () => {
     return false
   }
   if (isEmpty(formData.value.event?.occurLocation)) {
-    showToast('请输入路况位置')
+    showToast('请选择路况位置')
     return false
   }
   if (isEmpty(formData.value.event?.blockedPointName)) {

packages/mobile/src/views/DisasterManagement/components/PositionPickerMobile.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="position-picker-mobile">
+    <van-field
+      :model-value="modelValue"
+      is-link
+      readonly
+      :label="label"
+      :placeholder="placeholder"
+      @click="openPopup"
+    />
+
+    <van-popup
+      v-model:show="showPopup"
+      position="right"
+      class="position-picker-popup"
+      @opened="handlePopupOpened"
+    >
+      <div class="picker-screen">
+        <van-nav-bar
+          title="坐标点选取"
+          left-text="返回"
+          left-arrow
+          fixed
+          placeholder
+          @click-left="showPopup = false"
+        />
+
+        <div class="picker-toolbar">
+          <div class="coord-grid">
+            <div class="coord-card">
+              <span class="coord-label">经度</span>
+              <span class="coord-value">{{ displayLongitude || '--' }}</span>
+            </div>
+            <div class="coord-card">
+              <span class="coord-label">纬度</span>
+              <span class="coord-value">{{ displayLatitude || '--' }}</span>
+            </div>
+          </div>
+
+          <div class="search-row">
+            <van-search
+              v-model="searchKeyword"
+              shape="round"
+              class="search-box"
+              :placeholder="searchPlaceholder"
+              @search="handleSearch"
+            />
+            <van-button
+              type="primary"
+              block
+              class="search-btn"
+              :loading="searching"
+              @click="handleSearch"
+            >
+              搜索
+            </van-button>
+          </div>
+
+          <div v-if="draftAddress" class="address-tip">
+            <span class="address-label">地点</span>
+            <span class="address-text">{{ draftAddress }}</span>
+          </div>
+        </div>
+
+        <div class="map-wrapper">
+          <div ref="mapContainerRef" class="map-container"></div>
+          <div v-if="mapError" class="map-overlay map-overlay--error">
+            <p>{{ mapError }}</p>
+            <van-button type="primary" size="small" @click="retryMapLoad">重新加载</van-button>
+          </div>
+          <div v-else-if="!mapReady" class="map-overlay">地图加载中...</div>
+        </div>
+
+        <div class="bottom-bar">
+          <div class="bottom-tip">点击地图或拖动标记点后，再确认位置</div>
+          <van-button type="primary" block round @click="handleConfirm">确认位置</van-button>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import axios from 'axios'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+import { showToast } from 'vant'
+
+const AMAP_CONFIG = {
+  webServiceKey: 'c30e9ebd414fd6a4dfcc1ba8c2060dbb',
+  baseUrl: 'https://restapi.amap.com',
+  timeout: 10000
+}
+
+const DEFAULT_CENTER = {
+  longitude: 106.551643,
+  latitude: 29.563761
+}
+
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: markerIcon2x,
+  iconUrl: markerIcon,
+  shadowUrl: markerShadow
+})
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '请选择位置'
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '请输入地点名称'
+  },
+  initialLongitude: {
+    type: [String, Number],
+    default: null
+  },
+  initialLatitude: {
+    type: [String, Number],
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const showPopup = ref(false)
+const mapReady = ref(false)
+const mapError = ref('')
+const searching = ref(false)
+const searchKeyword = ref('')
+const mapContainerRef = ref(null)
+
+const selectedLongitude = ref(null)
+const selectedLatitude = ref(null)
+const selectedAddress = ref('')
+const draftLongitude = ref(null)
+const draftLatitude = ref(null)
+const draftAddress = ref('')
+
+let mapInstance = null
+let markerInstance = null
+let reverseGeocodeToken = 0
+
+const normalizeCoordinate = (value) => {
+  if (value === '' || value === null || value === undefined) {
+    return null
+  }
+
+  const normalized = Number(value)
+  return Number.isFinite(normalized) ? normalized : null
+}
+
+const displayLongitude = computed(() => {
+  return draftLongitude.value === null ? '' : draftLongitude.value.toFixed(6)
+})
+
+const displayLatitude = computed(() => {
+  return draftLatitude.value === null ? '' : draftLatitude.value.toFixed(6)
+})
+
+const currentCenter = () => {
+  const longitude = selectedLongitude.value ?? normalizeCoordinate(props.initialLongitude) ?? DEFAULT_CENTER.longitude
+  const latitude = selectedLatitude.value ?? normalizeCoordinate(props.initialLatitude) ?? DEFAULT_CENTER.latitude
+  return { longitude, latitude }
+}
+
+const resolveInitialSelection = () => {
+  if (selectedLongitude.value !== null && selectedLatitude.value !== null) {
+    return {
+      longitude: selectedLongitude.value,
+      latitude: selectedLatitude.value
+    }
+  }
+
+  const longitude = normalizeCoordinate(props.initialLongitude)
+  const latitude = normalizeCoordinate(props.initialLatitude)
+  if (longitude !== null && latitude !== null) {
+    return { longitude, latitude }
+  }
+
+  return null
+}
+
+const syncDraftFromSelected = () => {
+  const initialSelection = resolveInitialSelection()
+  draftLongitude.value = initialSelection?.longitude ?? null
+  draftLatitude.value = initialSelection?.latitude ?? null
+  draftAddress.value = selectedAddress.value || props.modelValue || ''
+  searchKeyword.value = draftAddress.value
+}
+
+const setMarkerPosition = (longitude, latitude, shouldPan = true) => {
+  if (!mapInstance || longitude === null || latitude === null) {
+    return
+  }
+
+  const latLng = [latitude, longitude]
+  if (!markerInstance) {
+    markerInstance = L.marker(latLng, {
+      draggable: true
+    }).addTo(mapInstance)
+
+    markerInstance.on('dragend', () => {
+      const markerLatLng = markerInstance.getLatLng()
+      updateDraftPosition(markerLatLng.lng, markerLatLng.lat, true)
+    })
+  } else {
+    markerInstance.setLatLng(latLng)
+  }
+
+  if (shouldPan) {
+    mapInstance.setView(latLng, Math.max(mapInstance.getZoom(), 15))
+  }
+}
+
+const reverseGeocode = async (longitude, latitude) => {
+  const token = ++reverseGeocodeToken
+
+  try {
+    const response = await axios.get(`${AMAP_CONFIG.baseUrl}/v3/geocode/regeo`, {
+      params: {
+        key: AMAP_CONFIG.webServiceKey,
+        location: `${longitude},${latitude}`,
+        extensions: 'base',
+        output: 'json'
+      },
+      timeout: AMAP_CONFIG.timeout
+    })
+
+    if (token !== reverseGeocodeToken) {
+      return
+    }
+
+    if (response.data.status !== '1') {
+      throw new Error(response.data.info || '逆地理编码失败')
+    }
+
+    const formattedAddress = response.data.regeocode?.formatted_address || ''
+    draftAddress.value = formattedAddress
+    searchKeyword.value = formattedAddress
+  } catch (_error) {
+    if (token !== reverseGeocodeToken) {
+      return
+    }
+
+    draftAddress.value = draftAddress.value || `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
+  }
+}
+
+const updateDraftPosition = (longitude, latitude, shouldResolveAddress = false) => {
+  draftLongitude.value = Number(longitude.toFixed(6))
+  draftLatitude.value = Number(latitude.toFixed(6))
+  setMarkerPosition(draftLongitude.value, draftLatitude.value, false)
+
+  if (shouldResolveAddress) {
+    reverseGeocode(draftLongitude.value, draftLatitude.value)
+  }
+}
+
+const initMap = async () => {
+  mapError.value = ''
+  mapReady.value = false
+
+  try {
+    await nextTick()
+
+    if (!mapContainerRef.value) {
+      return
+    }
+
+    const center = currentCenter()
+
+    if (!mapInstance) {
+      mapInstance = L.map(mapContainerRef.value, {
+        zoomControl: true,
+        attributionControl: false
+      }).setView([center.latitude, center.longitude], 13)
+
+      L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
+        subdomains: ['1', '2', '3', '4'],
+        maxZoom: 18,
+        minZoom: 3
+      }).addTo(mapInstance)
+
+      mapInstance.on('click', (event) => {
+        updateDraftPosition(event.latlng.lng, event.latlng.lat, true)
+      })
+    } else {
+      mapInstance.setView([center.latitude, center.longitude], mapInstance.getZoom() || 13)
+    }
+
+    if (draftLongitude.value !== null && draftLatitude.value !== null) {
+      setMarkerPosition(draftLongitude.value, draftLatitude.value)
+    } else if (markerInstance) {
+      markerInstance.remove()
+      markerInstance = null
+    }
+
+    mapReady.value = true
+    requestAnimationFrame(() => {
+      mapInstance?.invalidateSize()
+    })
+
+    if (!draftAddress.value && draftLongitude.value !== null && draftLatitude.value !== null) {
+      reverseGeocode(draftLongitude.value, draftLatitude.value)
+    }
+  } catch (error) {
+    console.error('地图初始化失败:', error)
+    mapError.value = '地图初始化失败，请稍后重试'
+  }
+}
+
+const openPopup = () => {
+  syncDraftFromSelected()
+  showPopup.value = true
+}
+
+const handlePopupOpened = async () => {
+  await initMap()
+  requestAnimationFrame(() => {
+    mapInstance?.invalidateSize()
+  })
+}
+
+const handleSearch = async () => {
+  const keyword = searchKeyword.value.trim()
+  if (!keyword) {
+    showToast('请输入地点名称')
+    return
+  }
+
+  searching.value = true
+  try {
+    const response = await axios.get(`${AMAP_CONFIG.baseUrl}/v3/geocode/geo`, {
+      params: {
+        key: AMAP_CONFIG.webServiceKey,
+        address: keyword,
+        output: 'json'
+      },
+      timeout: AMAP_CONFIG.timeout
+    })
+
+    if (response.data.status !== '1') {
+      throw new Error(response.data.info || '地点搜索失败')
+    }
+
+    const geocode = response.data.geocodes?.[0]
+    if (!geocode?.location) {
+      throw new Error('未找到对应地点')
+    }
+
+    const [longitude, latitude] = geocode.location.split(',').map(Number)
+    draftAddress.value = geocode.formatted_address || keyword
+    searchKeyword.value = draftAddress.value
+    updateDraftPosition(longitude, latitude)
+    setMarkerPosition(longitude, latitude)
+  } catch (error) {
+    console.error('地点搜索失败:', error)
+    showToast(error.message || '地点搜索失败，请重试')
+  } finally {
+    searching.value = false
+  }
+}
+
+const retryMapLoad = () => {
+  initMap()
+}
+
+const handleConfirm = () => {
+  if (draftLongitude.value === null || draftLatitude.value === null) {
+    showToast('请先在地图上选择位置')
+    return
+  }
+
+  selectedLongitude.value = draftLongitude.value
+  selectedLatitude.value = draftLatitude.value
+  selectedAddress.value = draftAddress.value || searchKeyword.value.trim() || `${draftLatitude.value}, ${draftLongitude.value}`
+
+  emit('update:modelValue', selectedAddress.value)
+  emit('change', {
+    longitude: selectedLongitude.value,
+    latitude: selectedLatitude.value,
+    address: selectedAddress.value
+  })
+
+  showPopup.value = false
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value) {
+      return
+    }
+
+    selectedAddress.value = value
+    if (!showPopup.value) {
+      draftAddress.value = value
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  if (mapInstance) {
+    mapInstance.remove()
+    mapInstance = null
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.position-picker-mobile {
+  width: 100%;
+}
+
+.position-picker-popup {
+  width: 100%;
+  height: 100%;
+  background: #f7f8fa;
+}
+
+.picker-screen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.picker-toolbar {
+  padding: 12px 12px 10px;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+  z-index: 2;
+}
+
+.coord-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.coord-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
+}
+
+.coord-label {
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.coord-value {
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.search-box {
+  flex: 1;
+  padding: 0;
+  background: transparent;
+}
+
+.search-btn {
+  width: 88px;
+  flex-shrink: 0;
+}
+
+.address-tip {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  color: #4b5563;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.address-label {
+  flex-shrink: 0;
+  color: #2563eb;
+  font-weight: 600;
+}
+
+.address-text {
+  word-break: break-all;
+}
+
+.map-wrapper {
+  position: relative;
+  flex: 1;
+  min-height: 280px;
+  background: #eef2f7;
+}
+
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+
+.map-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #606266;
+  font-size: 14px;
+  background: rgba(247, 248, 250, 0.9);
+  z-index: 2;
+}
+
+.map-overlay--error {
+  flex-direction: column;
+  gap: 12px;
+  color: #ee0a24;
+}
+
+.bottom-bar {
+  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
+  background: #fff;
+  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
+}
+
+.bottom-tip {
+  margin-bottom: 10px;
+  color: #86909c;
+  font-size: 12px;
+  text-align: center;
+}
+
+:deep(.van-nav-bar) {
+  flex-shrink: 0;
+}
+
+:deep(.van-nav-bar__content) {
+  background: #fff;
+}
+
+:deep(.leaflet-container) {
+  font-family: inherit;
+}
+</style>

packages/screen/package.json

@@ -17,6 +17,7 @@
     "cesium": "^1.135.0",
     "echarts": "^6.0.0",
     "element-plus": "^2.11.5",
+    "leaflet": "^1.9.4",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-echarts": "^8.0.1",