[Zones FAO] Affichage des zones avec Geoserver (#2923)

## Linked issues - Resolve #2817 ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Feb 19, 2024 · 5e5cceb · 5e5cceb
2 parents a037038 + 8d31bbe
commit 5e5cceb
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 18 deletions.
diff --git a/frontend/src/domain/types/layer.ts b/frontend/src/domain/types/layer.ts
@@ -1,3 +1,6 @@
+import TileLayer from 'ol/layer/Tile'
+import { TileWMS } from 'ol/source'
+
 import type { RegulatoryZone } from '../../features/Regulation/types'
 import type { Point } from 'ol/geom'
 import type VectorLayer from 'ol/layer/Vector'
@@ -30,6 +33,10 @@ export type VectorLayerWithName = VectorLayer<VectorSource> & {
   name?: string
 }
 
+export type TileLayerWithName = TileLayer<TileWMS> & {
+  name?: string
+}
+
 export type WebGLPointsLayerWithName = WebGLPointsLayer<VectorSource<Point>> & {
   name?: string
 }
diff --git a/frontend/src/features/AdministrativeZone/layers/AdministrativeLayers.tsx b/frontend/src/features/AdministrativeZone/layers/AdministrativeLayers.tsx
@@ -1,3 +1,5 @@
+import { FAO_LAYER } from '@features/AdministrativeZone/layers/constants'
+import { useMainAppSelector } from '@hooks/useMainAppSelector'
 import React, { useEffect } from 'react'
 
 import {
@@ -7,7 +9,7 @@ import {
   layersNotInCurrentOLMap,
   layersNotInShowedLayers
 } from '../../../domain/entities/layers'
-import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { LayerProperties } from '../../../domain/entities/layers/constants'
 import { monitorfishMap } from '../../map/monitorfishMap'
 import { getVectorOLLayer } from '../useCases/showAdministrativeZone'
 
@@ -30,6 +32,13 @@ function UnmemoizedAdministrativeLayers() {
         if (!layerToInsert) {
           return
         }
+
+        if (layerToInsert.type === LayerProperties.FAO.code && FAO_LAYER) {
+          olLayers.push(FAO_LAYER)
+
+          return
+        }
+
         const VectorLayer = getVectorOLLayer(layerToInsert.type, layerToInsert.zone, isBackoffice)
         olLayers.push(VectorLayer)
       })

diff --git a/frontend/src/features/AdministrativeZone/layers/constants.ts b/frontend/src/features/AdministrativeZone/layers/constants.ts
@@ -0,0 +1,21 @@
+import { getLayerNameFromTypeAndZone } from '@features/AdministrativeZone/useCases/utils'
+import TileLayer from 'ol/layer/Tile'
+import { TileWMS } from 'ol/source'
+import { createXYZ } from 'ol/tilegrid'
+
+import { LayerProperties } from '../../../domain/entities/layers/constants'
+
+import type { TileLayerWithName } from '../../../domain/types/layer'
+
+export const FAO_LAYER = new TileLayer({
+  source: new TileWMS({
+    params: { FORMAT: 'image/png', LAYERS: 'monitorfish:fao_areas', STYLES: 'monitorfish:FAO style', TILED: true },
+    serverType: 'geoserver',
+    tileGrid: createXYZ({ tileSize: 512 }),
+    // Countries have transparency, so do not fade tiles:
+    transition: 0,
+    url: `${import.meta.env.FRONTEND_GEOSERVER_REMOTE_URL}/geoserver/monitorfish/wms`
+  })
+}) as TileLayerWithName
+
+FAO_LAYER.name = getLayerNameFromTypeAndZone(LayerProperties.FAO.code, undefined)
diff --git a/frontend/src/features/AdministrativeZone/layers/styles/administrativeLayer.style.ts b/frontend/src/features/AdministrativeZone/layers/styles/administrativeLayer.style.ts
@@ -29,23 +29,6 @@ export function getAdministrativeLayerStyle(type: string) {
             }`
           })
         })
-    case LayerProperties.FAO.code:
-      return (feature: Feature | undefined) =>
-        new Style({
-          stroke: new Stroke({
-            color: '#767AB2',
-            width: 1
-          }),
-          text: new Text({
-            fill: new Fill({ color: THEME.color.gunMetal }),
-            font: '12px Marianne',
-            overflow: true,
-            stroke: new Stroke({ color: 'rgba(255,255,255,0.4)', width: 2 }),
-            text: `${
-              (LayerProperties.FAO.zoneNamePropertyKey && feature?.get(LayerProperties.FAO.zoneNamePropertyKey)) || ''
-            }`
-          })
-        })
     case LayerProperties.AEM.code:
       return (feature: Feature | undefined) =>
         new Style({

diff --git a/frontend/src/features/AdministrativeZone/layers/styles/geoserver_fao_style.md b/frontend/src/features/AdministrativeZone/layers/styles/geoserver_fao_style.md
@@ -0,0 +1,51 @@
+# Geoserver FAO style
+
+The `fao_areas` layer is served as a Geoserver `wms` layer.
+
+For `geowebcache` to be running under `/wms` routes, the `WMS` caching direct integration must be setup:
+https://docs.geoserver.org/stable/en/user/geowebcache/webadmin/defaults.html#enable-direct-integration-with-geoserver-wms
+
+The style (named `FAO style`) is defined as the following SLD:
+```xml
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:se="http://www.opengis.net/se">
+  <NamedLayer>
+    <Name>FAO areas layer</Name>
+    <UserStyle>
+      <Name>FAO areas</Name>
+      <Title>FAO Areas</Title>
+      <FeatureTypeStyle>
+        <Rule>
+          <Name>Line</Name>
+          <LineSymbolizer>
+            <Stroke>
+              <CssParameter name="stroke">#767ab2</CssParameter>
+              <CssParameter name="stroke-width">1</CssParameter>
+            </Stroke>
+          </LineSymbolizer>
+        </Rule>
+        <Rule>
+          <Name>Text</Name>
+          <TextSymbolizer>
+            <Label>
+              <ogc:PropertyName>f_code</ogc:PropertyName>
+            </Label>
+            <Font>
+              <CssParameter name="font-size">12</CssParameter>
+            </Font>
+            <Halo>
+              <Fill>
+                <CssParameter name="fill">#ffffff</CssParameter>
+              </Fill>
+            </Halo>
+            <Fill>
+              <CssParameter name="fill">#282F3E</CssParameter>
+              <CssParameter name="fill-opacity">1</CssParameter>
+            </Fill>
+          </TextSymbolizer>
+        </Rule>
+      </FeatureTypeStyle>
+    </UserStyle>
+  </NamedLayer>
+</StyledLayerDescriptor>
+```