javascript - 如何在铯resium反应组件上加载kml文件

Question

我需要使用 resium-cesium 在反应组件上加载一个 kml 文件。我已按照官方 reium 页面中所示的确切程序进行操作，如下所示。

https://resium.darwineducation.com/getting_started#loading-your-own-data

我试图从cesium的官方github页面加载示例kml文件。 https://github.com/CesiumGS/cesium/tree/master/Apps/SampleData 我已经下载了这个 sampleData 文件夹并放在 react 项目的 src 文件夹下。然后尝试如下加载。

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

const data = {
  type: 'Feature',
  properties: {
    name: 'Coors Field',
    amenity: 'Baseball Stadium',
    popupContent: 'This is where the Rockies play!'
  },
  geometry: {
    type: 'Point',
    coordinates: [-104.99404, 39.75621]
  }
};

const App = () => (

  <Viewer full>
    <KmlDataSource data={"src/SampleData/kml/facilities/facilities.kml"} />
    <GeoJsonDataSource data={data} />
  </Viewer>

);

export default hot(App);

我应该收到类似的结果。https://sandcastle.cesium.com/index.html?src=KML.html 但我没有收到。在我的代码中 GeoJsonDataSource 工作得很好。但 KmlDataSource 有问题。在我的日志控制台中，我注意到了这个警告。

我的最终输出是这样的。请帮我完美加载kml文件。感谢你所做的一切。

Answer 1

您应该像这样将 KML 文件放在公共文件夹下。

// App.js
import React from "react";
import { Viewer, KmlDataSource, GeoJsonDataSource } from "resium";

const data = {
    type: 'Feature',
    properties: {
        name: 'Coors Field',
        amenity: 'Baseball Stadium',
        popupContent: 'This is where the Rockies play!'
    },
    geometry: {
        type: 'Point',
        coordinates: [-104.99404, 39.75621]
    }
};

const App = () => (
    <Viewer full>
        <KmlDataSource data={"./kml/facilities/facilities.kml"} />
        <GeoJsonDataSource data={data} />
    </Viewer>
);

export default App;

最后，我看到了这一点。

源代码在这里