forked from VinokurovVE/tests
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 React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
interface MapLayersProps {
|
||||
map: React.MutableRefObject<Map | null>
|
||||
@ -12,16 +13,49 @@ const MapLayers = ({
|
||||
return (
|
||||
<Stack gap='0'>
|
||||
{map.current?.getLayers().getArray() && map.current?.getLayers().getArray().map((layer, index) => (
|
||||
<Flex key={`layer-${index}`} gap='xs' align='center'>
|
||||
<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>
|
||||
<LayerSetting key={index} index={index} layer={layer} />
|
||||
))}
|
||||
</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
|
@ -20,6 +20,11 @@ const yandexMapsSatelliteSource = new XYZ({
|
||||
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({
|
||||
url: 'sakha_republic.geojson',
|
||||
format: new GeoJSON(),
|
||||
@ -28,5 +33,6 @@ const regionsLayerSource = new VectorSource({
|
||||
export {
|
||||
googleMapsSatelliteSource,
|
||||
yandexMapsSatelliteSource,
|
||||
regionsLayerSource
|
||||
regionsLayerSource,
|
||||
customMapSource
|
||||
}
|
Reference in New Issue
Block a user