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

前言

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

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

按照官网教程安装配置过程中,有几处地方需要注意一下,由于 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小专栏

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

GIS之家作品店铺:GIS之家作品店铺
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询
posted @ 2019-05-28 15:21  GIS之家  阅读(1093)  评论(0编辑  收藏  举报