2569718930@qq.com
31 lines
970 B
TypeScript
31 lines
970 B
TypeScript
"use client";
|
|
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
|
import { useLeafletMap } from "@/hooks/useLeafletMap";
|
|
|
|
export function MapCanvas() {
|
|
const store = useDashboardStore();
|
|
const { containerRef } = useLeafletMap({
|
|
cities: store.cities,
|
|
cityDetailsByName: store.cityDetailsByName,
|
|
citySummariesByName: store.citySummariesByName,
|
|
onClosePanel: store.closePanel,
|
|
onEnsureCityDetail: store.ensureCityDetail,
|
|
onMapInteractionChange: store.setMapInteractionActive,
|
|
onRegisterStopMotion: store.registerMapStopMotion,
|
|
onSelectCity: (cityName) => {
|
|
void store.selectCity(cityName);
|
|
},
|
|
selectedCity: store.selectedCity,
|
|
selectedDetail: store.selectedDetail,
|
|
suspendMotion:
|
|
Boolean(store.futureModalDate) ||
|
|
store.historyState.isOpen,
|
|
isLoadingDetail: store.loadingState.cityDetail,
|
|
});
|
|
|
|
return <div ref={containerRef} className="map" />;
|
|
}
|