尝试使用React.js和Cesium.js显示地球吗?

时间:2018-07-18 21:08:36

标签: javascript reactjs cesium

我已按照我在该主题上找到的所有指南进行操作,但似乎都无法帮助解决我的特定问题。我可以在我的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密钥,因此这可能不是问题。

0 个答案:

没有答案