@map-colonies/react-components 3.13.1 → 3.14.0

package/src/lib/cesium-map/layers/optimized-tile-requests.stories.tsx

@@ -0,0 +1,279 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import bbox from '@turf/bbox';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Rectangle } from 'cesium';
+import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { IBaseMaps } from '../settings/settings';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Map Optimizations',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    useOptimizedTileRequests: true,
+  },
+  argTypes: {
+    useOptimizedTileRequests: {
+      description:
+        'Should the viewer determine layer relevancy based on its visibility and presence in scene. (Improves bandwidth usage and overall performance)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+      control: 'boolean',
+    },
+  },
+} as Meta;
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '3rd',
+      title: '3rd Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/d8b97d3e38a0d43e5a06dea9aae17a3e.png',
+      baseRasteLayers: [
+        {
+          id: 'Opaque Base world wide layer',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url:
+              'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38',
+            layers: '',
+            credit: 'thunderforest',
+          },
+        },
+        {
+          id: 'Transparent Base Roads world wide layer ',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 1,
+          options: {
+            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
+            layers: '',
+            credit: 'openstreetmap',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const mapDivStyle = {
+  height: '100%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const mapViewProps: CesiumMapProps = {
+  center: [-117.30644008676421, 33.117098433617564],
+  zoom: 14,
+  imageryProvider: false,
+  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
+  baseMaps: BASE_MAPS as IBaseMaps,
+};
+
+interface OptimizedTileRequestingMapStoryProps {
+  useOptimizedTileRequests: boolean;
+}
+
+interface LayerRelevancy {
+  layerId?: string;
+  isRelevant?: boolean;
+}
+
+const RelevancyPresentor: React.FC<OptimizedTileRequestingMapStoryProps> = ({
+  useOptimizedTileRequests,
+}) => {
+  const viewer = useCesiumMap();
+  const [layersRelevancy, setLayersRelevancy] = useState<LayerRelevancy[]>([]);
+
+  const updateLayerRelevancy = (): void => {
+    if (viewer.layersManager?.layerList) {
+      setLayersRelevancy(
+        viewer.layersManager?.layerList
+          .filter(
+            (layer): boolean => layer.meta?.id !== 'TRANSPARENT_BASE_LAYER'
+          )
+          .map(
+            (layer): LayerRelevancy => ({
+              layerId: layer.meta?.id as string | undefined,
+              isRelevant: layer.meta?.relevantToExtent as boolean,
+            })
+          )
+      );
+    }
+  };
+
+  useEffect(() => {
+    const removeTileLoad = viewer.scene.globe.tileLoadProgressEvent.addEventListener(
+      (tilesLoadingCount) => {
+        if (tilesLoadingCount === 0) {
+          updateLayerRelevancy();
+          removeTileLoad();
+        }
+      }
+    );
+
+    const removeMoveEnd = viewer.camera.moveEnd.addEventListener(() => {
+      updateLayerRelevancy();
+    });
+
+    return (): void => {
+      removeMoveEnd();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          zIndex: 999,
+          background: 'white',
+          padding: '20px',
+          fontFamily: 'Helvetica',
+          minWidth: '200px',
+          minHeight: '200px',
+        }}
+      >
+        <h3>
+          {`Optimized Tile Requesting: ${
+            useOptimizedTileRequests ? 'enabled' : 'disabled'
+          }`}
+        </h3>
+        {layersRelevancy.map((layer) => {
+          return (
+            <div>
+              <p>Layer Id: {layer.layerId}</p>
+              <p>Requesting tiles: {layer.isRelevant?.toString()}</p>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const LayersContainer: React.FC = () => {
+  const [layer, setLayer] = useState<ReactNode>(null);
+  const btnStyle = {
+    position: 'absolute',
+    top: 50,
+    left: '50%',
+    zIndex: 1000,
+    transform: 'translate(0, -50%)',
+  } as React.CSSProperties;
+
+  const optionsXYZTransparency = {
+    url:
+      'https://tiles.openaerialmap.org/5d73614588556200055f10d6/0/5d73614588556200055f10d7/{z}/{x}/{y}',
+    footprint: {
+      coordinates: [
+        [
+          [-117.30976118375267, 33.116454006568205],
+          [-117.30976118375267, 33.11330462707964],
+          [-117.30513526140776, 33.11330462707964],
+          [-117.30513526140776, 33.116454006568205],
+          [-117.30976118375267, 33.116454006568205],
+        ],
+      ],
+      type: 'Polygon',
+    },
+  };
+
+  const optionsXYZOpaque = {
+    url: 'http://stamen-tiles-b.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',
+    footprint: {
+      coordinates: [
+        [
+          [-117.31921599064628, 33.1210849388296],
+          [-117.31921599064628, 33.1094152732627],
+          [-117.29986251692546, 33.1094152732627],
+          [-117.29986251692546, 33.1210849388296],
+          [-117.31921599064628, 33.1210849388296],
+        ],
+      ],
+      type: 'Polygon',
+    },
+  };
+
+  return (
+    <>
+      <div
+        className="buttonsContainer"
+        style={{ display: 'flex', gap: '10px', ...btnStyle }}
+      >
+        <button
+          onClick={(): void =>
+            setLayer(
+              <CesiumXYZLayer
+                key="Transparent"
+                meta={{
+                  id: 'Transparent Layer',
+                  options: { ...optionsXYZTransparency },
+                }}
+                rectangle={Rectangle.fromDegrees(
+                  ...bbox(optionsXYZTransparency.footprint)
+                )}
+                options={optionsXYZTransparency}
+              />
+            )
+          }
+        >
+          Layer With Transparency
+        </button>
+
+        <button
+          onClick={(): void =>
+            setLayer(
+              <CesiumXYZLayer
+                key="Opaque"
+                meta={{ id: 'Opaque Layer', options: { ...optionsXYZOpaque } }}
+                rectangle={Rectangle.fromDegrees(
+                  ...bbox(optionsXYZOpaque.footprint)
+                )}
+                options={optionsXYZOpaque}
+              />
+            )
+          }
+        >
+          Opaque layer
+        </button>
+      </div>
+      {layer}
+    </>
+  );
+};
+
+export const OptimizedTileRequestingMap: Story<OptimizedTileRequestingMapStoryProps> = (
+  args
+) => {
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        {...mapViewProps}
+        useOptimizedTileRequests={args.useOptimizedTileRequests}
+        key={args.useOptimizedTileRequests ? 'OPTIMIZED_MAP' : 'REGULAR_MAP'}
+      >
+        <LayersContainer />
+        <RelevancyPresentor
+          useOptimizedTileRequests={args.useOptimizedTileRequests}
+        />
+      </CesiumMap>
+    </div>
+  );
+};
+
+OptimizedTileRequestingMap.storyName = 'Optimized Tile Requesting';

package/src/lib/cesium-map/layers/wms.layer.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
 import { WebMapServiceImageryProvider } from 'cesium';
+import { CustomWebMapServiceImageryProvider } from '../helpers/customImageryProviders';
+import { useCesiumMap } from '../map';
+import { ICesiumImageryLayer } from '../layers-manager';
 import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
 
 export interface RCesiumWMSLayerOptions
@@ -13,10 +16,13 @@ export interface RCesiumWMSLayerProps
 
 export const CesiumWMSLayer: React.FC<RCesiumWMSLayerProps> = (props) => {
   const { options, ...restProps } = props;
+  const mapViewer = useCesiumMap();
+
+  const providerInstance = mapViewer.shouldOptimizedTileRequests
+    ? new CustomWebMapServiceImageryProvider(options, mapViewer)
+    : new WebMapServiceImageryProvider(options);
+
   return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new WebMapServiceImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };

package/src/lib/cesium-map/layers/wmts.layer.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { WebMapTileServiceImageryProvider } from 'cesium';
+import { CustomWebMapTileServiceImageryProvider } from '../helpers/customImageryProviders';
+import { useCesiumMap } from '../map';
 import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
 
 export interface RCesiumWMTSLayerOptions
@@ -13,10 +15,13 @@ export interface RCesiumWMTSLayerProps
 
 export const CesiumWMTSLayer: React.FC<RCesiumWMTSLayerProps> = (props) => {
   const { options, ...restProps } = props;
+  const mapViewer = useCesiumMap();
+
+  const providerInstance = mapViewer.shouldOptimizedTileRequests
+    ? new CustomWebMapTileServiceImageryProvider(options, mapViewer)
+    : new WebMapTileServiceImageryProvider(options);
+
   return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new WebMapTileServiceImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };

package/src/lib/cesium-map/layers/xyz.layer.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { UrlTemplateImageryProvider } from 'cesium';
+import { CustomUrlTemplateImageryProvider } from '../helpers/customImageryProviders';
+import { useCesiumMap } from '../map';
 import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
 
 export interface RCesiumXYZLayerOptions
@@ -13,10 +15,13 @@ export interface RCesiumXYZLayerProps
 
 export const CesiumXYZLayer: React.FC<RCesiumXYZLayerProps> = (props) => {
   const { options, ...restProps } = props;
+  const mapViewer = useCesiumMap();
+
+  const providerInstance = mapViewer.shouldOptimizedTileRequests
+    ? new CustomUrlTemplateImageryProvider(options, mapViewer)
+    : new UrlTemplateImageryProvider(options);
+
   return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new UrlTemplateImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };

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;