Cesium2d viewer

CHANGES.md

@@ -2,6 +2,8 @@
 
 #### next release (8.7.9)
 
+- Allow to use Cesium in `SCENE2D` mode (and WebMercator projection) as map viewer.
+- Add a new configuration parameter `mapViewers` to specify which map viewers to show in `SettingPanel`.
 - [The next improvement]
 
 #### 8.7.8 - 2024-11-01

lib/Models/Cesium.ts

@@ -90,8 +90,11 @@ import TerriaFeature from "./Feature/Feature";
 import GlobeOrMap from "./GlobeOrMap";
 import Terria from "./Terria";
 import UserDrawing from "./UserDrawing";
-import { setViewerMode } from "./ViewerMode";
+import ViewerMode, { setViewerMode } from "./ViewerMode";
 import ScreenSpaceEventHandler from "terriajs-cesium/Source/Core/ScreenSpaceEventHandler";
+import SceneMode from "terriajs-cesium/Source/Scene/SceneMode";
+import GeographicProjection from "terriajs-cesium/Source/Core/GeographicProjection";
+import WebMercatorProjection from "terriajs-cesium/Source/Core/WebMercatorProjection";
 import I3SDataProvider from "terriajs-cesium/Source/Scene/I3SDataProvider";
 
 //import Cesium3DTilesInspector from "terriajs-cesium/Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector";
@@ -190,7 +193,15 @@ export default class Cesium extends GlobeOrMap {
         SingleTileImageryProvider.fromUrl(img),
         {}
       ),
-      scene3DOnly: true,
+      scene3DOnly: false,
+      sceneMode:
+        terriaViewer.viewerMode && terriaViewer.viewerMode === ViewerMode.Cesium
+          ? SceneMode.SCENE3D
+          : SceneMode.SCENE2D,
+      mapProjection:
+        terriaViewer.viewerMode && terriaViewer.viewerMode === ViewerMode.Cesium
+          ? new GeographicProjection()
+          : new WebMercatorProjection(),
       shadows: true,
       useBrowserRecommendedResolution: !this.terria.useNativeResolution
     };
@@ -867,6 +878,12 @@ export default class Cesium extends GlobeOrMap {
           duration: flightDurationSeconds,
           destination: finalDestination
         });
