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
})
})