Error when trying to set zoom using SceneView

Question

Using esri-loader, when trying to create a SceneView using the following the view is not calculating the zoom correctly and I'm getting the following errors in the console:

[esri.views.3d.support.cameraUtils] #zoomToScale() Cannot compute scale from zoom without a tiling scheme client-hook-3.js:1 [esri.views.3d.state.ViewStateManager] #zoom= Invalid zoom 3

  let map = new WebMap({
    portalItem: {
      id: MAP_ID_HERE
    }
  });

  let view = new SceneView({
    container: "map",
    viewingMode: "local",
    map: map,
    zoom: 3
  });

Does anyone happen to know what is causing this? Looking through the documentation for SceneView it seems this should be valid in the constructor.

Answer 1

I think in this particular case, using a web map as the map, you have to wait for the view to load in order to set the zoom level. If not it will not be able to calculate the scale, that is the cause of the error.

This should work,

let view = new SceneView({
  container: "map",
  map: map,
  viewingMode: "local"
});

view.when(function() {
  view.zoom = 3;
});

UPDATE: (leave the other code because I think it clarify the problem and the final answer)

Well it seems that is not enough to wait for the view, because the basemap could not load everything. So here you have an alternative that works,

const basemap = Basemap.fromId("dark-gray-vector");
      
const sceneView = new SceneView({
  container: this.$el,
  map: new WebMap({
    basemap,
  }),
  center: [US_CENTER.longtitude, US_CENTER.latitude],
  viewingMode: "local"
});

basemap.loadAll().then(
  () => {
    sceneView.goTo({ zoom: 3 });
  }
);

In this new solution we actually wait till the basemap loads everything (using loadAll method) an then we set the zoom of the view.

This is the full code in your Map.vue,

<template>
  <div />
</template>

<script>
import { loadArcGISModules } from "@deck.gl/arcgis";
const US_CENTER = { longtitude: -98.5795, latitude: 39.8283 };
export default {
  name: "Map",
  props: {},
  mounted() {
    loadArcGISModules(
      [
        "esri/WebMap",
        "esri/views/SceneView",
        "esri/Basemap",
      ],
      { css: true }
    ).then(({ DeckRenderer, modules }) => {
      const [WebMap, SceneView, Basemap] = modules;

      const basemap = Basemap.fromId("dark-gray-vector");
      
      const sceneView = new SceneView({
        container: this.$el,
        map: new WebMap({
          basemap,
        }),
        center: [US_CENTER.longtitude, US_CENTER.latitude],
        viewingMode: "local"
      });

      basemap.loadAll().then(
        () => {
          sceneView.goTo({ zoom: 3 });
        }
      );
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
  width: 100%;
  height: 100%;
}
</style>