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

问题描述

我需要使用 resium-cesium 在 react 组件上加载 kml 文件。我已经按照官方resium页面中显示的确切程序进行了如下操作。

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文件。谢谢大家。

解决方法

您应该像这样将 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;

我终于看到了。

源代码here