前言

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小专栏

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

cesium-webpack 入门开发系列一初探篇(附源码下载)的更多相关文章

  1. leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

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

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

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

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  6. Cesium专栏-空间分析之坡度分析(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  7. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  8. Cesium专栏-空间分析之地形等高线(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  9. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. python判断字符串中是否包含子字符串

    python判断字符串中是否包含子字符串 s = '1234问沃尔沃434' if s.find('沃尔沃') != -1:     print('存在') else:     print('不存在' ...

  2. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  3. web渗透测试

    信息收集 网络搜索 目录遍历:site:域名 intitle:index.of 配置文件泄露:site:域名 ext:xml | ext:conf | ext:cnf | ext:reg | ext: ...

  4. iPhone每一代的屏幕尺寸比例是多少?

    参考链接: https://www.jianshu.com/p/8f566ce3bc2c https://zhidao.baidu.com/question/1668756575750668747.h ...

  5. DOM CSS

    DOM CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElemen ...

  6. 详解 DNS 与 CoreDNS 的实现原理

    域名系统(Domain Name System)是整个互联网的电话簿,它能够将可被人理解的域名翻译成可被机器理解 IP 地址,使得互联网的使用者不再需要直接接触很难阅读和理解的 IP 地址. http ...

  7. 我的第一个CCS工程

    直接用别人已经弄好的例程,学习创建属于自己的工程,就发现还是有很多问题的: 首先是:1. 想加载头文件到include工程文件夹中却发现总是在Document文件夹中,很是纳闷,在网上搜了搜,发现时路 ...

  8. d-堆

    二叉堆因为实现简单,因此在需要优先队列的时候几乎总是使用二叉堆.d-堆是二叉堆的简单推广,它恰像一个二叉堆,只是所有的节点都有d个儿子(因此,二叉堆又叫2-堆).下图表示的是一个3-堆.注意,d-堆要 ...

  9. java8 的files、path类相关文件遍历API

    Path的两种初始化(应该还有别的方式) Path file = new File(path).toPath(); Paths.get 判断是文件.是目录 Files.isRegularFile(fi ...

  10. AcWing 33. 链表中倒数第k个节点

    习题地址 https://www.acwing.com/solution/acwing/content/2997/ 题目描述输入一个链表,输出该链表中倒数第k个结点. 注意: k >= 0;如果 ...