0

使用esri-loader，当尝试使用以下方法创建 SceneView 时，视图未正确计算缩放，并且我在控制台中收到以下错误：

[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
  });

有谁碰巧知道是什么原因造成的？查看文档SceneView似乎这在构造函数中应该是有效的。

4

1 回答 1

2

我认为在这种特殊情况下，使用 web 地图作为地图，您必须等待视图加载才能设置缩放级别。如果不是，它将无法计算比例尺，这就是错误的原因。

这应该工作，

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

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

更新：（留下其他代码，因为我认为它澄清了问题和最终答案）

好吧，等待视图似乎还不够，因为底图无法加载所有内容。所以在这里你有一个可行的替代方案，

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 });
  }
);

在这个新的解决方案中，我们实际上等到底图加载所有内容（使用loadAll方法），然后我们设置视图的缩放。

这是您的完整代码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>
于 2020-10-12T16:30:52.633 回答