前言

cesium-webpack 入门开发系列环境知识点了解：

node 安装包下载
webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址

webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学

vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错

cesium api文档介绍，详细介绍 cesium 每个类的函数以及属性等等

cesium 在线例子

我之前写一系列关于 cesium 入门开发文章，均是采取页面引用 cesium.js 以及 css 传统的手段来开发。其实 cesium 官网早已推出 CesiumJS and webpack 形式，我一直没抽空来尝试，所以，今天抽空按照官网的教程搭建一套 cesium-webpack形式来开发。

参照 cesium 的教程如下：
CesiumJS and webpack
cesium-webpack-example github例子地址如下：
cesium-webpack-example

按照官网教程安装配置过程中，有几处地方需要注意一下，由于 npm install 安装都是默认最新版本的，所以官网教程有些地方不太合适，版本差异性，具体如下：

webpack.config.js 配置文件里面的 webpack.optimize.CommonsChunkPlugin 识别不到

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: 'cesium',

minChunks: module => module.context && module.context.indexOf('cesium') !== -1

})

],

改为

plugins: [

new webpack.optimize.SplitChunksPlugin({

name: 'cesium',

minChunks: module => module.context && module.context.indexOf('cesium') !== -1

})

],

webpack.config.js 配置文件里面的 new webpack.optimize.UglifyJsPlugin() 已经被弃用

plugins: [

new webpack.optimize.UglifyJsPlugin()

]

改为

optimization: {

minimize: true

}

创建好的cesium-webpack 目录，vscode 打开如下：

dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/index.js 地图初始化代码
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括执行依赖，和开发依赖
webpack.config.js webpack 的配置文件

地图页面 index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<title>Cesium + Webpack</title>

</head>

<body>

<div id="cesiumContainer"></div>

</body>

</html>

地图初始化加载 index.js

import Cesium from 'cesium/Cesium';

import "./css/main.css";

import "cesium/Widgets/widgets.css";

var viewer = new Cesium.Viewer('cesiumContainer');

在 vscode 新建终端，输入 npm install 或者 npm i, 安装环境需要的依赖包，若无报错信息，则进行下一步
npm run build，打包编译web项目
npm start，node 启动 web 项目打包到浏览器运行看效果
如果正常出现该页面，则运行成功

完整demo源码见小专栏文章尾部：GIS之家cesium小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

巴特西

cesium-webpack 入门开发系列一初探篇（附源码下载）

前言

创建好的cesium-webpack 目录，vscode 打开如下：

最新文章

热门文章