在react中引入cesium

1. 参考：https://www.jianshu.com/p/e405bc23109f?tdsourcetag=s_pcqq_aiomsg

2. npm install cesium
   npm install --save-dev copy-webpack-plugin
   

3. create-react-app中使用 npm run eject 将webpack暴露出来

4. 进入config/webpack.config.js

   引入变量：

   const CopyWebpackPlugin = require('copy-webpack-plugin');
   // The path to the Cesium source code
   const cesiumSource = 'node_modules/cesium/Source';
   

   在plugins:[]中加入：

   // Copy Cesium Assets, Widgets, and Workers to a static directory
         new CopyWebpackPlugin([
           { from: path.join(cesiumSource, 'Workers'), to: 'cesium/Workers' },
         ]),
         new CopyWebpackPlugin([
           { from: path.join(cesiumSource, 'Assets'), to: 'cesium/Assets' },
         ]),
         new CopyWebpackPlugin([
           { from: path.join(cesiumSource, 'Widgets'), to: 'cesium/Widgets' },
         ]),
         new CopyWebpackPlugin([
           { from: path.join(cesiumSource, 'Core'), to: 'cesium/Core' },
         ]),
         // 解决：Unable to determine Cesium base URL automatically,…efining a global variable called CESIUM_BASE_URL.
         new webpack.DefinePlugin({
           // Define relative base path in cesium for loading assets
           CESIUM_BASE_URL: JSON.stringify(''),
         }),
   

   在module:{}中加入

   // 解决：Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
   unknownContextCritical: false,
   

   在output:{}下面加入

   amd: {
         // Enable webpack-friendly use of require in Cesium
         toUrlUndefined: true,
       },
   

5. 初始化cesium

   import React from "react"
   import 'cesium/Source/Widgets/widgets.css'
   const Cesium = require('cesium')
   class CesiumTest extends React.Component {
       constructor(props) {
           super(props);
           this.state = { };
       }
       componentDidMount() {
           var viewer=new Cesium.Viewer("cesiumContainer", {
               imageryProvider: new Cesium.UrlTemplateImageryProvider({
                   url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" 
               }),
               infoBox: false,
               selectionIndicator: false,
               shadows: true,
               shouldAnimate: true,
               geocoder: false,
               homeButton: false,
               baseLayerPicker: false,
               navigationHelpButton: false,
               animation: false,
               timeline: false,
               fullscreenButton: false,
               vrButton: false,
               creditContainer: 'credit',
               sceneModePicker: false,
               terrainProvider: Cesium.createWorldTerrain() //加入地形
           });
           console.log(viewer)
       }
   
       render() {
           return (
               <div>
                   <div id='cesiumContainer'/>
                   <div id='credit'/>
               </div>
           );
       }
   
   }
   
   export default CesiumTest;
   

   转载请注明出处:https://www.cnblogs.com/implementer/