Javascript 如何从文档中获取铯查看器的实例？

我试过使用

var viewer=document.getElementByIdcesiumContainer

但这不会返回实际的查看器对象。获取已创建查看器的实例/引用的正确方法是什么。我试图在代码的某个部分中访问它，该部分超出了我创建查看器的部分的范围，如果这不明显的话

---

正在使用react应用程序的resium包创建查看器。呈现的HTML页面仍然将查看器包装在id为cesiumContainer的div中，从dev tools中检查源代码来看，它看起来与没有反应时一样，因此我认为它在能够访问它方面的行为是相同的。当然，情况可能并非如此。

文档指出，如果您从resium导入useCesium，则以下代码将获取您所需的参考

从铯中导入{Viewer}； 从树脂中导入{useCesium}； 常量示例组件==>{ const{viewer}=铯； return此处提供了铯查看器对象{Viewer？：not}。

； }; 导出默认示例组件； 编辑：使用基于类的组件需要以不同的方式访问实例。以下是文档中的两个示例：

使用类方法：

import React, { Component } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";
class ExampleComponent extends Component {
  private viewer: CesiumViewer | undefined;
  componentDidMount() {
    if (this.viewer) {
      // this.viewer is Cesium's Viewer
      // DO SOMETHING
    }
  }
  render() {
    return (
      <Viewer
        ref={e => {
          this.viewer = e ? e.cesiumElement : undefined;
        }}
      />
    );
  }
}

使用createRef：

import React, { Component, createRef } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";
class ExampleComponent extends Component {
  private ref = createRef<CesiumViewer | undefined>();
  componentDidMount() {
    if (this.ref.current?.cesiumElement) {
      // this.ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }
  render() {
    return <Viewer ref={this.ref} />;
  }
}

---

这些文档表明，如果您从resium导入useCesium，那么下面的代码将获取您要查找的引用

从铯中导入{Viewer}； 从树脂中导入{useCesium}； 常量示例组件==>{ const{viewer}=铯； return此处提供了铯查看器对象{Viewer？：not}。

； }; 导出默认示例组件； 编辑：使用基于类的组件需要以不同的方式访问实例。以下是文档中的两个示例：

使用类方法：

import React, { Component } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";
class ExampleComponent extends Component {
  private viewer: CesiumViewer | undefined;
  componentDidMount() {
    if (this.viewer) {
      // this.viewer is Cesium's Viewer
      // DO SOMETHING
    }
  }
  render() {
    return (
      <Viewer
        ref={e => {
          this.viewer = e ? e.cesiumElement : undefined;
        }}
      />
    );
  }
}

使用createRef：

import React, { Component, createRef } from "react";
import { Viewer as CesiumViewer } from "cesium";
import { Viewer } from "resium";
class ExampleComponent extends Component {
  private ref = createRef<CesiumViewer | undefined>();
  componentDidMount() {
    if (this.ref.current?.cesiumElement) {
      // this.ref.current.cesiumElement is Cesium's Viewer
      // DO SOMETHING
    }
  }
  render() {
    return <Viewer ref={this.ref} />;
  }
}

---

这个答案集中在您使用树脂、铯和基于类别的React组件上

如果您正在使用React 16+您可以使用来实现您的目标

首先创建一个上下文，用作单例引用。将导出状态和反应上下文。 CesiumContext.js

export const state = {viewer: '', setInstance: (ref)=>{state.viewer = ref;}};
export default CesiumContext;

在您想要引用Cesium实例的每个组件中，将类属性contextType设置为React Contact引用。CesiumContext。在ViewerComponent构造函数中，使用createRef。它将捕获唯一允许设置上下文状态的prop ref，从而允许所有其他组件访问引用。注意使用componentDidMount将上下文的状态设置为Resium提供的引用。 ViewerComponent.js

export default class ViewerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
  }
  componentDidMount() {
    if (this.ref.current && this.ref.current.cesiumElement) {
      this.context.setInstance(this.ref.current.cesiumElement);
    }
  }
  render() {
    return <Viewer ref={this.ref}/>
  }
}
ViewerComponent.contextType = CesiumContext;

