cesium-webpack 入门开发系列一初探篇（附源码下载）
前言
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 入门开发系列一初探篇（附源码下载）的更多相关文章
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- openlayers5-webpack 入门开发系列一初探篇（附源码下载）
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- Cesium专栏-空间分析之坡度分析（附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- Cesium专栏-空间分析之地形等高线（附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- ASP.NET MVC教程八：_ViewStart.cshtml
一.引言 _ViewStart.cshtml是在ASP.NET MVC 3.0及更高版本以后出现的,用Razor模板引擎新建项目后,Views目录下面会出现一个这样的文件: 打开_ViewStart. ...
- 关于scrapy中如何区分是接着发起请求还是开始保存文件
一.区分 根据yield迭代器生成的对象是request对象还是item对象 二.item 1.配置tem对象 在items.py文件中设置类 class MyscrapyItem(scrapy.It ...
- Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- extjs 动态加载列表，优化思路
功能截图 之前做法,先查询每一行的前4个字段,然后动态拼接出其他的字段,效率极低,以下是优化后的代码,供参考,只提供一个优化思路,授人以鱼不如授人以渔 后台Sql语句优化(语法仅支持Oracle) S ...
- Change Field Layout and Visibility in a List View 在列表视图中更改字段布局和可见性
This lesson will guide you through the steps needed to select columns displayed in the List View. Fo ...
- SSM框架之spring（1）
spring(1) 1.spring概述 Spring是分层的 Java SE/EE应用 full-stack 轻量级开源框架,以 IoC(Inverse Of Control:反转控制)和 AOP( ...
- JavaScript---动态加载script和style样式
一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点". 一个基本的网页格式 <!DOCT ...
- web渗透测试
信息收集 网络搜索 目录遍历:site:域名 intitle:index.of 配置文件泄露:site:域名 ext:xml | ext:conf | ext:cnf | ext:reg | ext: ...
- iOS---------开发中 weak和assign的区别
weak和assign的区别-正确使用weak.assign 一.区别 1.修饰变量类型的区别weak只可以修饰对象.如果修饰基本数据类型,编译器会报错-“Property with ‘weak’ a ...
- Android Recovery升级原理
摘要 Recovery模式指的是一种可以对安卓机内部的数据或系统进行修改的模式(类似于windows PE或DOS).也可以称之为安卓的恢复模式,在这个所谓的恢复模式下,我们可以刷入新的安卓系统,或者 ...