cesium（一）react项目（webpack）结合cesium配置

cesium是三维可视化地图引擎的代表之作了。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。它可以实现以下功能：全球级别的高精度的地形和影像服务，矢量以及模型数据，基于时态的数据可视化，多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化。 Cesium简而言之就是将栅格、矢量等二维数据，3dtiles、点云、DEM、倾斜摄影、BIM等三维数据在地球空间范围上可视化展示。react在前端框架上的流行就不必多叙述了，因公司业务需要，需要在react项目的基础上结合cesium框架做地图的可视化功能，后来在网上查询cesium官网以及博客的webpack结合cesium的方法，踩了很多坑，做个备份。

1、工程准备创建react项目，可用create-react-app，或者自己用webpack搭建项目，不过进行多叙述；

2、引入cesium包，因为打包部署的时候需要将cesium开发包一起打包，需要用到copy-webpack-plugin依赖包；

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

3、修改webpack.config.js的配置

（1）定义cesium源码目录，引入copy-webpack-plugin；

// Cesium源码所在目录
const cesiumSource = 'node_modules/cesium/Source'
const dirCesiumSource = '../node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
const CopyWebpackPlugin = require('copy-webpack-plugin')

（2）与entry和output并列的地方添加amd模块允许配置；

（3）在plugins中加入拷贝cesium资源的配置，注意，很多教程都只添加了Workers、Assets、Widgets文件目录，但是只添加这三个目录无法用到cesium官方demo内的三维数据，因此需要添加ThirdParty和Core模块；

// 拷贝Cesium 资源、控价、web worker到静态目录 
new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Core'), to: 'Core' }]),
new webpack.DefinePlugin({
  //Cesium载入静态的资源的相对路径
  CESIUM_BASE_URL: JSON.stringify('')
}),

（4）在module对象中添加

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

（5）然后重启项目，即可配置成功；使用的话注意1.62版本之前和1.62版本之后的区别

1.61版本

import Cesium from 'cesium/Cesium'

    // 地图视图
    const viewer = new Cesium.Viewer('mapContent', {
      animation: false, // 是否创建动画小器件，左下角仪表
      baseLayerPicker: false, // 是否显示图层选择器
      fullscreenButton: false, // 是否显示全屏按钮
      geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
      homeButton: false, // 是否显示Home按钮
      infoBox: false, // 是否显示信息框
      sceneModePicker: false, // 是否显示3D/2D选择器
      selectionIndicator: false, // 是否显示选取指示器组件
      timeline: false, // 是否显示时间轴
      // sceneMode: Cesium.SceneMode.SCENE3D, // 设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
      navigationHelpButton: false, // 是否显示右上角的帮助按钮
      // scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationInstructionsInitiallyVisible: false,
      showRenderLoopErrors: false, // 是否显示渲染错误
      // 设置背景透明
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      }
      ,
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: terrainLayer,
        requestVertexNormals: true,
        requestWaterMask: true
      })
    })

1.62版本之后

import {
    Viewer,
    SceneMode,
    CesiumTerrainProvider
} from 'cesium'

    // 地图视图
    const viewer = new Viewer('mapContent', {
      animation: false, // 是否创建动画小器件，左下角仪表
      baseLayerPicker: false, // 是否显示图层选择器
      fullscreenButton: false, // 是否显示全屏按钮
      geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
      homeButton: false, // 是否显示Home按钮
      infoBox: false, // 是否显示信息框
      sceneModePicker: false, // 是否显示3D/2D选择器
      selectionIndicator: false, // 是否显示选取指示器组件
      timeline: false, // 是否显示时间轴
      // sceneMode: Cesium.SceneMode.SCENE3D, // 设定3维地图的默认场景模
      navigationHelpButton: false, // 是否显示右上角的帮助按钮
      // scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationInstructionsInitiallyVisible: false,
      showRenderLoopErrors: false, // 是否显示渲染错误
      // 设置背景透明
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      }
      ,
      terrainProvider: new CesiumTerrainProvider({
        url: terrainLayer,
        requestVertexNormals: true,
        requestWaterMask: true
      })
    })

cesium（一）react项目（webpack）结合cesium配置

猜你喜欢