最后，在本例中，在任何需要访问共享资源Cesium视图实例的组件中，在类上设置contextType。在componentDidMount中，从上下文中获取实例。 任何组件

export default class AComponent extends React.Component {
  constructor() {
    super();
    this.viewer = false;
  }

  componentDidMount() {
    this.viewer = this.context.viewer;
  }
  render() {
    return <p>{/* do something with this.viewer */}</p>;
  }
}
AComponent.contextType = CesiumContext;

下面是一个完整的解决方案。一个组件A组件访问属性，“B组件”访问属性

---

这个答案集中在您使用树脂、铯和基于类别的React组件上

如果您正在使用React 16+您可以使用来实现您的目标

首先创建一个上下文，用作单例引用。将导出状态和反应上下文。 CesiumContext.js

export const state = {viewer: '', setInstance: (ref)=>{state.viewer = ref;}};
export default CesiumContext;

在您想要引用Cesium实例的每个组件中，将类属性contextType设置为React Contact引用。CesiumContext。在ViewerComponent构造函数中，使用createRef。它将捕获唯一允许设置上下文状态的prop ref，从而允许所有其他组件访问引用。注意使用componentDidMount将上下文的状态设置为Resium提供的引用。 ViewerComponent.js

export default class ViewerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = createRef();
  }
  componentDidMount() {
    if (this.ref.current && this.ref.current.cesiumElement) {
      this.context.setInstance(this.ref.current.cesiumElement);
    }
  }
  render() {
    return <Viewer ref={this.ref}/>
  }
}
ViewerComponent.contextType = CesiumContext;

最后，在本例中，在任何需要访问共享资源Cesium视图实例的组件中，在类上设置contextType。在componentDidMount中，从上下文中获取实例。 任何组件

export default class AComponent extends React.Component {
  constructor() {
    super();
    this.viewer = false;
  }

  componentDidMount() {
    this.viewer = this.context.viewer;
  }
  render() {
    return <p>{/* do something with this.viewer */}</p>;
  }
}
AComponent.contextType = CesiumContext;

下面是一个完整的解决方案。一个组件A组件访问属性，“B组件”访问属性

---

Cesium.Viewer是如何实例化的？它是在react应用程序中使用resium包制作的。我希望在同一页面上显示的不同react组件中直接访问它，这样就可以使用相同的DOM，而不必在道具中混乱地传递引用。Cesium.Viewer是如何实例化的？它是在react应用程序中使用resium包制作的。我希望在同一页面上显示的不同react组件中直接访问它，这样就可以使用相同的DOM，而不必在道具中混乱地传递引用。感谢您的发现！因此，为了使用它，我需要重构到功能组件，或者做一些其他的工作来在类组件中使用钩子……根据这些文档，useCesium是一个钩子。试图在类组件中使用它时出错。如果我的团队不同意的话，我确实找到了这个解决办法

---

重构：PHooks用于功能组件，而不是基于类的组件。我不确定你想完成什么。但是我希望你考虑一下投票并接受这个答案。我想得到一个对它创建的组件之外的查看器对象的引用。我在你的评论出现之前发表了评论。搜索…谢谢你找到了！因此，为了使用它，我需要重构到功能组件，或者做一些其他的工作来在类组件中使用钩子……根据这些文档，useCesium是一个钩子。试图在类组件中使用它时出错。如果我的团队不同意重构的话，我确实找到了一个解决方法：PHooks用于功能组件，而不是基于类的组件。我不确定你想完成什么。但是我希望你考虑一下投票并接受这个答案。我想得到一个对它创建的组件之外的查看器对象的引用。我在你的评论出现之前发表了评论。搜索。。。