constructor()

in viewer/src/ui/OpensfmViewer.js [27:151]


  constructor(options) {
    super();

    this._params = options.params;
    this._provider = options.provider;

    const document = window.document;
    const container = document.createElement('div');
    container.classList.add('opensfm-viewer');
    options.container.appendChild(container);

    const cvm = CameraVisualizationMode.Homogeneous;
    const opm = OriginalPositionMode.Hidden;
    const spatialConfiguration = {
      cameraSize: 0.5,
      cameraVisualizationMode: cvm,
      cellGridDepth: 3,
      cellsVisible: false,
      originalPositionMode: opm,
      pointSize: 0.2,
      pointsVisible: true,
    };

    const mapOptions = {
      basemapVisible: false,
      tileServerUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      basemapOpacity: 1.0,
      basemapAltitude: -1.0,
      basemapTileCount: 121,
      basemapZoomLevel: 19,
    };

    const cameraControlMode = CameraControlMode.ORBIT;
    const imagesVisible = false;
    const viewer = new Viewer({
      cameraControls: convertCameraControlMode(cameraControlMode),
      combinedPanning: false,
      component: {
        cover: false,
        direction: false,
        image: imagesVisible,
        sequence: false,
        spatial: spatialConfiguration,
        zoom: false,
      },
      container,
      dataProvider: this._provider,
      imageTiling: false,
      renderMode: RenderMode.Letterbox,
    });

    this.customCameraControls = new OrbitCameraControls();
    viewer.attachCustomCameraControls(this.customCameraControls);
    this._spatial = viewer.getComponent('spatial');
    this._viewer = viewer;

    const infoSize = 0.3;
    const commandsVisible = true;
    const statsVisible = true;
    const thumbnailVisible = false;

    const controllerOptions = {
      axesVisible: true,
      cameraControlMode,
      commandsVisible,
      gridVisible: true,
      imagesVisible,
      infoSize,
      statsVisible,
      thumbnailVisible,
    };

    this._optionController = new OptionController(
      Object.assign(
        {},
        this._spatial.defaultConfiguration,
        spatialConfiguration,
        controllerOptions,
        mapOptions,
      ),
    );

    this._statsControl = new StatsControl({
      visible: statsVisible,
      provider: this._provider,
    });
    this._thumbnailControl = new ThumbnailControl({
      visible: thumbnailVisible,
      provider: this._provider,
    });
    this._commandExplainerControl = new CommandExplainerControl({
      visible: commandsVisible,
    });
    this._commandExplainerControl.add(this._optionController.key.commands);

    this._infoControl = new InfoControl({
      beforeContainer: viewer.getContainer(),
    });
    this._infoControl.addControl(this._commandExplainerControl);
    this._infoControl.addControl(this._thumbnailControl);
    this._infoControl.addControl(this._statsControl);
    this._infoControl.setWidth(infoSize);

    this._fileController = new FileController({
      classNames: ['opensfm-file-container'],
      itemsUrl: 'items',
      showExitButton: true,
    });
    this._optionController.dat.addController(
      this._fileController,
      FolderName.IO,
    );

    this._makeCommands();

    this._axesRenderer = new AxesRenderer();
    this._basemapRenderer = new BasemapRenderer(mapOptions);
    this._earthRenderer = new EarthRenderer({
      mode: cameraControlMode,
    });
    this._customRenderer = new CustomRenderer(this._viewer);
    this._customRenderer.add(this._axesRenderer);
    this._customRenderer.add(this._earthRenderer);
    this._viewer.addCustomRenderer(this._customRenderer);
  }