romainkrchf

November 24, 2021

Hello,

Do you have any luck with this topic?
We are also trying to upload an html file that would just be open as as new page but it doesn't seem to work.

I created a page and inserted the code in a Code Block but I have the constraint of the website design (header, spacing, and the full screen button does not work properly): https://www.uzufly.com/demo

Find below the HTML code within the *.html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.86/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.86/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>

  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NTg3YzE5YS00ZDkxLTQzNzUtYTM1ZC0wOWQ1YmEyZTdmM2QiLCJpZCI6NDMyMzMsImlhdCI6MTYxMjM0MDk5MX0.i9LhK5vkwyysMYU36KBJ0EzO75FqfyDL4gkn_e4RrD8';    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.

    // Add Cesium OSM Buildings, a global 3D buildings layer.
    // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());

    var rectangle = Cesium.Rectangle.fromDegrees(
      5.013926957923385,
      45.35600133779394,
      11.477436312994008,
      48.27502358353741
    );

    var imageryProvider = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.swissimage-product/default/current/4326/{z}/{x}/{y}.jpeg",
      minimumLevel: 8,
      maximumLevel: 17,
      tilingScheme: new Cesium.GeographicTilingScheme({
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      }),
      rectangle: rectangle
    });

    //imageryProvider.defaultBrightness = 1.5;

    var viewer = new Cesium.Viewer('cesiumContainer', {
      timeline:false,
      geocoder:false,
      animation:false,
      vrButton:true,
      sceneModePicker:false,
      infoBox:true,
      scene3DOnly:true,
      baseLayerPicker: false,

      terrainProvider: new Cesium.CesiumTerrainProvider({
            url:
              "https://terrain100.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d"
          }),
      imageryProvider
    });


    const tilesets = {
      tileset_LeMont_est: new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(670321),
        maximumScreenSpaceError : 1
      }),
      tileset_LeMont_ouest: new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(670323),
        maximumScreenSpaceError : 1
      }),
    }

    // Override behavior of home button
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
      // Fly to tileset
      viewer.flyTo(tileset);

      // Tell the home button not to do anything
      commandInfo.cancel = true;
    });

    // Add tileset to viewer and set initial camera position
    viewer.scene.primitives.add(tilesets.tileset_LeMont_est);
    viewer.scene.primitives.add(tilesets.tileset_LeMont_ouest);

    function offSettileset(tileset) {
        // Set the camera to view the newly added tileset
        var heightOffset = -50;
        var boundingSphere = tileset.boundingSphere;
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    }

    function zoomToTileSet(tileset) {
        viewer.zoomTo(tilesets[tileset]);
    }

    tilesets.tileset_LeMont_est.readyPromise.then((tileset) => {
        offSettileset(tileset);

        viewer.zoomTo(tileset);
    });

    tilesets.tileset_LeMont_ouest.readyPromise.then((tileset) => {
        offSettileset(tileset);
    });

    var measureWidget = new Cesium.Measure({
     container : 'measureContainer',
     scene : scene,
     units : new Cesium.MeasureUnits({
         distanceUnits : Cesium.DistanceUnits.METERS,
         areaUnits : Cesium.AreaUnits.SQUARE_METERS,
         volumeUnits : Cesium.VolumeUnits.CUBIC_FEET,
         angleUnits : Cesium.AngleUnits.DEGREES,
         slopeUnits : Cesium.AngleUnits.GRADE
     })
});


  </script>
</body>
</html>

romainkrchf

Posts

Joined

Last visited

Content Type

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by romainkrchf

How to treat HTML file as web page?

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources