Region/district select; proper Map tabs
This commit is contained in:
@ -10,12 +10,12 @@ import { customMapSource, googleMapsSatelliteSource, yandexMapsSatelliteSource }
|
||||
import { Geometry, SimpleGeometry } from 'ol/geom'
|
||||
import { fromExtent } from 'ol/geom/Polygon'
|
||||
import { Coordinate } from 'ol/coordinate'
|
||||
import { addInteractions, handleImageDrop, loadFeatures, processFigure, processLine } from './mapUtils'
|
||||
import { addInteractions, getFeatureByEntityId, handleImageDrop, loadFeatures, processFigure, processLine, zoomToFeature } from './mapUtils'
|
||||
import useSWR, { SWRConfiguration } from 'swr'
|
||||
import { fetcher } from '../../http/axiosInstance'
|
||||
import { BASE_URL } from '../../constants'
|
||||
import { IconBoxMultiple, IconBoxPadding, IconChevronLeft, IconPlus, IconUpload, } from '@tabler/icons-react'
|
||||
import { ICitySettings, IFigure, ILine } from '../../interfaces/gis'
|
||||
import { IconBoxMultiple, IconBoxPadding, IconChevronLeft, IconPlus, IconUpload, IconX, } from '@tabler/icons-react'
|
||||
import { ICitySettings, IDistrict, IFigure, ILine } from '../../interfaces/gis'
|
||||
import axios from 'axios'
|
||||
import MapToolbar from './MapToolbar/MapToolbar'
|
||||
import MapStatusbar from './MapStatusbar/MapStatusbar'
|
||||
@ -33,9 +33,11 @@ import GisService from '../../services/GisService'
|
||||
import MapMode from './MapMode'
|
||||
import { satMapsProviders, schemas } from '../../constants/map'
|
||||
import MapPrint from './MapPrint/MapPrint'
|
||||
import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown } from '@fluentui/react-components'
|
||||
import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown, Tooltip, Drawer, DrawerHeader, DrawerBody, Text, Link } from '@fluentui/react-components'
|
||||
import { IRegion } from '../../interfaces/fuel'
|
||||
import { useAppStore } from '../../store/app'
|
||||
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
|
||||
import { ArrowLeft24Regular } from '@fluentui/react-icons'
|
||||
|
||||
const swrOptions: SWRConfiguration = {
|
||||
revalidateOnFocus: false
|
||||
@ -70,8 +72,8 @@ const MapComponent = ({
|
||||
polygonExtent, rectCoords, draw, snap, translate,
|
||||
drawingLayerSource,
|
||||
satLayer, staticMapLayer, figuresLayer, linesLayer,
|
||||
regionsLayer, districtBoundLayer, baseLayer,
|
||||
printAreaDraw,
|
||||
regionsLayer, districtBoundLayer, baseLayer, districtsLayer,
|
||||
printAreaDraw, statusText, statusTextPosition, regionSelect, districtSelect
|
||||
} = useMapStore().id[id]
|
||||
|
||||
// Tab settings
|
||||
@ -103,7 +105,7 @@ const MapComponent = ({
|
||||
if (regionsLayer && regionBoundsData) {
|
||||
if (Array.isArray(regionBoundsData)) {
|
||||
regionBoundsData.map(bound => {
|
||||
const geoJson = new GeoJSON({ featureProjection: 'EPSG:3857' })
|
||||
const geoJson = new GeoJSON() //new GeoJSON({ featureProjection: 'EPSG:3857' })
|
||||
const geometry = geoJson.readGeometry(bound) as Geometry
|
||||
|
||||
const feature = new Feature(geometry)
|
||||
@ -111,8 +113,15 @@ const MapComponent = ({
|
||||
|
||||
regionsLayer.getSource()?.addFeature(feature)
|
||||
})
|
||||
|
||||
if (map) {
|
||||
const extent = regionsLayer.getSource()?.getExtent()
|
||||
|
||||
if (extent) {
|
||||
map.getView().fit(fromExtent(extent))
|
||||
}
|
||||
}
|
||||
}
|
||||
//regionsLayer.current.getSource()?.addFeature()
|
||||
}
|
||||
}, [regionBoundsData])
|
||||
|
||||
@ -126,7 +135,7 @@ const MapComponent = ({
|
||||
districtBoundLayer.setSource(bounds)
|
||||
|
||||
bounds.on('featuresloadend', function () {
|
||||
// map.current?.setView(new View({
|
||||
// map?.setView(new View({
|
||||
// extent: bounds.getExtent()
|
||||
// }))
|
||||
})
|
||||
@ -275,9 +284,15 @@ const MapComponent = ({
|
||||
}
|
||||
}, [currentObjectId])
|
||||
|
||||
const { data: regionsData } = useSWR(`/general/regions`, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
const { data: regionsData } = useSWR(`/general/regions`, (url) => fetcher(url, BASE_URL.ems).then(res => {
|
||||
setRegionsData(res)
|
||||
return res
|
||||
}), swrOptions)
|
||||
|
||||
const { data: districtsData } = useSWR(selectedRegion ? `/general/districts/?region_id=${selectedRegion}` : null, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
const { data: districtsData } = useSWR(selectedRegion ? `/general/districts/?region_id=${selectedRegion}` : null, (url) => fetcher(url, BASE_URL.ems).then(res => {
|
||||
setDistrictsData(res)
|
||||
return res
|
||||
}), swrOptions)
|
||||
|
||||
const { data: searchData } = useSWR(
|
||||
throttledSearchObject !== "" && selectedDistrict && selectedYear ? `/general/search/objects?q=${throttledSearchObject}&id_city=${selectedDistrict}&year=${selectedYear}` : null,
|
||||
@ -384,7 +399,7 @@ const MapComponent = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedRegion) {
|
||||
setSelectedRegion(id, undefined)
|
||||
setSelectedRegion(id, null)
|
||||
setSelectedYear(id, null)
|
||||
}
|
||||
}, [selectedRegion, selectedDistrict, id])
|
||||
@ -466,8 +481,94 @@ const MapComponent = ({
|
||||
}
|
||||
}, [mode, map, printAreaDraw])
|
||||
|
||||
useEffect(() => {
|
||||
if (districtsData && Array.isArray(districtsData)) {
|
||||
const list: Number[] = []
|
||||
districtsData.map(district => {
|
||||
list.push(district.id as Number)
|
||||
})
|
||||
|
||||
fetch(`${BASE_URL.ems}/gis/bounds/city`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ list })
|
||||
}).then(async response => {
|
||||
const data = await response.json()
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
data.map(bound => {
|
||||
const geoJson = new GeoJSON() //new GeoJSON({ featureProjection: 'EPSG:3857' })
|
||||
const geometry = geoJson.readGeometry(bound) as Geometry
|
||||
|
||||
const feature = new Feature(geometry)
|
||||
feature.setProperties(bound.properties)
|
||||
|
||||
districtsLayer.getSource()?.addFeature(feature)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [districtsData])
|
||||
|
||||
const mapTooltipRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (mapTooltipRef.current) {
|
||||
const leftOffset = 30
|
||||
const topOffset = -30
|
||||
mapTooltipRef.current.style.left = (statusTextPosition[0] + leftOffset).toString() + 'px'
|
||||
mapTooltipRef.current.style.top = (statusTextPosition[1] + topOffset).toString() + 'px'
|
||||
}
|
||||
}, [statusTextPosition, mapTooltipRef])
|
||||
|
||||
// zoom on region select
|
||||
useEffect(() => {
|
||||
if (selectedRegion && !selectedDistrict) {
|
||||
const feature = getFeatureByEntityId(selectedRegion, regionsLayer)
|
||||
|
||||
if (feature) {
|
||||
regionSelect.getFeatures().push(feature)
|
||||
}
|
||||
|
||||
zoomToFeature(id, feature)
|
||||
}
|
||||
}, [selectedRegion, selectedDistrict])
|
||||
|
||||
// zoom on district select
|
||||
useEffect(() => {
|
||||
if (selectedDistrict) {
|
||||
const feature = getFeatureByEntityId(selectedDistrict, districtsLayer)
|
||||
|
||||
if (feature) {
|
||||
districtSelect.getFeatures().push(feature)
|
||||
|
||||
regionsLayer.setOpacity(0)
|
||||
}
|
||||
|
||||
zoomToFeature(id, feature)
|
||||
}
|
||||
}, [selectedDistrict])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedYear) {
|
||||
regionsLayer.setOpacity(0)
|
||||
districtsLayer.setOpacity(0)
|
||||
}
|
||||
}, [selectedYear])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%', height: '100%' }}>
|
||||
|
||||
{statusText && active && !selectedYear &&
|
||||
<Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
|
||||
<div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
|
||||
{/* {statusText} */}
|
||||
</div>
|
||||
</Tooltip>
|
||||
}
|
||||
|
||||
<MapPrint id={id} mapElement={mapElement} />
|
||||
|
||||
{active &&
|
||||
@ -499,7 +600,7 @@ const MapComponent = ({
|
||||
: null}
|
||||
</Combobox>
|
||||
|
||||
<Combobox
|
||||
{/* <Combobox
|
||||
placeholder="Регион"
|
||||
clearable
|
||||
// 👇 show label instead of id
|
||||
@ -512,7 +613,7 @@ const MapComponent = ({
|
||||
if (data.optionValue) {
|
||||
setSelectedRegion(id, Number(data.optionValue));
|
||||
} else {
|
||||
setSelectedRegion(id, undefined);
|
||||
setSelectedRegion(id, null);
|
||||
}
|
||||
}}
|
||||
style={{ minWidth: 'auto' }}
|
||||
@ -524,9 +625,9 @@ const MapComponent = ({
|
||||
</Option>
|
||||
))
|
||||
: null}
|
||||
</Combobox>
|
||||
</Combobox> */}
|
||||
|
||||
<Combobox
|
||||
{/* <Combobox
|
||||
placeholder="Населённый пункт"
|
||||
clearable
|
||||
value={
|
||||
@ -554,28 +655,7 @@ const MapComponent = ({
|
||||
)
|
||||
)
|
||||
: null}
|
||||
</Combobox>
|
||||
|
||||
|
||||
<Combobox
|
||||
placeholder="Схема"
|
||||
clearable
|
||||
style={{ minWidth: 'auto' }}
|
||||
value={selectedYear ? selectedYear.toString() : ""}
|
||||
onOptionSelect={(_ev, data) => {
|
||||
if (data.optionValue) {
|
||||
setSelectedYear(id, Number(data.optionValue));
|
||||
} else {
|
||||
setSelectedYear(id, null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{schemas.map((el) => (
|
||||
<Option key={el} value={el}>
|
||||
{el}
|
||||
</Option>
|
||||
))}
|
||||
</Combobox>
|
||||
</Combobox> */}
|
||||
|
||||
|
||||
<Button icon={<IconBoxPadding />} appearance={alignMode ? 'primary' : 'transparent'} onClick={() => setAlignMode(id, !alignMode)} />
|
||||
@ -621,41 +701,141 @@ const MapComponent = ({
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
|
||||
{/* <Menu position="bottom-end" transitionProps={{ transition: 'pop-top-right' }}>
|
||||
<Menu.Target>
|
||||
<Button variant='transparent'>
|
||||
<Group gap={7} wrap='nowrap' style={{ flexShrink: 0 }} title='Слои'>
|
||||
<IconBoxMultiple style={{ width: rem(20), height: rem(20) }} />
|
||||
<IconChevronDown style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
|
||||
</Group>
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown miw={300}>
|
||||
<Menu.Label>{'Настройка видимости слоёв'}</Menu.Label>
|
||||
|
||||
<Flex p='sm' direction='column' gap='xs'>
|
||||
<Flex align='center' direction='row' gap='sm'>
|
||||
<MantineSelect value={satMapsProvider} data={satMapsProviders} onChange={(value) => setSatMapsProvider(id, value as SatelliteMapsProvider)} />
|
||||
</Flex>
|
||||
<Flex direction='row'>
|
||||
<ActionIcon size='lg' variant='transparent' onClick={() => submitOverlay(file, polygonExtent, rectCoords)}>
|
||||
<IconUpload style={{ width: rem(20), height: rem(20) }} />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon size='lg' variant='transparent' title='Добавить подложку'>
|
||||
<IconPlus style={{ width: rem(20), height: rem(20) }} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
<MapLayers map={map} />
|
||||
</Flex>
|
||||
</Menu.Dropdown>
|
||||
</Menu> */}
|
||||
</div>
|
||||
</Portal >
|
||||
}
|
||||
|
||||
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
|
||||
{!selectedRegion &&
|
||||
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!selectedRegion} type='inline'>
|
||||
{/* <DrawerHeader style={{ flexDirection: 'row' }}>
|
||||
<Text weight='bold' size={500}></Text>
|
||||
</DrawerHeader> */}
|
||||
|
||||
<DrawerBody>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{regionsData && regionsData.map((region: IRegion) => (
|
||||
<Link key={region.id} onClick={() => setSelectedRegion(id, region.id)}
|
||||
onMouseEnter={() => {
|
||||
const feature = getFeatureByEntityId(region.id, regionsLayer)
|
||||
|
||||
if (feature) {
|
||||
regionSelect.getFeatures().push(feature)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
regionSelect.getFeatures().clear()
|
||||
}}
|
||||
>{region.name}</Link>
|
||||
))}
|
||||
</div>
|
||||
</DrawerBody>
|
||||
</Drawer>}
|
||||
|
||||
<Drawer style={{ position: 'absolute', height: '100%', zIndex: 9999 }} open={!!selectedRegion && !selectedYear} type='inline'>
|
||||
<DrawerHeader style={{ flexDirection: 'row' }}>
|
||||
<Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
|
||||
if (selectedDistrict) {
|
||||
setSelectedDistrict(id, null)
|
||||
districtSelect.getFeatures().clear()
|
||||
regionsLayer.setOpacity(1)
|
||||
} else {
|
||||
setSelectedRegion(id, null)
|
||||
regionSelect.getFeatures().clear()
|
||||
|
||||
if (map) {
|
||||
const extent = regionsLayer.getSource()?.getExtent()
|
||||
|
||||
if (extent) {
|
||||
map.getView().fit(fromExtent(extent), { duration: 100 })
|
||||
regionsLayer.setOpacity(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}} />
|
||||
|
||||
{selectedDistrict ?
|
||||
<Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
|
||||
:
|
||||
<Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
|
||||
|
||||
<Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
|
||||
setSelectedYear(id, null)
|
||||
setSelectedDistrict(id, null)
|
||||
setSelectedRegion(id, null)
|
||||
|
||||
if (map) {
|
||||
const extent = regionsLayer.getSource()?.getExtent()
|
||||
|
||||
if (extent) {
|
||||
map.getView().fit(fromExtent(extent), { duration: 100 })
|
||||
regionsLayer.setOpacity(1)
|
||||
}
|
||||
}
|
||||
}} />
|
||||
</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{selectedDistrict ?
|
||||
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span>{key}</span>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
))
|
||||
:
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<div>
|
||||
{selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span>{key}</span>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{districtsData && districtsData.map((district: IDistrict) => (
|
||||
<Link key={district.id} onClick={() => setSelectedDistrict(id, district.id)}
|
||||
onMouseEnter={() => {
|
||||
const feature = getFeatureByEntityId(district.id, districtsLayer)
|
||||
|
||||
if (feature) {
|
||||
districtSelect.getFeatures().push(feature)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
districtSelect.getFeatures().clear()
|
||||
}}
|
||||
>{district.name}</Link>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
{selectedDistrict && <Combobox
|
||||
placeholder="Схема"
|
||||
clearable
|
||||
style={{ minWidth: 'auto' }}
|
||||
value={selectedYear ? selectedYear.toString() : ""}
|
||||
onOptionSelect={(_ev, data) => {
|
||||
if (data.optionValue) {
|
||||
setSelectedYear(id, Number(data.optionValue));
|
||||
} else {
|
||||
setSelectedYear(id, null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{schemas.map((el) => (
|
||||
<Option key={el} value={el}>
|
||||
{el}
|
||||
</Option>
|
||||
))}
|
||||
</Combobox>}
|
||||
</div>
|
||||
</DrawerBody>
|
||||
</Drawer>
|
||||
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
||||
<div style={{ display: 'flex', height: '94%', padding: '0.5rem', flexGrow: 1 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
|
||||
@ -699,7 +879,7 @@ const MapComponent = ({
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
|
||||
<div style={{ ...mapControlsStyle, display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
|
||||
<MapMode map_id={id} />
|
||||
{selectedDistrict && selectedYear && <MapMode map_id={id} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -714,16 +894,11 @@ const MapComponent = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', width: '100%' }}>
|
||||
<MapStatusbar
|
||||
map_id={id}
|
||||
mapControlsStyle={mapControlsStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'absolute', width: '100%', height: '100%', maxHeight: '100%' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
|
||||
<div id={id} key={id} style={{ position: 'relative', width: '100%', height: '100%', maxHeight: '100%' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
|
||||
<div ref={tooltipRef}></div>
|
||||
</div>
|
||||
|
||||
@ -743,7 +918,13 @@ const MapComponent = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
</>
|
||||
<div style={{ display: 'flex', bottom: '0', width: '100%' }}>
|
||||
<MapStatusbar
|
||||
map_id={id}
|
||||
mapControlsStyle={mapControlsStyle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -18,6 +18,8 @@ import { measureStyleFunction, modifyStyle } from "./Measure/MeasureStyles";
|
||||
import { getCurrentTool, getDraw, getDrawingLayerSource, getImageLayer, getMap, getMeasureClearPrevious, getMeasureDraw, getMeasureModify, getMeasureSource, getMeasureType, getOverlayLayerSource, getSnap, getTipPoint, getTranslate, PrintOrientation, setDraw, setFile, setMeasureDraw, setPolygonExtent, setRectCoords, setSnap, setTranslate } from "../../store/map";
|
||||
import Collection from "ol/Collection";
|
||||
import { SketchCoordType } from "ol/interaction/Draw";
|
||||
import VectorImageLayer from "ol/layer/VectorImage";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
|
||||
const calculateAngle = (coords: [number, number][]) => {
|
||||
const [start, end] = coords;
|
||||
@ -482,18 +484,25 @@ export const addInteractions = (
|
||||
}
|
||||
}
|
||||
|
||||
export const zoomToFeature = (map_id: string, feature: Feature) => {
|
||||
const geometry = feature.getGeometry()
|
||||
const extent = geometry?.getExtent()
|
||||
export const zoomToFeature = (map_id: string, feature: Feature | undefined) => {
|
||||
if (feature) {
|
||||
const geometry = feature.getGeometry()
|
||||
const extent = geometry?.getExtent()
|
||||
|
||||
if (getMap(map_id) && extent) {
|
||||
getMap(map_id)?.getView().fit(extent, {
|
||||
duration: 300,
|
||||
maxZoom: 19,
|
||||
})
|
||||
if (getMap(map_id) && extent) {
|
||||
getMap(map_id)?.getView().fit(extent, {
|
||||
duration: 300,
|
||||
maxZoom: 19,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getFeatureByEntityId = (entity_id: number, layer: VectorImageLayer<Feature<Geometry>, VectorSource<Feature<Geometry>>>) => {
|
||||
console.log(entity_id, layer.getSource()?.getFeatures())
|
||||
return layer.getSource()?.getFeatures().find(feature => feature.getProperties().entity_id === entity_id)
|
||||
}
|
||||
|
||||
// Function to save features to localStorage
|
||||
export const saveFeatures = (map_id: string) => {
|
||||
const features = getDrawingLayerSource(map_id).getFeatures()
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { useEffect } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { Tab, TabList } from "@fluentui/react-tabs";
|
||||
import MapComponent from "../components/map/MapComponent";
|
||||
|
||||
@ -7,76 +5,49 @@ import {
|
||||
useAppStore,
|
||||
setCurrentTab,
|
||||
deleteMapTab,
|
||||
addMapTab,
|
||||
} from "../store/app";
|
||||
import { initializeMapState, useMapStore } from "../store/map";
|
||||
import { initializeObjectsState } from "../store/objects";
|
||||
import { Button } from "@fluentui/react-components";
|
||||
import { Add12Filled, Dismiss12Filled, Map16Regular } from "@fluentui/react-icons";
|
||||
|
||||
function MapTest() {
|
||||
const { mapTab, currentTab } = useAppStore();
|
||||
const { id } = useMapStore();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: uuidv4(),
|
||||
year: 2018,
|
||||
region: 11,
|
||||
district: 146,
|
||||
},
|
||||
// {
|
||||
// id: uuidv4(),
|
||||
// year: 2023,
|
||||
// region: 11,
|
||||
// district: 146,
|
||||
// },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
tabs.forEach((tab) => {
|
||||
useAppStore.setState((state) => {
|
||||
initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year);
|
||||
initializeMapState(tab.id);
|
||||
|
||||
return {
|
||||
mapTab: {
|
||||
...state.mapTab,
|
||||
[tab.id]: {
|
||||
year: tab.year,
|
||||
region: tab.region,
|
||||
district: tab.district,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
setCurrentTab(tabs[0].id);
|
||||
|
||||
return () => {
|
||||
tabs.forEach((tab) => deleteMapTab(tab.id));
|
||||
};
|
||||
}, []);
|
||||
const { mapTab, currentTab } = useAppStore()
|
||||
const { id } = useMapStore()
|
||||
|
||||
return (
|
||||
<div style={{ height: "100%", width: "100%", position: "relative" }}>
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
||||
<TabList
|
||||
size='small'
|
||||
selectedValue={currentTab}
|
||||
onTabSelect={(_, data) => setCurrentTab(data.value as string)}
|
||||
style={{ borderBottom: '1px solid var(--colorNeutralShadowKey)' }}
|
||||
>
|
||||
{Object.entries(mapTab).map(([key]) => (
|
||||
<Tab value={key} key={key}>
|
||||
<Tab key={key} value={key} icon={<Map16Regular />}>
|
||||
{id[key]?.mapLabel ?? `Tab ${key}`}
|
||||
|
||||
<Button style={{ marginLeft: '0.5rem' }} size='small' icon={<Dismiss12Filled />} appearance='subtle' onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
deleteMapTab(key)
|
||||
}} />
|
||||
</Tab>
|
||||
))}
|
||||
|
||||
<Button icon={<Add12Filled />} title="Открыть новую вкладку" appearance='subtle' onClick={() => {
|
||||
const newId = addMapTab();
|
||||
initializeObjectsState(newId, null, null, null, null);
|
||||
initializeMapState(newId);
|
||||
}} />
|
||||
</TabList>
|
||||
|
||||
<div style={{ flexGrow: 1, position: "relative" }}>
|
||||
{Object.entries(mapTab).map(([key]) =>
|
||||
currentTab === key ? (
|
||||
<div key={key} style={{ height: "100%", position: "relative" }}>
|
||||
<MapComponent key={key} id={key} active={true} />
|
||||
</div>
|
||||
) : null
|
||||
(<div key={key} style={{ height: "100%", position: "relative", display: currentTab === key ? 'unset' : 'none' }}>
|
||||
<MapComponent key={key} id={key} active={currentTab === key} />
|
||||
</div>)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,38 +1,52 @@
|
||||
import { create } from 'zustand';
|
||||
import { create } from 'zustand'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { initializeObjectsState } from './objects'
|
||||
import { initializeMapState } from './map'
|
||||
|
||||
export type Mode = 'edit' | 'view'
|
||||
|
||||
export type ColorScheme = 'light' | 'dark' | 'auto'
|
||||
|
||||
export interface MapTabState {
|
||||
year: number | null
|
||||
region: number | null
|
||||
district: number | null
|
||||
}
|
||||
|
||||
export interface AppState {
|
||||
colorScheme: ColorScheme,
|
||||
mapTab: Record<string, {
|
||||
year: number | null,
|
||||
region: number | null,
|
||||
district: number | null
|
||||
}>,
|
||||
mapTab: Record<string, MapTabState>,
|
||||
currentTab: string | null;
|
||||
}
|
||||
|
||||
export const useAppStore = create<AppState>(() => ({
|
||||
colorScheme: 'auto',
|
||||
currentTab: null,
|
||||
mapTab: {}
|
||||
}))
|
||||
export const useAppStore = create<AppState>(() => {
|
||||
const firstId = uuidv4()
|
||||
|
||||
const getColorScheme = () => {
|
||||
initializeObjectsState(firstId, null, null, null, null);
|
||||
initializeMapState(firstId)
|
||||
|
||||
return {
|
||||
colorScheme: "auto",
|
||||
currentTab: firstId,
|
||||
mapTab: {
|
||||
[firstId]: { year: null, region: null, district: null },
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
export const getColorScheme = () => {
|
||||
useAppStore.getState().colorScheme
|
||||
}
|
||||
|
||||
const setColorScheme = (colorScheme: ColorScheme) => {
|
||||
export const setColorScheme = (colorScheme: ColorScheme) => {
|
||||
useAppStore.setState(() => ({ colorScheme: colorScheme }))
|
||||
localStorage.setItem('colorScheme', colorScheme.toString())
|
||||
}
|
||||
|
||||
const getCurrentTab = () => useAppStore.getState().currentTab
|
||||
const setCurrentTab = (id: string | null) => useAppStore.setState(() => ({ currentTab: id }))
|
||||
export const getCurrentTab = () => useAppStore.getState().currentTab
|
||||
export const setCurrentTab = (id: string | null) => useAppStore.setState(() => ({ currentTab: id }))
|
||||
|
||||
const setMapTabYear = (id: string, year: number | null) =>
|
||||
export const setMapTabYear = (id: string, year: number | null) =>
|
||||
useAppStore.setState((state) => {
|
||||
return {
|
||||
mapTab: {
|
||||
@ -42,17 +56,31 @@ const setMapTabYear = (id: string, year: number | null) =>
|
||||
}
|
||||
})
|
||||
|
||||
const deleteMapTab = (id: string) =>
|
||||
export const deleteMapTab = (id: string) =>
|
||||
useAppStore.setState((state) => {
|
||||
const { [id]: _, ...remainingTabs } = state.mapTab;
|
||||
return { mapTab: remainingTabs };
|
||||
const keys = Object.keys(remainingTabs);
|
||||
|
||||
return {
|
||||
mapTab: remainingTabs,
|
||||
currentTab: keys.length > 0 ? keys[keys.length - 1] : null,
|
||||
};
|
||||
})
|
||||
|
||||
export {
|
||||
deleteMapTab,
|
||||
getCurrentTab,
|
||||
setCurrentTab,
|
||||
setMapTabYear,
|
||||
getColorScheme,
|
||||
setColorScheme
|
||||
export const addMapTab = () => {
|
||||
const id = uuidv4();
|
||||
|
||||
useAppStore.setState((state) => ({
|
||||
mapTab: {
|
||||
...state.mapTab,
|
||||
[id]: {
|
||||
year: null,
|
||||
region: null,
|
||||
district: null,
|
||||
},
|
||||
},
|
||||
currentTab: id, // optionally switch to this new tab
|
||||
}));
|
||||
|
||||
return id; // so you can use the new id in your components
|
||||
}
|
||||
@ -21,11 +21,12 @@ import { VectorImage } from 'ol/layer';
|
||||
import { click, pointerMove } from 'ol/events/condition';
|
||||
import { measureStyleFunction, modifyStyle } from '../components/map/Measure/MeasureStyles';
|
||||
import MapBrowserEvent from 'ol/MapBrowserEvent';
|
||||
import { transform } from 'ol/proj';
|
||||
import { applyTransformations, calculateTransformations, fixedAspectRatioBox, zoomToFeature } from '../components/map/mapUtils';
|
||||
import { setCurrentObjectId, setSelectedRegion } from './objects';
|
||||
import { get, transform } from 'ol/proj';
|
||||
import { applyTransformations, calculateTransformations, fixedAspectRatioBox, getGridCellPosition, zoomToFeature } from '../components/map/mapUtils';
|
||||
import { getSelectedRegion, setCurrentObjectId, setSelectedDistrict, setSelectedRegion } from './objects';
|
||||
import View from 'ol/View';
|
||||
import { getPrintOrientation } from './print';
|
||||
import { getDistrictsData, getRegionsData } from './regions';
|
||||
|
||||
export type Mode = 'edit' | 'view' | 'print'
|
||||
|
||||
@ -45,7 +46,8 @@ interface MapState {
|
||||
currentX: number | undefined;
|
||||
currentY: number | undefined;
|
||||
currentCoordinate: Coordinate | null;
|
||||
statusText: string;
|
||||
statusText: string | null;
|
||||
statusTextPosition: [number, number];
|
||||
satMapsProvider: SatelliteMapsProvider;
|
||||
selectedObjectType: number | null;
|
||||
alignMode: boolean;
|
||||
@ -72,7 +74,7 @@ interface MapState {
|
||||
figuresLayer: VectorLayer<VectorSource>;
|
||||
linesLayer: VectorLayer<VectorSource>;
|
||||
regionsLayer: VectorImage;
|
||||
citiesLayer: VectorLayer;
|
||||
districtsLayer: VectorImage;
|
||||
districtBoundLayer: VectorImage;
|
||||
imageLayer: ImageLayer<ImageStatic>;
|
||||
selectedArea: Feature | null;
|
||||
@ -81,6 +83,7 @@ interface MapState {
|
||||
measureModify: Modify;
|
||||
overlayLayer: VectorLayer;
|
||||
regionSelect: Select;
|
||||
districtSelect: Select;
|
||||
lineSelect: Select;
|
||||
previousView: View | undefined | null;
|
||||
printArea: Extent | null;
|
||||
@ -115,6 +118,8 @@ export const initializeMapState = (
|
||||
// Region select
|
||||
const regionSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'region' })
|
||||
|
||||
const districtSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'district' })
|
||||
|
||||
// Line select
|
||||
const lineSelect = new Select({ condition: click, style: highlightStyleRed, hitTolerance: hitTolerance, layers: (layer) => layer.get('type') === 'line', })
|
||||
lineSelect.on('select', (e) => {
|
||||
@ -183,7 +188,7 @@ export const initializeMapState = (
|
||||
|
||||
const districtBoundLayer = new VectorImage({ style: new Style({ stroke: new Stroke({ color: 'red', width: 2 }), }) })
|
||||
|
||||
const citiesLayer = new VectorLayer({ source: new VectorSource(), properties: { id: uuidv4(), name: 'Города' } })
|
||||
const districtsLayer = new VectorImage({ source: new VectorSource(), properties: { id: uuidv4(), name: 'Населенные пункты', type: 'district' } })
|
||||
|
||||
const linesLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
@ -266,10 +271,10 @@ export const initializeMapState = (
|
||||
baseLayer,
|
||||
satLayer,
|
||||
staticMapLayer,
|
||||
regionsLayer,
|
||||
districtBoundLayer,
|
||||
citiesLayer,
|
||||
linesLayer,
|
||||
districtsLayer,
|
||||
districtBoundLayer,
|
||||
regionsLayer,
|
||||
figuresLayer,
|
||||
drawingLayer,
|
||||
imageLayer,
|
||||
@ -282,30 +287,48 @@ export const initializeMapState = (
|
||||
})
|
||||
|
||||
map.addInteraction(regionSelect)
|
||||
map.addInteraction(districtSelect)
|
||||
map.addInteraction(lineSelect)
|
||||
map.addInteraction(lineHover)
|
||||
map.addInteraction(figureSelect)
|
||||
map.addInteraction(figureHover)
|
||||
|
||||
// map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) {
|
||||
// setCurrentCoordinate(id, e.coordinate)
|
||||
// const currentExtent = get('EPSG:3857')?.getExtent() as Extent
|
||||
// const { tileX, tileY } = getGridCellPosition(e.coordinate[0], e.coordinate[1], currentExtent, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
// setCurrentZ(id, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
// setCurrentX(id, tileX)
|
||||
// setCurrentY(id, tileY)
|
||||
const pointerHandler = (e: MapBrowserEvent<UIEvent>) => {
|
||||
setCurrentCoordinate(id, e.coordinate)
|
||||
const currentExtent = get('EPSG:3857')?.getExtent() as Extent
|
||||
const { tileX, tileY } = getGridCellPosition(e.coordinate[0], e.coordinate[1], currentExtent, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
setCurrentZ(id, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
setCurrentX(id, tileX)
|
||||
setCurrentY(id, tileY)
|
||||
|
||||
// const pixel = map?.getEventPixel(e.originalEvent)
|
||||
// if (pixel) {
|
||||
// map?.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||||
// if (layer.get('type') === 'region') {
|
||||
// if (feature.get('entity_id')) {
|
||||
// setStatusText(id, feature.get('entity_id'))
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
const pixel = map?.getEventPixel(e.originalEvent)
|
||||
if (pixel) {
|
||||
let found = false;
|
||||
map?.forEachFeatureAtPixel(pixel, (feature, layer) => {
|
||||
if (layer.get("type") === "region" && feature.get("entity_id")) {
|
||||
found = true
|
||||
|
||||
const name = getRegionsData()?.find(region => region.id === feature.get("entity_id"))?.name || feature.get("entity_id") || ""
|
||||
setStatusText(id, name);
|
||||
setStatusTextPosition(id, pixel[0], pixel[1]);
|
||||
}
|
||||
|
||||
if (layer.get("type") === "district" && feature.get("entity_id")) {
|
||||
found = true
|
||||
|
||||
const name = getDistrictsData()?.find(district => district.id === feature.get("entity_id"))?.name || feature.get("entity_id") || ""
|
||||
setStatusText(id, name);
|
||||
setStatusTextPosition(id, pixel[0], pixel[1]);
|
||||
}
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
setStatusText(id, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
map.on('pointermove', pointerHandler)
|
||||
|
||||
map.on('click', function (e: MapBrowserEvent<UIEvent>) {
|
||||
if (getAlignMode(id)) {
|
||||
@ -332,11 +355,22 @@ export const initializeMapState = (
|
||||
if (pixel) {
|
||||
map?.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||||
if (layer) {
|
||||
if (layer.get('type') === 'region') {
|
||||
if (layer.get('type') === 'region' && layer.getOpacity() !== 0) {
|
||||
zoomToFeature(id, feature as Feature)
|
||||
|
||||
if (feature.get('entity_id')) {
|
||||
setSelectedRegion(id, feature.get('entity_id'))
|
||||
|
||||
//regionsLayer.setVisible(false)
|
||||
regionsLayer.setOpacity(0)
|
||||
}
|
||||
}
|
||||
|
||||
if (layer.get('type') === 'district' && layer.getOpacity() !== 0) {
|
||||
zoomToFeature(id, feature as Feature)
|
||||
|
||||
if (feature.get('entity_id')) {
|
||||
setSelectedDistrict(id, feature.get('entity_id'))
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -360,7 +394,9 @@ export const initializeMapState = (
|
||||
}
|
||||
})
|
||||
|
||||
regionsLayer.setVisible(!isViewCovered)
|
||||
if (!getSelectedRegion(id)) {
|
||||
regionsLayer.setOpacity(isViewCovered ? 0 : 1)
|
||||
}
|
||||
})
|
||||
|
||||
map.setView(
|
||||
@ -386,7 +422,8 @@ export const initializeMapState = (
|
||||
currentX: undefined,
|
||||
currentY: undefined,
|
||||
currentCoordinate: null,
|
||||
statusText: '',
|
||||
statusText: null,
|
||||
statusTextPosition: [0, 0],
|
||||
satMapsProvider: 'google',
|
||||
selectedObjectType: null,
|
||||
alignMode: false,
|
||||
@ -411,8 +448,8 @@ export const initializeMapState = (
|
||||
staticMapLayer: staticMapLayer,
|
||||
figuresLayer: figuresLayer,
|
||||
linesLayer: linesLayer,
|
||||
districtsLayer: districtsLayer,
|
||||
regionsLayer: regionsLayer,
|
||||
citiesLayer: citiesLayer,
|
||||
districtBoundLayer: districtBoundLayer,
|
||||
imageLayer: imageLayer,
|
||||
selectedArea: null,
|
||||
@ -421,6 +458,7 @@ export const initializeMapState = (
|
||||
measureModify: measureModify,
|
||||
nodeLayer: nodeLayer,
|
||||
overlayLayer: overlayLayer,
|
||||
districtSelect: districtSelect,
|
||||
regionSelect: regionSelect,
|
||||
lineSelect: lineSelect,
|
||||
previousView: null,
|
||||
@ -644,7 +682,16 @@ export const setCurrentCoordinate = (id: string, c: Coordinate | null) => useMap
|
||||
}
|
||||
})
|
||||
|
||||
export const setStatusText = (id: string, t: string) => useMapStore.setState((state) => {
|
||||
export const setStatusTextPosition = (id: string, left: number, top: number) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], statusTextPosition: [left, top] }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setStatusText = (id: string, t: string | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
|
||||
@ -2,7 +2,7 @@ import { create } from 'zustand';
|
||||
|
||||
interface ObjectsState {
|
||||
id: Record<string, {
|
||||
selectedRegion: number | undefined;
|
||||
selectedRegion: number | null;
|
||||
selectedDistrict: number | null;
|
||||
selectedCity: number | null;
|
||||
selectedYear: number | null;
|
||||
@ -16,7 +16,7 @@ export const useObjectsStore = create<ObjectsState>(() => ({
|
||||
|
||||
export const initializeObjectsState = (
|
||||
id: string,
|
||||
selectedRegion: number | undefined,
|
||||
selectedRegion: number | null,
|
||||
selectedDistrict: number | null,
|
||||
selectedCity: number | null,
|
||||
selectedYear: number | null,
|
||||
@ -46,7 +46,7 @@ export const setSelectedCity = (id: string, city: number | null) => useObjectsSt
|
||||
})
|
||||
|
||||
export const getSelectedRegion = (id: string) => useObjectsStore.getState().id[id].selectedRegion
|
||||
export const setSelectedRegion = (id: string, region: number | undefined) => useObjectsStore.setState((state) => {
|
||||
export const setSelectedRegion = (id: string, region: number | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
|
||||
36
client/src/store/regions.ts
Normal file
36
client/src/store/regions.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { create } from 'zustand';
|
||||
import { IDistrict, IRegion } from '../interfaces/gis';
|
||||
|
||||
export interface RegionsState {
|
||||
regionsData: IRegion[],
|
||||
districtsData: IDistrict[],
|
||||
}
|
||||
|
||||
export const useRegionsStore = create<RegionsState>(() => ({
|
||||
regionsData: [],
|
||||
districtsData: []
|
||||
}))
|
||||
|
||||
export const getRegionData = (id: number) => {
|
||||
return useRegionsStore.getState().regionsData.find(region => region.id === id)
|
||||
}
|
||||
|
||||
export const getRegionsData = () => {
|
||||
return useRegionsStore.getState().regionsData
|
||||
}
|
||||
|
||||
export const setRegionsData = (regionsData: any) => {
|
||||
useRegionsStore.setState(() => ({ regionsData: regionsData }))
|
||||
}
|
||||
|
||||
export const getDistrictData = (id: number) => {
|
||||
return useRegionsStore.getState().districtsData.find(district => district.id === id)
|
||||
}
|
||||
|
||||
export const getDistrictsData = () => {
|
||||
return useRegionsStore.getState().districtsData
|
||||
}
|
||||
|
||||
export const setDistrictsData = (districtsData: any) => {
|
||||
useRegionsStore.setState(() => ({ districtsData: districtsData }))
|
||||
}
|
||||
Reference in New Issue
Block a user