MapLayers reactive controls; MapSource: add customMapSource for tiles;
This commit is contained in:
@ -1,6 +1,7 @@
|
|||||||
import { Checkbox, Flex, NavLink, Stack } from '@mantine/core'
|
import { Checkbox, Flex, NavLink, Slider, Stack } from '@mantine/core'
|
||||||
|
import BaseLayer from 'ol/layer/Base'
|
||||||
import Map from 'ol/Map'
|
import Map from 'ol/Map'
|
||||||
import React from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
interface MapLayersProps {
|
interface MapLayersProps {
|
||||||
map: React.MutableRefObject<Map | null>
|
map: React.MutableRefObject<Map | null>
|
||||||
@ -12,16 +13,49 @@ const MapLayers = ({
|
|||||||
return (
|
return (
|
||||||
<Stack gap='0'>
|
<Stack gap='0'>
|
||||||
{map.current?.getLayers().getArray() && map.current?.getLayers().getArray().map((layer, index) => (
|
{map.current?.getLayers().getArray() && map.current?.getLayers().getArray().map((layer, index) => (
|
||||||
<Flex key={`layer-${index}`} gap='xs' align='center'>
|
<LayerSetting key={index} index={index} layer={layer} />
|
||||||
<Checkbox.Indicator
|
|
||||||
checked={layer.getLayerState().visible}
|
|
||||||
onClick={() => layer.getLayerState().visible ? layer.setVisible(false) : layer.setVisible(true)}
|
|
||||||
/>
|
|
||||||
<NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
|
|
||||||
</Flex>
|
|
||||||
))}
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface LayerSettingProps {
|
||||||
|
index: number;
|
||||||
|
layer: BaseLayer;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LayerSetting = ({
|
||||||
|
index,
|
||||||
|
layer
|
||||||
|
}: LayerSettingProps) => {
|
||||||
|
const [opacity, setOpacity] = useState(layer.getOpacity())
|
||||||
|
const [visible, setVisible] = useState(layer.getLayerState().visible)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
layer.setVisible(visible)
|
||||||
|
}, [visible, layer])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
layer.setOpacity(opacity)
|
||||||
|
}, [opacity, layer])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex key={`layer-${index}`} gap='xs' align='center'>
|
||||||
|
<Checkbox
|
||||||
|
checked={visible}
|
||||||
|
onChange={(e) => setVisible(e.currentTarget.checked)}
|
||||||
|
/>
|
||||||
|
<Slider
|
||||||
|
w='100%'
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.001}
|
||||||
|
value={opacity}
|
||||||
|
onChange={(value) => setOpacity(value)}
|
||||||
|
/>
|
||||||
|
<NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default MapLayers
|
export default MapLayers
|
@ -20,6 +20,11 @@ const yandexMapsSatelliteSource = new XYZ({
|
|||||||
projection: yandexProjection,
|
projection: yandexProjection,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const customMapSource = new XYZ({
|
||||||
|
url: `${import.meta.env.VITE_API_EMS_URL}/tiles/tile/custom/{z}/{x}/{y}`,
|
||||||
|
attributions: 'Custom map data'
|
||||||
|
})
|
||||||
|
|
||||||
const regionsLayerSource = new VectorSource({
|
const regionsLayerSource = new VectorSource({
|
||||||
url: 'sakha_republic.geojson',
|
url: 'sakha_republic.geojson',
|
||||||
format: new GeoJSON(),
|
format: new GeoJSON(),
|
||||||
@ -28,5 +33,6 @@ const regionsLayerSource = new VectorSource({
|
|||||||
export {
|
export {
|
||||||
googleMapsSatelliteSource,
|
googleMapsSatelliteSource,
|
||||||
yandexMapsSatelliteSource,
|
yandexMapsSatelliteSource,
|
||||||
regionsLayerSource
|
regionsLayerSource,
|
||||||
|
customMapSource
|
||||||
}
|
}
|
Reference in New Issue
Block a user