diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx index 361c4e2e3..07972a978 100644 --- a/src/bootstrap.tsx +++ b/src/bootstrap.tsx @@ -286,19 +286,13 @@ const setupSHOGunMap = async (application: Application) => { view.setConstrainResolution(true); - const processLayerGroup = new OlLayerGroup({ - layers: [] - }); - processLayerGroup.set('name', i18n.t('BasicMapComponent.processedLayersFolder')); - processLayerGroup.setVisible(false); - const externalWmsLayerGroup = new OlLayerGroup({ layers: [] }); externalWmsLayerGroup.set('name', i18n.t('AddLayerModal.externalWmsFolder')); externalWmsLayerGroup.setVisible(false); - layers?.getLayers().extend([processLayerGroup, externalWmsLayerGroup]); + layers?.getLayers().extend([externalWmsLayerGroup]); return new OlMap({ view, @@ -331,11 +325,12 @@ const setupDefaultMap = () => { hoverable: true }); - const processLayerGroup = new OlLayerGroup({ + const externalLayerGroup = new OlLayerGroup({ layers: [] }); - processLayerGroup.set('name', i18n.t('BasicMapComponent.processedLayersFolder')); - processLayerGroup.setVisible(false); + externalLayerGroup.set('name', i18n.t('AddLayerModal.externalWmsFolder')); + externalLayerGroup.set('isGroupForImportedLayers', true); + externalLayerGroup.setVisible(false); const eoLayerGroup = new OlLayerGroup({ layers: [temperatureLayer] @@ -354,7 +349,7 @@ const setupDefaultMap = () => { center: center, zoom: 0 }), - layers: [backgroundLayerGroup, eoLayerGroup, processLayerGroup], + layers: [backgroundLayerGroup, eoLayerGroup, externalLayerGroup], controls: OlControlDefaults({ zoom: false }) diff --git a/src/components/AddLayerModal/index.tsx b/src/components/AddLayerModal/index.tsx index 583390efd..11e77ce6d 100644 --- a/src/components/AddLayerModal/index.tsx +++ b/src/components/AddLayerModal/index.tsx @@ -118,6 +118,7 @@ export const AddLayerModal: React.FC = ({ layersToAdd.forEach(layerToAdd => { if (!targetGroup.getLayers().getArray().includes(layerToAdd)) { layerToAdd.set('isExternalLayer', true); + layerToAdd.set('isImported', true); const layerUrl = layerToAdd instanceof TileLayer || layerToAdd instanceof ImageLayer ? layerToAdd.getSource().getUrl() : ''; const layerConfig = { diff --git a/src/components/BasicMapComponent/index.tsx b/src/components/BasicMapComponent/index.tsx index 16edad349..5dbeee9d8 100644 --- a/src/components/BasicMapComponent/index.tsx +++ b/src/components/BasicMapComponent/index.tsx @@ -53,10 +53,8 @@ export const BasicMapComponent: React.FC> = ({ if (!map) { return; } - const processedFolderName = t('BasicMapComponent.processedLayersFolder'); - const processedLayerGroup = MapUtil.getLayerByName(map, processedFolderName) as LayerGroup; - const externalFolderName = t('AddLayerModal.externalWmsFolder'); - const externalLayerGroup = MapUtil.getLayerByName(map, externalFolderName) as LayerGroup; + + const externalLayerGroup = MapUtil.getLayerByName(map, t('AddLayerModal.externalWmsFolder')) as LayerGroup; try { const config = JSON.parse(configString); @@ -76,9 +74,14 @@ export const BasicMapComponent: React.FC> = ({ if (cfg.isExternalLayer) { externalLayerGroup.getLayers().extend([olLayer]); externalLayerGroup.setVisible(true); - } else if (cfg.isProcessedLayer) { - processedLayerGroup.getLayers().extend([olLayer]); - processedLayerGroup.setVisible(true); + } else { + const customFolderName = cfg.groupName; + const customLayerGroup = MapUtil.getLayerByName(map, customFolderName) as LayerGroup; + + if (customLayerGroup) { + customLayerGroup.getLayers().extend([olLayer]); + customLayerGroup.setVisible(true); + } } } } diff --git a/src/components/Permalink/index.tsx b/src/components/Permalink/index.tsx index ddd676f25..b36fceee9 100644 --- a/src/components/Permalink/index.tsx +++ b/src/components/Permalink/index.tsx @@ -26,7 +26,6 @@ import { useTranslation } from 'react-i18next'; -import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; import PermalinkUtil from '@terrestris/ol-util/dist/PermalinkUtil/PermalinkUtil'; import { @@ -41,7 +40,7 @@ export interface PermalinkProps extends Partial { } export const Permalink: React.FC = () => { const map = useMap(); - const layerAttributes = useMemo(() => ['layerConfig', 'isProcessedLayer', 'isExternalLayer'], []); + const layerAttributes = useMemo(() => ['layerConfig', 'isExternalLayer', 'groupName'], []); const { t } = useTranslation(); @@ -78,15 +77,17 @@ export const Permalink: React.FC = () => { }; const filterFunctionForLayers = (l: BaseLayer) => (l instanceof TileLayer || l instanceof ImageLayer); - const updateLayersInPermalink = () => setPermalink( - PermalinkUtil.getLink( - map, - ';', - identifierFunction, - filterFunctionForLayers, - layerAttributes - ) - ); + const updateLayersInPermalink = () => { + setPermalink( + PermalinkUtil.getLink( + map, + ';', + identifierFunction, + filterFunctionForLayers, + layerAttributes + ) + ); + }; const registerLayerCallback = (layerGroup: LayerGroup) => { const layersInGroup = layerGroup.getLayers().getArray(); @@ -102,31 +103,24 @@ export const Permalink: React.FC = () => { } }; - let mapLayerGroup = map.getLayerGroup(); - - const externalLayerGroupName = t('AddLayerModal.externalWmsFolder'); - const externalLayerGroup = MapUtil.getLayerByName(map, externalLayerGroupName) as LayerGroup; + const layerGroups = map.getLayers().getArray().filter((l) => l.get('isGroupForImportedLayers')); + layerGroups.forEach((layerGroup) => { + // @ts-ignore + eventKeys.push(layerGroup.getLayers().on('add', updateLayersInPermalink)); + // @ts-ignore + eventKeys.push(layerGroup.getLayers().on('remove', updateLayersInPermalink)); - const processedLayerGroupName = t('BasicMapComponent.processedLayersFolder'); - const processedLayerGroup = MapUtil.getLayerByName(map, processedLayerGroupName) as LayerGroup; - - const externalLayerGroupAddListener = externalLayerGroup.getLayers().on('add', updateLayersInPermalink); - const externalLayerGroupRemoveListener = externalLayerGroup.getLayers().on('remove', updateLayersInPermalink); - const processedLayerGroupAddListener = processedLayerGroup.getLayers().on('add', updateLayersInPermalink); - const processedLayerGroupRemoveListener = processedLayerGroup.getLayers().on('remove', updateLayersInPermalink); + }) const listenerKeyCenter = map.getView().on('change:center', updatePermalink); const listenerKeyResolution = map.getView().on('change:resolution', updatePermalink); + let mapLayerGroup = map.getLayerGroup(); registerLayerCallback(mapLayerGroup); return () => { unByKey(listenerKeyCenter); unByKey(listenerKeyResolution); - unByKey(externalLayerGroupAddListener); - unByKey(externalLayerGroupRemoveListener); - unByKey(processedLayerGroupAddListener); - unByKey(processedLayerGroupRemoveListener); unByKey(eventKeys); }; }, [layerAttributes, map, t]); diff --git a/src/components/ToolMenu/LayerTree/index.tsx b/src/components/ToolMenu/LayerTree/index.tsx index 729e85f6d..09f65d2d4 100644 --- a/src/components/ToolMenu/LayerTree/index.tsx +++ b/src/components/ToolMenu/LayerTree/index.tsx @@ -9,7 +9,6 @@ import OlBaseLayer from 'ol/layer/Base'; import OlLayerGroup from 'ol/layer/Group'; import OlLayer from 'ol/layer/Layer'; import OlSource from 'ol/source/Source'; -import OlSourceVector from 'ol/source/Vector'; import { useTranslation @@ -46,23 +45,17 @@ export const LayerTree: React.FC = ({ const [visibleLegendsIds, setVisibleLegendsIds] = useState([]); const treeFilterFunction = (layer: OlLayer | OlLayerGroup) => { - if (layer instanceof OlLayerGroup && !layer.getVisible() && layer.getLayers().getLength() === 0) { - return false; - } - - if (layer.get('name') === 'react-geo_digitize') { - return false; - } - if (layer instanceof OlLayerGroup) { + // @ts-ignore + if (layer.getLayers) { return !layer.get('hideInLayerTree'); } - if (layer.getSource && layer.getSource() instanceof OlSourceVector) { + // @ts-ignore + if (layer.getSource && layer.getSource().forEachFeature) { return false; } - - return !layer.get('isBackgroundLayer') && !(layer.getSource && layer.getSource() instanceof OlSourceVector); + return true; }; const treeNodeTitleRenderer = (layer: OlBaseLayer) => { @@ -75,7 +68,8 @@ export const LayerTree: React.FC = ({ const resolution = mapView.getResolution(); const scale = resolution ? MapUtil.getScaleForResolution(resolution, unit) : undefined; - if (layer instanceof OlLayerGroup) { + // @ts-ignore + if (layer.getLayers) { return (
{layer.get('name')}