为什么SceneView无法正确渲染

Question

我正在快速了解ArcGIS JS Api版本4.x，并认为这是在Typescript和Widget体系结构上实现小部件的好方法，该小部件在当前SceneView的顶部显示MapView。

/// <amd-dependency path="esri/core/tsSupport/declareExtendsHelper" name="__extends" />
/// <amd-dependency path="esri/core/tsSupport/decorateHelper" name="__decorate" />

import EsriMap from 'esri/Map';
import SceneView = require("esri/views/SceneView");

import { aliasOf, declared, property, subclass } from "esri/core/accessorSupport/decorators";

// building Widgets
import Widget = require("esri/widgets/Widget");
import { accessibleHandler, renderable, cssTransition, tsx } from "esri/widgets/support/widget";


// CSS class lookup object
const CSS = {
    base: "app-sceneView",
    iconClass: "esri-icon-layer-list"
};

@subclass("Widgets.SceneViewWidget")
export default class SceneViewWidget extends declared(Widget) {

    constructor(params?: any) {
        super();
    }

    //icon class for the expand widget(!)
    @property()
    iconClass = CSS.iconClass;

    map: EsriMap = null;

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

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

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

const map = new EsriMap({
    basemap: "streets",
    ground: "hybrid"
});
const mapView = new MapView({
    map: map,
    container: "mapView",
    center: [-118.244, 34.052],
    zoom: 12,
    ui: {
        components: ["zoom", "compass"]
    }
});

const sceneView = new SceneViewWidget({
    map: map
});

mapView.ui.add(sceneView, "top-right");

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

Answer 1

我相信问题是您使用的元素sceneView-container与小部件的容器相同，但也与SceneView的容器使用相同。

当您将它们分开时，一切都应该正常工作。这是不带子类SceneView的纯JavaScript示例，但在两种情况下均应工作。

Widget

Widget

请注意，在上面的代码中，您还将无效的地面属性<div id="viewDiv">
  <div id="overviewWidget" class="esri-widget">
    <div id="overviewDiv">
    </div>
  </div>
</div>
传递给mapView.ui.add("overviewWidget", "top-right");

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

var view = new SceneView({
  container: "overviewDiv",
  map: overviewMap,
});
，从而导致控制台错误消息。
请参见以下CodePen，以获取有效的演示："hybrid"