@map-colonies/react-components 3.13.1 → 3.15.0

package/src/lib/cesium-map/layers-manager.ts

@@ -5,8 +5,10 @@ import {
   WebMapServiceImageryProvider,
   WebMapTileServiceImageryProvider,
   Event,
+  Rectangle,
+  SingleTileImageryProvider,
 } from 'cesium';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { Feature, Point, Polygon } from 'geojson';
 import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
 import {
@@ -19,6 +21,13 @@ import { CesiumViewer } from './map';
 import { IBaseMap } from './settings/settings';
 import { pointToGeoJSON } from './tools/geojson/point.geojson';
 import { IMapLegend } from './map-legend';
+import {
+  CustomUrlTemplateImageryProvider,
+  CustomWebMapServiceImageryProvider,
+  CustomWebMapTileServiceImageryProvider,
+  HAS_TRANSPARENCY_META_PROP,
+} from './helpers/customImageryProviders';
+import { cesiumRectangleContained } from './helpers/utils';
 
 const INC = 1;
 const DEC = -1;
@@ -52,6 +61,8 @@ export interface IVectorLayer {
 
 export type LegendExtractor = (layers: (any & { meta: any })[]) => IMapLegend[];
 
+const TRANSPARENT_LAYER_ID = 'TRANSPARENT_BASE_LAYER';
+
 class LayerManager {
   public mapViewer: CesiumViewer;
 
@@ -74,10 +85,41 @@ class LayerManager {
     if (onLayersUpdate) {
       this.layerUpdated.addEventListener(onLayersUpdate, this);
     }
-    this.mapViewer.imageryLayers.layerRemoved.addEventListener(() => {
-      this.setLegends();
-      this.layerUpdated.raiseEvent();
-    });
+
+    // Binding layer's relevancy check to cesium lifecycle if optimized tile requests enabled.
+    if (this.mapViewer.shouldOptimizedTileRequests) {
+      this.layerUpdated.addEventListener((meta: Record<string, unknown>) => {
+        const newMetaKeys = Object.keys(meta);
+        const shouldTriggerRelevancyCheck =
+          newMetaKeys.length === 1 &&
+          newMetaKeys[0] === HAS_TRANSPARENCY_META_PROP;
+        if (shouldTriggerRelevancyCheck) {
+          this.markRelevantLayersForExtent();
+          this.hideNonRelevantLayers();
+        }
+      });
+
+      this.mapViewer.imageryLayers.layerRemoved.addEventListener(() => {
+        this.setLegends();
+        this.markRelevantLayersForExtent();
+        this.hideNonRelevantLayers();
+      });
+
+      this.mapViewer.imageryLayers.layerMoved.addEventListener(() => {
+        this.markRelevantLayersForExtent();
+        this.hideNonRelevantLayers();
+      });
+
+      this.mapViewer.imageryLayers.layerAdded.addEventListener(() => {
+        this.markRelevantLayersForExtent();
+        this.hideNonRelevantLayers();
+      });
+
+      this.mapViewer.camera.moveEnd.addEventListener(() => {
+        this.markRelevantLayersForExtent();
+        this.hideNonRelevantLayers();
+      });
+    }
   }
 
   /* eslint-disable */
@@ -87,9 +129,9 @@ class LayerManager {
   ): void {
     const layer = this.layers.find(layerPredicate);
     if (layer) {
-      layer.meta = meta;
+      layer.meta = { ...(layer.meta ?? {}), ...meta };
       this.setLegends();
-      this.layerUpdated.raiseEvent();
+      this.layerUpdated.raiseEvent(meta);
     }
   }
   /* eslint-enable */
@@ -101,6 +143,24 @@ class LayerManager {
     sortedBaseMapLayers.forEach((layer, idx) => {
       this.addRasterLayer(layer, idx, baseMap.id);
     });
+
+    /**
+     *  Set transparent layer as the first layer. if using optimized tile requests.
+     *
+     *  Apparently, cesium layer's rectangle is not affective when:
+     *  - There is only one active layer && The layer's rectangle contains the extent rectangle.
+     *
+     *  As a result, when using optimized tile requesting and we zoom in a discrete layer,
+     *  there are some visual artifacts due to tiles requesting outside of the layer's rectangle boundary.
+     *
+     *  A simple workaround would be adding a transparent layer as the very first layer at all times,
+     *  so that we ensure the rectangle will always be affective.
+     */
+
+    if (this.mapViewer.shouldOptimizedTileRequests) {
+      this.removeLayer(TRANSPARENT_LAYER_ID);
+      this.addTransparentImageryProvider();
+    }
   }
 
   public addRasterLayer(
@@ -110,30 +170,47 @@ class LayerManager {
   ): void {
     let cesiumLayer: ICesiumImageryLayer | undefined;
     switch (layer.type) {
-      case 'XYZ_LAYER':
+      case 'XYZ_LAYER': {
+        const options = layer.options as UrlTemplateImageryProvider.ConstructorOptions;
+
+        const providerInstance = this.mapViewer.shouldOptimizedTileRequests
+          ? new CustomUrlTemplateImageryProvider(options, this.mapViewer)
+          : new UrlTemplateImageryProvider(options);
+
         cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(
-          new UrlTemplateImageryProvider(
-            layer.options as UrlTemplateImageryProvider.ConstructorOptions
-          ),
+          providerInstance,
           index
         );
+
         break;
-      case 'WMS_LAYER':
+      }
+      case 'WMS_LAYER': {
+        const options = layer.options as WebMapServiceImageryProvider.ConstructorOptions;
+
+        const providerInstance = this.mapViewer.shouldOptimizedTileRequests
+          ? new CustomWebMapServiceImageryProvider(options, this.mapViewer)
+          : new WebMapServiceImageryProvider(options);
+
         cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(
-          new WebMapServiceImageryProvider(
-            layer.options as WebMapServiceImageryProvider.ConstructorOptions
-          ),
+          providerInstance,
           index
         );
         break;
-      case 'WMTS_LAYER':
+      }
+      case 'WMTS_LAYER': {
+        const options = layer.options as WebMapTileServiceImageryProvider.ConstructorOptions;
+
+        const providerInstance = this.mapViewer.shouldOptimizedTileRequests
+          ? new CustomWebMapTileServiceImageryProvider(options, this.mapViewer)
+          : new WebMapTileServiceImageryProvider(options);
+
         cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(
-          new WebMapTileServiceImageryProvider(
-            layer.options as WebMapTileServiceImageryProvider.ConstructorOptions
-          ),
+          providerInstance,
           index
         );
+
         break;
+      }
       case 'OSM_LAYER':
         break;
     }
@@ -310,6 +387,29 @@ class LayerManager {
     });
   }
 
+  public addTransparentImageryProvider(): void {
+    // Worldwide transparent layer
+    const transparentLayer = this.mapViewer.imageryLayers.addImageryProvider(
+      new SingleTileImageryProvider({
+        url: './assets/img/transparent-tile.png',
+        /* eslint-disable @typescript-eslint/no-magic-numbers */
+        rectangle: new Rectangle(
+          -3.141592653589793,
+          -1.5707963267948966,
+          3.141592653589793,
+          1.5707963267948966
+        ),
+        /* eslint-enable @typescript-eslint/no-magic-numbers */
+      }),
+      0
+    );
+
+    (transparentLayer as ICesiumImageryLayer).meta = {
+      id: TRANSPARENT_LAYER_ID,
+      skipRelevancyCheck: true,
+    };
+  }
+
   private setLegends(): void {
     if (typeof this.legendsExtractor !== 'undefined') {
       this.legendsList = this.legendsExtractor(this.layers);
@@ -349,6 +449,110 @@ class LayerManager {
       }
     });
   }
+
+  private hideNonRelevantLayers(): void {
+    for (const layer of this.layers) {
+      if (
+        layer.meta?.relevantToExtent !== layer.show &&
+        layer.imageryProvider.ready
+      ) {
+        //@ts-ignore
+        layer.show = layer.meta?.relevantToExtent ?? true;
+      }
+    }
+  }
+
+  private markRelevantLayersForExtent(): void {
+    try {
+      const extent = this.mapViewer.camera.computeViewRectangle() as Rectangle;
+
+      // Iterating in reverse order so that top layer is first.
+      for (let i = this.layers.length - 1; i >= 0; i--) {
+        const layer = this.layers[i];
+        const intersectsExtent =
+          !isEmpty(extent) &&
+          !isEmpty(layer.rectangle) &&
+          Rectangle.intersection(extent, layer.rectangle);
+
+        // Iterating from top layer until the current. (inclusive)
+        for (let j = this.layers.length - 1; j >= i; j--) {
+          if (layer.meta?.skipRelevancyCheck === true) {
+            layer.meta = { ...layer.meta, relevantToExtent: true };
+            continue;
+          }
+
+          const layerAbove = this.layers[j];
+          const layerAboveHasTransparency =
+            layerAbove.meta?.[HAS_TRANSPARENCY_META_PROP] === true;
+
+          if (layer !== layerAbove) {
+            // Layer is relevant if in extent and there is no layer above it which is opaque and contains it.
+            if (intersectsExtent instanceof Rectangle) {
+              if (cesiumRectangleContained(extent, layer.rectangle)) {
+                // Layer contains the extent.
+                if (
+                  cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                  !layerAboveHasTransparency
+                ) {
+                  layer.meta = {
+                    ...(layer.meta ?? {}),
+                    relevantToExtent: false,
+                  };
+                  break;
+                } else {
+                  layer.meta = {
+                    ...(layer.meta ?? {}),
+                    relevantToExtent: true,
+                  };
+                }
+              }
+
+              if (
+                cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                !layerAboveHasTransparency
+              ) {
+                layer.meta = { ...(layer.meta ?? {}), relevantToExtent: false };
+                break;
+              }
+
+              if (
+                cesiumRectangleContained(layer.rectangle, layerAbove.rectangle)
+              ) {
+                layer.meta = {
+                  ...(layer.meta ?? {}),
+                  relevantToExtent: layerAboveHasTransparency,
+                };
+
+                // Once there is layer above that hides it, no need to continue to check.
+                if (!layerAboveHasTransparency) {
+                  break;
+                }
+              } else {
+                // Not contained by layer above it, and inside the extent.
+                layer.meta = { ...(layer.meta ?? {}), relevantToExtent: true };
+              }
+            } else {
+              layer.meta = { ...(layer.meta ?? {}), relevantToExtent: false };
+            }
+          } else {
+            // Handle top layer
+            if (i === this.layers.length - 1) {
+              layer.meta = {
+                ...(layer.meta ?? {}),
+                relevantToExtent: intersectsExtent instanceof Rectangle,
+              };
+            }
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public get layerList(): ICesiumImageryLayer[] {
+    return this.layers;
+  }
 }
 
 export default LayerManager;

package/src/lib/cesium-map/map.stories.tsx

@@ -121,6 +121,7 @@ LocalizedMap.argTypes = {
       MAP_SETTINGS_SCENE_MODE_TITLE: 'תצורה',
       MAP_SETTINGS_BASE_MAP_TITLE: 'מפות בסיס',
       MAP_SETTINGS_OK_BUTTON_TEXT: 'אישור',
+      ZOOM_LABEL: 'זום',
     },
     /* eslint-enable @typescript-eslint/naming-convention */
   },

package/src/lib/cesium-map/map.tsx

@@ -27,6 +27,7 @@ import { Box } from '../box';
 import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
+import { ZoomLevelTrackerTool } from './tools/zoom_level-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
 import { IMapLegend, MapLegendSidebar, MapLegendToggle } from './map-legend';
 import LayerManager, { LegendExtractor } from './layers-manager';
@@ -58,6 +59,7 @@ interface ICameraState {
 }
 export class CesiumViewer extends CesiumViewerCls {
   public layersManager?: LayerManager;
+  private useOptimizedTileRequests?: boolean;
 
   public constructor(
     container: string | Element,
@@ -65,6 +67,14 @@ export class CesiumViewer extends CesiumViewerCls {
   ) {
     super(container, options);
   }
+
+  public get shouldOptimizedTileRequests(): boolean {
+    return this.useOptimizedTileRequests ?? false;
+  }
+
+  public set shouldOptimizedTileRequests(useOptimizedTileRequests: boolean) {
+    this.useOptimizedTileRequests = useOptimizedTileRequests;
+  }
 }
 
 const mapContext = createContext<CesiumViewer | null>(null);
@@ -96,6 +106,7 @@ interface ILegends {
 
 export interface CesiumMapProps extends ViewerProps {
   showMousePosition?: boolean;
+  showZoomLevel?: boolean;
   showScale?: boolean;
   projection?: Proj;
   center?: [number, number];
@@ -103,6 +114,7 @@ export interface CesiumMapProps extends ViewerProps {
   locale?: { [key: string]: string };
   sceneModes?: CesiumSceneModeEnum[];
   baseMaps?: IBaseMaps;
+  useOptimizedTileRequests?: boolean;
   terrainProvider?: TerrainProvider;
   imageryContextMenu?: React.ReactElement<IContextMenuData>;
   imageryContextMenuSize?: {
@@ -128,6 +140,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   const [mapViewRef, setMapViewRef] = useState<CesiumViewer>();
   const [projection, setProjection] = useState<Proj>();
   const [showMousePosition, setShowMousePosition] = useState<boolean>();
+  const [showZoomLevel, setShowZoomLevel] = useState<boolean>();
   const [showScale, setShowScale] = useState<boolean>();
   const [locale, setLocale] = useState<{ [key: string]: string }>();
   const [cameraState, setCameraState] = useState<ICameraState | undefined>();
@@ -209,6 +222,9 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
 
   useEffect(() => {
     if (mapViewRef) {
+      mapViewRef.shouldOptimizedTileRequests =
+        props.useOptimizedTileRequests ?? false;
+
       mapViewRef.layersManager = new LayerManager(
         mapViewRef,
         props.legends?.mapLegendsExtractor,
@@ -219,8 +235,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         }
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapViewRef]);
 
+  useEffect(() => {
+    if (mapViewRef) {
+      mapViewRef.shouldOptimizedTileRequests =
+        props.useOptimizedTileRequests ?? false;
+    }
+  }, [props.useOptimizedTileRequests, mapViewRef]);
+
   useEffect(() => {
     setSceneModes(
       props.sceneModes ?? [
@@ -254,6 +278,10 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     setShowMousePosition(props.showMousePosition ?? true);
   }, [props.showMousePosition]);
 
+  useEffect(() => {
+    setShowZoomLevel(props.showZoomLevel ?? true);
+  }, [props.showZoomLevel]);
+
   useEffect(() => {
     setShowScale(props.showScale ?? true);
   }, [props.showScale]);
@@ -391,6 +419,11 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
             ) : (
               <></>
             )}
+            {showZoomLevel === true ? (
+              <ZoomLevelTrackerTool locale={locale} />
+            ) : (
+              <></>
+            )}
             {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
           </Box>
         </>,

package/src/lib/cesium-map/settings/settings.stories.tsx

@@ -171,7 +171,11 @@ export const MapWithSettings: Story = () => {
         center={center}
         zoom={14}
         imageryProvider={false}
-        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        sceneModes={[
+          CesiumSceneMode.SCENE3D,
+          CesiumSceneMode.SCENE2D,
+          CesiumSceneMode.COLUMBUS_VIEW,
+        ]}
         baseMaps={BASE_MAPS}
       >
         <CesiumXYZLayer options={optionsXYZSanDiego} />

package/src/lib/cesium-map/tools/coordinates-tracker.tool.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Cartesian3, Math as CesiumMath, WebMercatorProjection, ScreenSpaceEventType } from 'cesium';
+import {
+  Cartesian3,
+  Math as CesiumMath,
+  WebMercatorProjection,
+  ScreenSpaceEventType,
+} from 'cesium';
 import { CesiumViewer, useCesiumMap } from '../map';
 
 import './coordinates-tracker.tool.css';

package/src/lib/cesium-map/tools/scale-tracker.tool.tsx

@@ -160,7 +160,10 @@ export const ScaleTrackerTool: React.FC<RScaleTrackerToolProps> = (props) => {
 
     return (): void => {
       try {
-        mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+        if (get(mapViewer, '_cesiumWidget') != undefined) {
+          mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+        }
       } catch (e) {
         console.log('CESIUM camera "moveEnd" remove listener failed', e);
       }

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.css

@@ -0,0 +1,19 @@
+.zoomLevel {
+  z-index: 2000;
+  background-color: var(--mdc-theme-surface);
+  border-radius: 2px;
+  padding: 2px;
+  height: 24px;
+}
+
+.zoomLevelValue {
+  margin: 2px;
+  font-size: 14px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.zoomLevelLabel {
+  font-size: 8px;
+  line-height: 8px;
+}

package/src/lib/cesium-map/tools/zoom_level-tracker.tool.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+import { get } from 'lodash';
+import { PerspectiveOffCenterFrustum } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+
+import './zoom_level-tracker.tool.css';
+
+export interface RZoomLevelTrackerToolProps {
+  locale?: { [key: string]: string };
+}
+
+/* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment,  @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+const detectZoomLevel = (distance: number, viewer: CesiumViewer) => {
+  const MAX_ZOOM_LEVEL = 19;
+  const tileProvider = get(viewer.scene.globe, '_surface.tileProvider') as any;
+  const quadtree = tileProvider._quadtree;
+  const drawingBufferHeight = viewer.canvas.height;
+  const sseDenominator = get(viewer.camera.frustum, 'sseDenominator');
+
+  for (let level = 0; level <= MAX_ZOOM_LEVEL; level++) {
+    const maxGeometricError = tileProvider.getLevelMaximumGeometricError(level);
+    const error =
+      (maxGeometricError * drawingBufferHeight) / (distance * sseDenominator);
+    if (error < quadtree.maximumScreenSpaceError) {
+      return level;
+    }
+  }
+
+  return null;
+};
+
+const getZoomLevelHeights = (precision: number, viewer: CesiumViewer) => {
+  precision = precision || 10;
+
+  const result = [];
+  let step = 100000.0;
+  let currentZoomLevel = 0;
+  for (let height = 100000000.0; height > step; height = height - step) {
+    const level = detectZoomLevel(height, viewer);
+    if (level === null) {
+      break;
+    }
+
+    if (level !== currentZoomLevel) {
+      let minHeight = height;
+      let maxHeight = height + step;
+      while (maxHeight - minHeight > precision) {
+        height = minHeight + (maxHeight - minHeight) / 2;
+        if (detectZoomLevel(height, viewer) === level) {
+          minHeight = height;
+        } else {
+          maxHeight = height;
+        }
+      }
+
+      result.push({
+        level: level,
+        height: Math.round(height),
+      });
+
+      currentZoomLevel = level;
+
+      if (result.length >= 2) {
+        step = (result[result.length - 2].height - height) / 1000.0;
+      }
+    }
+  }
+
+  return result;
+};
+/* eslint-enable @typescript-eslint/no-magic-numbers */
+
+export const ZoomLevelTrackerTool: React.FC<RZoomLevelTrackerToolProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const zoomLevelHeights = getZoomLevelHeights(1, mapViewer);
+
+  useEffect(() => {
+    const calculateZoomLevel = () => {
+      const camera = mapViewer.camera;
+      const ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR = 0.5;
+      let cameraHeight = 0;
+
+      switch (mapViewer.scene.mode) {
+        case CesiumSceneMode.SCENE3D:
+          cameraHeight = mapViewer.scene.mapProjection.ellipsoid.cartesianToCartographic(
+            camera.positionWC
+          ).height;
+          break;
+        case CesiumSceneMode.SCENE2D:
+          cameraHeight =
+            ((camera.frustum as PerspectiveOffCenterFrustum).right -
+              (camera.frustum as PerspectiveOffCenterFrustum).left) *
+            ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR;
+          break;
+        case CesiumSceneMode.COLUMBUS_VIEW:
+          cameraHeight = camera.position.z;
+          break;
+        default:
+          cameraHeight = 0;
+          break;
+      }
+
+      const closestZoom = zoomLevelHeights.reduce((a, b) => {
+        return Math.abs(b.height - cameraHeight) <
+          Math.abs(a.height - cameraHeight)
+          ? b
+          : a;
+      });
+
+      setZoomLevel(closestZoom.level);
+    };
+
+    mapViewer.camera.moveEnd.addEventListener(calculateZoomLevel);
+
+    return (): void => {
+      try {
+        /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+        if (get(mapViewer, '_cesiumWidget') != undefined) {
+          mapViewer.camera.moveEnd.removeEventListener(calculateZoomLevel);
+        }
+      } catch (e) {
+        console.log(
+          'CESIUM camera "moveEnd"(from zoom tracker) remove listener failed',
+          e
+        );
+      }
+    };
+  }, [mapViewer]);
+
+  return (
+    <div className="zoomLevel">
+      <div className="zoomLevelValue">{zoomLevel}</div>
+      <div className="zoomLevelLabel">
+        {get(props.locale, 'ZOOM_LABEL') ?? 'zoom'}
+      </div>
+    </div>
+  );
+};