为什么SceneView无法正确渲染

Question

我正在加快ArcGIS JS Api版本4.x的速度，并认为这是在Typescript和Widget体系结构上实现小部件的好方法，该小部件在当前{{1 }}。

SceneView

窗口小部件的容器可以在所需位置很好地渲染，并且诸如缩放按钮之类的控件也位于其中，但是当这样调用时，地图不被渲染：

MapView

如您所见。 div的边界就在那里，呈现控件并且属性也在那里。仅缺少SceneView本身。为什么会这样？

Answer 1

在上述TypeScript代码中未呈现SceneView的原因是this.map中的_bindView()为空，因为this是函数作用域而不是对象作用域。

_bindView() {
  new SceneView({
    map: this.map,
    container: "sceneView-container"
  });
}

可以通过在_bindView()中传递正确范围的render()函数来解决此问题：

render() {
  return <div afterCreate={this._bindView.bind(this)} id="sceneView-container" class={CSS.base}></div>;
}

或

render() {
  return <div afterCreate={() => this._bindView()} id="sceneView-container" class={CSS.base}></div>;
}

有关有效的演示，请参见以下CodePen（纯JavaScript）： https://codepen.io/arnofiva/pen/1a801eca6a01ca9bf7625f89f906b6e7

---

此外，我还建议更改上面的代码中的以下内容：

• 将SceneView容器sceneView-container包装在另外的<div>中，以避免Widget和SceneView共享相同的元素：

<div><div id="sceneView-container" class={CSS.base} afterCreate={this._bindView.bind(this)}></div></div>

• 传递Map.ground的有效值，例如

const map = new EsriMap({
  basemap: "streets",
  ground: "world-elevation"
});

• 为Map和MapView提供单独的SceneView实例，避免两个视图相互干扰。只需使用new EsriMap(...)创建一个新的。

---