我已按照我在该主题上找到的所有指南进行操作,但似乎都无法帮助解决我的特定问题。我可以在我的React网页上显示Cesium应用程序,但是不会显示地球,背景和缩略图,但是,所有其他小部件都会显示(主页按钮,时间控制器等)。如果你们都需要更多代码,我将很乐意提供更多:)
这是我的代码:
project / src / App.js:
import React, {Component} from "react";
import Viewer from "cesium/Source/Widgets/Viewer/Viewer";
import BingMapsImageryProvider from "cesium/Source/Scene/BingMapsImageryProvider";
import CesiumTerrainProvider from "cesium/Source/Core/CesiumTerrainProvider";
const BING_MAPS_URL = "//dev.virtualearth.net";
const BING_MAPS_KEY = process.env.BING_MAPS_KEY;
const STK_TERRAIN_URL = "//assets.agi.com/stk-terrain/world";
export default class CesiumGlobe extends Component {
state = {viewerLoaded : false}
componentDidMount() {
const imageryProvider = new BingMapsImageryProvider({
url : BING_MAPS_URL,
key : BING_MAPS_KEY,
});
const terrainProvider = new CesiumTerrainProvider({
url : STK_TERRAIN_URL
});
this.viewer = new Viewer(this.cesiumContainer, {
animation : true,
baseLayerPicker : false,
fullscreenButton : false,
geocoder : false,
homeButton : true,
infoBox : false,
sceneModePicker : false,
selectionIndicator : true,
timeline : true,
navigationHelpButton : false,
scene3DOnly : true,
imageryProvider,
terrainProvider
})
}
componentWillUnmount() {
if(this.viewer) {
this.viewer.destroy();
}
}
render() {
const containerStyle = {
const containerStyle = {
width: '100%',
height: '100%',
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'fixed',
display : "flex",
alignItems : "stretch",
};
const widgetStyle = {
flexGrow : 2
}
return (
<div className="cesiumGlobeWrapper" style={containerStyle}>
<div
className="cesiumWidget"
ref={ element => this.cesiumContainer = element }
style={widgetStyle}
/>
</div>
);
}
}
注意:我是最近生成的BingMapsApi密钥,因此这可能不是问题。