| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 地图主体 --> |
| | | <!-- 地图主体:等参数就绪再创建,避免天地图只在初始化时吃 center/zoom --> |
| | | <div class="map-panel__map"> |
| | | <tdt-map :center="center" :zoom="zoom" :controls="controls" :loadConfig="MAP_LOAD"> |
| | | <tdt-map |
| | | v-if="viewReady" |
| | | :center="center" |
| | | :zoom="zoom" |
| | | :controls="controls" |
| | | :loadConfig="MAP_LOAD" |
| | | @init="onMapInit" |
| | | > |
| | | <tdt-marker |
| | | v-for="item in list" |
| | | :key="keyOf(item)" |
| | |
| | | |
| | | import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'; |
| | | import { TdtMap, TdtMarker, type LngLat } from 'vue-tianditu2'; |
| | | import { useCool } from '/@/cool'; |
| | | import { |
| | | DEFAULT_CENTER, |
| | | DEFAULT_ZOOM, |
| | | MAP_LOAD, |
| | | SORTER_ICON, |
| | | VEHICLE_ICON, |
| | | formatTime, |
| | | loadMapView, |
| | | siteIcon, |
| | | useMapsApi |
| | | } from '../../maps/hooks/use-map'; |
| | |
| | | } |
| | | }; |
| | | |
| | | const { service } = useCool(); |
| | | const api = useMapsApi(); |
| | | |
| | | const layer = ref<LayerKey>('site'); |
| | | const list = ref<any[]>([]); |
| | | const center = ref<LngLat>(DEFAULT_CENTER); |
| | | const zoom = ref(12); |
| | | const zoom = ref(DEFAULT_ZOOM); |
| | | const viewReady = ref(false); |
| | | const lastUpdate = ref(''); |
| | | |
| | | const controls = ['Zoom', 'Scale']; |
| | |
| | | return cfg.value.icon(item); |
| | | } |
| | | |
| | | function applyView(map: any) { |
| | | const [lon, lat] = center.value; |
| | | if (!map || !Number.isFinite(lon) || !Number.isFinite(lat)) return; |
| | | const TMap = (window as any).T; |
| | | const lnglat = TMap?.LngLat ? new TMap.LngLat(lon, lat) : [lon, lat]; |
| | | if (typeof map.centerAndZoom === 'function') { |
| | | map.centerAndZoom(lnglat, zoom.value); |
| | | } else { |
| | | map.panTo?.(lnglat); |
| | | map.setZoom?.(zoom.value); |
| | | } |
| | | map.checkResize?.(); |
| | | } |
| | | |
| | | function onMapInit(map: any) { |
| | | applyView(map); |
| | | window.setTimeout(() => applyView(map), 200); |
| | | } |
| | | |
| | | async function load() { |
| | | const res = await cfg.value.load(); |
| | | list.value = Array.isArray(res) ? res : []; |
| | | lastUpdate.value = formatTime(new Date()); |
| | | if (list.value[0]) { |
| | | center.value = pos(list.value[0]); |
| | | zoom.value = 13; |
| | | } |
| | | } |
| | | |
| | | // 车辆 / 分拣员为实时位置,30s 轮询;站点是静态台账,不轮询 |
| | |
| | | }); |
| | | |
| | | onMounted(async () => { |
| | | const view = await loadMapView(service); |
| | | center.value = view.center; |
| | | zoom.value = view.zoom; |
| | | viewReady.value = true; |
| | | await load(); |
| | | startPolling(); |
| | | }); |