+      } else if (defined(target.rectangle)) {
+        // target has a rectangle
+        return flyToPromise(camera, {
+          duration: flightDurationSeconds,
+          destination: target.rectangle
+        });
       } else if (defined(target.entities)) {
         // target is some DataSource
         return waitForDataSourceToLoad(target).then(() => {
@@ -922,12 +939,6 @@ export default class Cesium extends GlobeOrMap {
         } else {
           return Promise.resolve();
         }
-      } else if (defined(target.rectangle)) {
-        // target has a rectangle
-        return flyToPromise(camera, {
-          duration: flightDurationSeconds,
-          destination: target.rectangle
-        });
       } else if (
         defined(target.imageryProvider) &&
         defined(target.imageryProvider.rectangle)
@@ -1009,6 +1020,13 @@ export default class Cesium extends GlobeOrMap {
     const scene = this.scene;
     const camera = scene.camera;
 
+    if (scene.mode === SceneMode.SCENE2D) {
+      const rect = camera.computeViewRectangle();
+      if (rect) {
+        return new CameraView(rect);
+      }
+    }
+
     const width = scene.canvas.clientWidth;
     const height = scene.canvas.clientHeight;
 

lib/Models/Terria.ts

@@ -373,6 +373,11 @@ export interface ConfigParameters {
    */
   searchBarConfig?: ModelPropertiesFromTraits<SearchBarTraits>;
   searchProviders: ModelPropertiesFromTraits<SearchProviderTraits>[];
+
+  /**
+   * List of the enabled MapViewers: 3d, 3dsmooth, 2d, cesium2d
+   */
+  mapViewers: string[];
 }
 
 interface StartOptions {
@@ -595,7 +600,8 @@ export default class Terria {
     aboutButtonHrefUrl: "about.html",
     plugins: undefined,
     searchBarConfig: undefined,
-    searchProviders: []
+    searchProviders: [],
+    mapViewers: ["3d", "3dsmooth", "2d"]
   };
 
   @observable

lib/Models/ViewerMode.ts

@@ -3,6 +3,7 @@ import TerriaViewer from "../ViewModels/TerriaViewer";
 
 enum ViewerMode {
   Cesium = "cesium",
+  Cesium2D = "cesium2d",
   Leaflet = "leaflet"
 }
 
@@ -24,6 +25,12 @@ export const MapViewers = Object.seal({
     terrain: false,
     label: "settingPanel.viewerModeLabels.Leaflet",
     available: true
+  },
+  cesium2d: {
+    viewerMode: ViewerMode.Cesium2D,
+    terrain: false,
+    label: "settingPanel.viewerModeLabels.Leaflet",
+    available: true
   }
 });
 
@@ -38,6 +45,9 @@ export function setViewerMode(
     if (viewerMode === "3d" || viewerMode === "3dsmooth") {
       viewer.viewerMode = ViewerMode.Cesium;
       viewer.viewerOptions.useTerrain = viewerMode === "3d";
+    } else if (viewerMode === "cesium2d") {
+      viewer.viewerMode = ViewerMode.Cesium2D;
+      viewer.viewerOptions.useTerrain = false;
     } else if (viewerMode === "2d") {
       viewer.viewerMode = ViewerMode.Leaflet;
     } else {

lib/ReactViews/Map/Panels/SettingPanel.tsx

@@ -53,6 +53,10 @@ class SettingPanel extends React.Component<PropTypes> {
   constructor(props: PropTypes) {
     super(props);
     makeObservable(this);
+
+    Object.entries(MapViewers).forEach(([key, elem]) => {
+      elem.available = props.terria.configParameters.mapViewers.includes(key);
+    });
   }
 
   @observable _hoverBaseMap = null;
@@ -168,7 +172,9 @@ class SettingPanel extends React.Component<PropTypes> {
       2: t("settingPanel.qualityLabels.lowerPerformance")
     };
     const currentViewer =
-      this.props.terria.mainViewer.viewerMode === ViewerMode.Cesium
+      this.props.terria.mainViewer.viewerMode === ViewerMode.Cesium2D
+        ? ViewerMode.Cesium2D
+        : this.props.terria.mainViewer.viewerMode === ViewerMode.Cesium
         ? this.props.terria.mainViewer.viewerOptions.useTerrain
           ? "3d"
           : "3dsmooth"
@@ -247,15 +253,17 @@ class SettingPanel extends React.Component<PropTypes> {
             <Text as="label">{t("settingPanel.mapView")}</Text>
           </Box>
           <FlexGrid gap={1} elementsNo={3}>
-            {Object.entries(MapViewers).map(([key, viewerMode]) => (
-              <SettingsButton
-                key={key}
-                isActive={key === currentViewer}
-                onClick={(event: any) => this.selectViewer(key as any, event)}
-              >
-                <Text mini>{t(viewerMode.label)}</Text>
-              </SettingsButton>
-            ))}
+            {Object.entries(MapViewers)
+              .filter(([_, viewerMode]) => viewerMode.available)
+              .map(([key, viewerMode]) => (
+                <SettingsButton
+                  key={key}
+                  isActive={key === currentViewer}
+                  onClick={(event: any) => this.selectViewer(key as any, event)}
+                >
+                  <Text mini>{t(viewerMode.label)}</Text>
+                </SettingsButton>
+              ))}
           </FlexGrid>
           {!!supportsSide && (
             <>

lib/ViewModels/TerriaViewer.ts

@@ -36,6 +36,12 @@ const cesiumFromPromise = computed(
   { keepAlive: true }
 );
 
+const cesium2dFromPromise = computed(
+  () =>
+    fromPromise(import("../Models/Cesium").then((Cesium) => Cesium.default)),
+  { keepAlive: true }
+);
+
 // Viewer options. Designed to be easily serialisable
 interface ViewerOptions {
   useTerrain: boolean;
@@ -173,6 +179,8 @@ export default class TerriaViewer {
       viewerFromPromise = leafletFromPromise.get();
     } else if (this.attached && this.viewerMode === ViewerMode.Cesium) {
       viewerFromPromise = cesiumFromPromise.get();
+    } else if (this.attached && this.viewerMode === ViewerMode.Cesium2D) {
+      viewerFromPromise = cesium2dFromPromise.get();
     }
     return viewerFromPromise;
   }