如何在 cesium-resium 中从外部加载 KML/KMZ 数据文件

Question

我正在做一个反应项目，我使用了 resium 库，它是 cesium 库的反应版本。在那里，我需要加载在运行时从服务器下载的 kml 文件。这意味着我需要在运行时加载 kml 文件。

例如，客户端应用程序通过 API 调用从服务器接收一些 kml 数据文件，然后我需要将 KML/KMZ 文件数据显示到 resium 世界地图中。所以我需要从外部加载 kml 文件。我尝试了一些代码，但它不起作用。请检查我的代码，让我知道如何在标签之外加载 KML 或 KMZ 文件。我可以成功地在标签内加载 kml 文件。但我需要在标签之外加载 kml 文件。请参考我的代码。

import './App.css';
import { hot } from "react-hot-loader/root";

import React, { createRef } from "react";
import { Viewer, KmlDataSource} from "resium";


class App extends React.Component {

  constructor(props) {
    super(props);
    this.ref = createRef();
  }

  loadKmlFileExternal() {
    if (this.ref.current && this.ref.current.cesiumElement) {
       //I tried two code syntax but no lucky. 
      <this.ref.current.cesiumElement>
        <KmlDataSource data={process.env.PUBLIC_URL + "/kml/gdpPerCapita2008.kmz"} />;
      </this.ref.current.cesiumElement>
      //or
      this.ref.current.cesiumElement.dataSources.add(KmlDataSource.load(process.env.PUBLIC_URL + "/kml/gdpPerCapita2008.kmz"));
    }
  }


  render() {
    let content = null;

    content = (
      <Viewer full ref={this.ref} >
        <KmlDataSource data={process.env.PUBLIC_URL + "/kml/facilities/facilities.kml"} /> // This works, but I need to load outside from Viewer
      </Viewer>
    );

    return (      
      <div>
        {content}
        {this.loadKmlFileExternal()}
      </div>
    );
  }
}

export default `hot(App);

Answer 1

实际上，您的 API 返回什么？我认为你不需要 API。您只需将 KML 文件上传到您的服务器并使用其 URL。