typescript - 为什么 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>
    }
}

小部件的容器在所需位置呈现良好，并且控件(例如缩放按钮)也在那里，但不会呈现 map ，当像这样调用时:

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 在上面的 TypeScript 代码中没有呈现的是 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>;
}

有关工作演示(纯 JavaScript)，请参阅以下 CodePen:
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 ，避免两个 View 相互干扰。只需使用 new EsriMap(...) 创建一个新的.