67 lines
3.0 KiB
TypeScript
67 lines
3.0 KiB
TypeScript
import { Button, Dropdown, Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Option } from '@fluentui/react-components';
|
||
import { IconBoxMultiple, IconPlus, IconUpload } from '@tabler/icons-react';
|
||
import MapLayers from './MapLayers';
|
||
import { setSatMapsProvider, useMapStore } from '../../../store/map';
|
||
import { satMapsProviders } from '../../../constants/map';
|
||
import { IRectCoords, SatelliteMapsProvider } from '../../../interfaces/map';
|
||
import GisService from '../../../services/GisService';
|
||
import { Extent } from 'ol/extent';
|
||
|
||
const MapLayersSelect = ({
|
||
map_id
|
||
}: {
|
||
map_id: string
|
||
}) => {
|
||
const { map, satMapsProvider, file, polygonExtent, rectCoords } = useMapStore().id[map_id]
|
||
|
||
// Upload map overlay
|
||
const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => {
|
||
await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(res => {
|
||
console.log(res)
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Menu persistOnItemClick positioning={{ autoSize: true }}>
|
||
<MenuTrigger disableButtonEnhancement>
|
||
<MenuButton appearance='subtle' icon={<IconBoxMultiple />}>Слои</MenuButton>
|
||
</MenuTrigger>
|
||
|
||
<MenuPopover>
|
||
<MenuList style={{ padding: '1rem' }}>
|
||
<Field>Настройка видимости слоёв</Field>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||
<Field label="Спутниковые снимки">
|
||
<Dropdown
|
||
value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
|
||
selectedOptions={[satMapsProvider]}
|
||
onOptionSelect={(_ev, data) => {
|
||
if (data.optionValue) {
|
||
setSatMapsProvider(map_id, data.optionValue as SatelliteMapsProvider);
|
||
}
|
||
}}
|
||
>
|
||
{satMapsProviders.map((provider) => (
|
||
<Option key={provider.value} text={provider.label} value={provider.value}>
|
||
{provider.label}
|
||
</Option>
|
||
))}
|
||
</Dropdown>
|
||
</Field>
|
||
</div>
|
||
<div style={{
|
||
display: 'flex',
|
||
}}>
|
||
<Button icon={<IconUpload />} appearance='transparent' onClick={() => submitOverlay(file, polygonExtent, rectCoords)} />
|
||
|
||
<Button icon={<IconPlus />} appearance='transparent' title='Добавить подложку' />
|
||
</div>
|
||
<MapLayers map={map} />
|
||
</MenuList>
|
||
</MenuPopover>
|
||
</Menu>
|
||
)
|
||
}
|
||
|
||
export default MapLayersSelect |