技術標籤：cesium 知乎

最近接觸 GIS，開始瞭解 Cesium 這個開源專案，搭了個 React + Webpack + Cesium 的專案，遇到了一些問題，這裡整理下配置 Cesium 需要注意的步驟，React 和 Webpack 常規就不寫了。

1、安裝 Cesium

$ npm install cesium

2、jsconfig.json 、tsconfig.json 增加路徑

{
    // 其他部分省略
    "paths": {      
      "cesium": ["node_modules/cesium/Source"]
    }
}
 

3、webpack 構建指令碼增加 alias、plugin

// Cesium 原始碼路徑
// 第一步之後可以在 node_modules/cesium 檢視
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";

module.exports = {  
  resolve: {
    alias: {
       "@cesium": path.resolve(cesiumSource)
    },
  },
  plugins: [
    // 複製素材到打包最終目錄，相當於靜態檔案拷貝
    // 需要注意頁面中會自動引入這些
    new CopyWebpackPlugin([
      {
        from: path.join(cesiumSource, cesiumWorkers),
        to: "Workers"
      },
      {
        from: path.join(cesiumSource, "Assets"),
        to: "Assets"
      },
      {
        from: path.join(cesiumSource, "Widgets"),
        to: "Widgets"
      },
      {
        from: path.join(cesiumSource, "Core"),
        to: "Core"
      },
    ]),
    // 配置一個全域性變數，不然會有個錯誤
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify("")
    }),
  ]
};
 

4、元件中使用

// 引入樣式
import "cesium/Source/Widgets/widgets.css";
// 引入核心主檔案
const Cesium = require("cesium");

// 頁面上增加一個 div#gis-earth 就可以跑起來了
const viewer = new Cesium.Viewer("gis-earth", {
        infoBox: false,
        selectionIndicator: false,
        shadows: true,
        shouldAnimate: true,
        geocoder: false,
        homeButton: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false,
        sceneModePicker: false,
        terrainProvider: Cesium.createWorldTerrain()
      });
      // console.log(viewer)
    }