examples/widget_legonizer.html

<!DOCTYPE html>
<html>
  <head>
    <title>Legonizer example</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/examples.css" />
    <link rel="stylesheet" href="./assets/css/loading_screen.css" />
    <link rel="stylesheet" href="./assets/css/widget_legonizer.css" />
    <link rel="stylesheet" href="./assets/css/widget_layer_choice.css" />
  </head>
  <body>
    <script src="../dist/RUN_MODE/bundle.js"></script>
    <script src="./assets/js/loadingScreen.js"></script>

    <script type="text/javascript">
      const udviz = window.udviz;

      udviz
        .loadMultipleJSON([
          './assets/config/crs.json',
          './assets/config/extents.json',
          './assets/config/layer/3DTiles_Lyon.json',
          './assets/config/layer/base_maps.json',
          './assets/config/layer/elevation.json',
        ])
        .then((configs) => {
          // http://proj4js.org/
          // define a projection as a string and reference it that way
          // the definition of the projection should be in config TODO_ISSUE
          udviz.proj4.default.defs(
            configs['crs'][0].name,
            configs['crs'][0].transform
          );
          configs['3DTiles_legonizer'] = configs['3DTiles_Lyon'];

          const extent = new udviz.itowns.Extent(
            configs['extents'][0].name,
            parseInt(configs['extents'][0].west),
            parseInt(configs['extents'][0].east),
            parseInt(configs['extents'][0].south),
            parseInt(configs['extents'][0].north)
          );

          // create a itowns planar view
          const viewDomElement = document.createElement('div');
          viewDomElement.classList.add('full_screen');
          document.body.appendChild(viewDomElement);
          const view = new udviz.itowns.PlanarView(viewDomElement, extent);

          loadingScreen(view, ['UD-VIZ', 'UDVIZ_VERSION']);

          // init scene 3D
          udviz.initScene(
            view.camera.camera3D,
            view.mainLoop.gfxEngine.renderer,
            view.scene
          );

          // /// ADD LAYERS
          configs['3DTiles_legonizer'].forEach((layerConfig) => {
            udviz.itowns.View.prototype.addLayer.call(
              view,
              new udviz.itowns.C3DTilesLayer(
                layerConfig['id'],
                {
                  name: layerConfig['id'],
                  source: new udviz.itowns.C3DTilesSource({
                    url: layerConfig['url'],
                  }),
                },
                view
              )
            );
          });

          configs['base_maps'].forEach((baseMapConfig) => {
            view.addLayer(
              new udviz.itowns.ColorLayer(baseMapConfig['name'], {
                updateStrategy: {
                  type: udviz.itowns.STRATEGY_DICHOTOMY,
                  options: {},
                },
                source: new udviz.itowns.WMSSource({
                  extent: extent,
                  name: baseMapConfig.source['name'],
                  url: baseMapConfig.source['url'],
                  version: baseMapConfig.source['version'],
                  crs: extent.crs,
                  format: baseMapConfig.source['format'],
                }),
                transparent: true,
              })
            );
          });

          const isTextureFormat =
            configs['elevation']['format'] == 'image/jpeg' ||
            configs['elevation']['format'] == 'image/png';
          view.addLayer(
            new udviz.itowns.ElevationLayer(
              configs['elevation']['layer_name'],
              {
                useColorTextureElevation: isTextureFormat,
                colorTextureElevationMinZ: isTextureFormat
                  ? configs['elevation']['colorTextureElevationMinZ']
                  : null,
                colorTextureElevationMaxZ: isTextureFormat
                  ? configs['elevation']['colorTextureElevationMaxZ']
                  : null,
                source: new udviz.itowns.WMSSource({
                  extent: extent,
                  url: configs['elevation']['url'],
                  name: configs['elevation']['name'],
                  crs: extent.crs,
                  heightMapWidth: 256,
                  format: configs['elevation']['format'],
                }),
              }
            )
          );

          // UI DOM ELEMENT
          const uiDomElement = document.createElement('div');
          uiDomElement.classList.add('full_screen');
          document.body.appendChild(uiDomElement);

          // //// LEGONIZER MODULE

          const domMockUpVisualizer = document.createElement('div');
          domMockUpVisualizer.id = 'widget_legonizer_lego_visualizer';
          domMockUpVisualizer.title = 'double click to zoom';
          let zoom = false;
          domMockUpVisualizer.addEventListener('dblclick', () => {
            if (!domMockUpVisualizer.querySelector('canvas')) return;
            zoom = !zoom;
            if (zoom) {
              domMockUpVisualizer.title = 'double click to unzoom';
              domMockUpVisualizer.classList.add('modal');
            } else {
              domMockUpVisualizer.title = 'double click to zoom';
              domMockUpVisualizer.classList.remove('modal');
            }
          });

          const legonizer = new udviz.widgetLegonizer.Legonizer(view, {
            parentDomElement: uiDomElement,
            domMockUpVisualizer: domMockUpVisualizer,
          });

          legonizer.domElement.id = 'widget_legonizer';
          uiDomElement.appendChild(legonizer.domElement);
        });
    </script>
    SCRIPT_TAG_RELOAD
  </body>
</html>