Merge branch 'main' into chore/server-e2e-test-refactoring

web/src/beta/features/PluginPlayground/Plugins/presets/index.ts

@@ -12,6 +12,8 @@ import { addOsm3dTiles } from "./layers/add-OSM-3DTiles";
 import { addGooglePhotorealistic3dTiles } from "./layers/add-google-photorealistic-3d-tiles";
 import { addWms } from "./layers/add-wms";
 import { hideFlyToDeleteLayer } from "./layers/hideFlyToDeleteLayer";
+import { featureStyle3dTiles } from "./manageLayerStyle/featureStyle3dTiles";
+import { featureStyle3dModel } from "./manageLayerStyle/featureStyle3dmodel";
 import { showFeaturesInfo } from "./layers/showSelectedFeaturesInformation";
 import { header } from "./ui/header";
 import { responsivePanel } from "./ui/responsivePanel";
@@ -65,7 +67,7 @@ export const presetPlugins: PresetPlugins = [
   {
     id: "layerStyles",
     title: "Manage Layer Style",
-    plugins: []
+    plugins: [featureStyle3dTiles, featureStyle3dModel]
   },
 
   {

web/src/beta/features/PluginPlayground/Plugins/presets/manageLayerStyle/featureStyle3dTiles.ts

@@ -0,0 +1,96 @@
+import { FileType, PluginType } from "../../constants";
+
+const yamlFile: FileType = {
+  id: "feature-style-3d-tiles-reearth-yml",
+  title: "reearth.yml",
+  sourceCode: `id: feature-style-3d-tiles-plugin
+name: Feature Style 3D Tiles
+version: 1.0.0
+extensions:
+  - id: feature-style-3d-tiles
+    type: widget
+    name: Feature Style 3D Tiles
+    description: Feature Style 3D Tiles
+  `,
+  disableEdit: true,
+  disableDelete: true
+};
+
+const widgetFile: FileType = {
+  id: "feature-style-3d-tiles",
+  title: "feature-style-3d-tiles.js",
+  sourceCode: `// This example shows how to style 3D Tiles //
+
+// Define a 3D Tiles layer
+const sample3dTiles01 = {
+  type: "simple", // Required
+  data: {
+    type: "3dtiles", // Data type: 3dtiles
+    url: "https://assets.cms.plateau.reearth.io/assets/4a/c9fb39-9c97-4da6-af8f-e08751a2f269/14100_yokohama-shi_city_2023_citygml_1_op_bldg_3dtiles_14103_nishi-ku_lod2_no_texture/tileset.json", // URL of the 3D Tiles
+  },
+  "3dtiles": {
+    // Styling settings for the 3D Tiles
+    show: true, // Show or hide the tiles
+    color: "#FFFAFA", // Set the color of the 3D Tiles
+    pbr: false, // Enable or disable Physically Based Rendering
+    selectedFeatureColor: "red", // Change the color of selected features
+    shadows: "enabled", // Shadow options: "disabled" | "enabled" | "cast_only" | "receive_only"
+  },
+};
+
+const sample3dTiles02 = {
+  type: "simple",
+  data: {
+    type: "3dtiles",
+    url: "https://assets.cms.plateau.reearth.io/assets/13/c43a77-9e37-4b30-b60d-ea832a5ed8a5/14100_yokohama-shi_city_2023_citygml_1_op_bldg_3dtiles_14104_naka-ku_lod2_no_texture/tileset.json",
+  },
+  "3dtiles": {
+    selectedFeatureColor: "red",
+    showWireframe: true, // Display the 3D Tiles in wireframe mode
+  },
+};
+
+// Add the 3D Tiles layers to Re:Earth
+reearth.layers.add(sample3dTiles01);
+reearth.layers.add(sample3dTiles02);
+
+reearth.viewer.overrideProperty({
+  // Enable Cesium World Terrain
+  terrain: {
+    enabled: true,
+  },
+  // Enable the function for buildings not to lift off the ground
+  globe:{
+    depthTestAgainstTerrain:true,
+  },
+  // Enable shadows
+  scene: {
+    shadow: {
+      enabled: true,
+    },
+  },
+});
+
+// Move the camera to the specified position
+reearth.camera.flyTo(
+  {
+    // Define the camera target position
+    heading: 0.06045621086315478,
+    height: 357.3669137797168,
+    lat: 35.44594796504924,
+    lng: 139.63230661883225,
+    pitch: -0.38534510496423335,
+    roll: 6.283177746194314,
+  },
+  {
+    // Define the duration of the camera movement (in seconds)
+    duration: 2.0,
+  }
+);`
+};
+
+export const featureStyle3dTiles: PluginType = {
+  id: "feature-style-3d-tiles",
+  title: "Feature Style 3D Tiles",
+  files: [widgetFile, yamlFile]
+};

web/src/beta/features/PluginPlayground/Plugins/presets/manageLayerStyle/featureStyle3dmodel.ts

@@ -0,0 +1,128 @@
+import { FileType, PluginType } from "../../constants";
+
+const yamlFile: FileType = {
+  id: "feature-style-3d-model-reearth-yml",
+  title: "reearth.yml",
+  sourceCode: `id: feature-style-3d-model-plugin
+name: Feature Style 3D Model
+version: 1.0.0
+extensions:
+  - id: feature-style-3d-model
+    type: widget
+    name: Feature Style 3D Model
+    description: Feature Style 3D Model
+  `,
+  disableEdit: true,
+  disableDelete: true
+};
+
+const widgetFile: FileType = {
+  id: "feature-style-3d-model",
+  title: "feature-style-3d-model.js",
+  sourceCode: `// This example shows how to style 3D model（gltf) //
+
+// Define 3D model data
+const model3D01 = {
+  type: "simple",
+  data: {
+    type: "geojson",
+    value: {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [-85.38657958835984, 33.696966258616634],
+      },
+    },
+  },
+  model: {
+    show: true,
+    url: "https://reearth.github.io/visualizer-plugin-sample-data/public/gltf/animatedFox.gltf",
+    heightReference: "clamp",
+    minimumPixelSize: 100, // Sets the minimum visible size of the model
+    maximumPixelSize: 1000, // Sets the maximum visible size of the model
+    animation: true, // Enables animation of the 3D model if timeline is played
+    shadows: "enabled", // There are four options: "disabled", "enabled", "cast_only", "receive_only"
+    color: "#fffafa", // Defines a color for the model
+  },
+};
+
+const model3D02 = {
+  type: "simple",
+  data: {
+    type: "geojson",
+    value: {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [-85.38657958835984, 33.696266258616634],
+      },
+    },
+  },
+  model: {
+    show: true, // Determines whether the 3D model is visible (default: true)
+    url: "https://reearth.github.io/visualizer-plugin-sample-data/public/gltf/animatedFox.gltf",
+    heightReference: "clamp", // Options: "none" | "clamp" | "relative"
+    // scale: 10000, // Sets a fixed size. Zooming doesn't affect the model's size if used.
+    minimumPixelSize: 100, // Sets the minimum visible size of the model
+    maximumPixelSize: 1000, // Sets the maximum visible size of the model
+    shadows: "enabled", // There are four options: "disabled", "enabled", "cast_only", "receive_only"
+    pbr: false, // Enables or disables Physically Based Rendering
+  },
+};
+
+// Add 3D models to the layer
+reearth.layers.add(model3D01);
+reearth.layers.add(model3D02);
+
+// In this example, the time width is set to set the time for the shadow to appear
+// Set the time range on the timeline
+reearth.timeline.setTime({
+  // Start time
+  start: new Date("2023-12-01T09:00:00-06:00"),
+  // End time
+  stop: new Date("2023-12-01T15:00:00-06:00"),
+  // Time to be set as the current timeline position
+  current: new Date("2023-12-01T10:00:00-06:00"),
+});
+
+// To animate the 3D model, you need to play the timeline
+reearth.timeline.play();
+
+// Set the playback speed of the timeline (1 = normal speed)
+reearth.timeline.setSpeed(1);
+
+// Enable shadow settings in the Re:Earth viewer
+reearth.viewer.overrideProperty({
+  scene: {
+    shadow: {
+      enabled: true,
+    },
+  },
+});
+
+// Move the camera to a specified position
+reearth.camera.flyTo(
+  {
+    // Defines the target camera position
+    heading: 5.358457498291187,
+    height: 274.0013699012735,
+    lat: 33.69505063085045,
+    lng: -85.38408270921741,
+    pitch: -0.7236883292676297,
+    roll: 0.00000479625186056154,
+  },
+  {
+    // Duration of the camera movement in seconds
+    duration: 2.0,
+  }
+);
+
+// 3D Model Data: @AsoboStudio and @scurest (Licensed under CC BY 4.0)
+`
+};
+
+export const featureStyle3dModel: PluginType = {
+  id: "feature-style-3d-model",
+  title: "Feature style 3D Model",
+  files: [widgetFile, yamlFile]
+};