Cesium Vue开发环境搭建
最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程。
一、vue 工程创建,使用 vue-cli
vue init webpack cesium-demo
二、cesium 安装
npm install cesium --save
三、webpack 配置
1、build/webpack.base.conf.js 文件中添加 Cesium module name
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
},
2、build/webpack.dev.conf.js 文件中添加 static files 管理
plugins: [
...
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],
四、Hello World!
App.vue 中输入以下代码
<template>
<div id="app">
<div id="cesiumContainer"></div>
</div>
</template> <script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
name: 'App',
mounted () {
this.$nextTick(() => {
const viewer = new Cesium.Viewer('cesiumContainer')
console.log('viewer: ', viewer)
})
}
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#app,#cesiumContainer {
font-family: "Avenir", Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
五、运行
npm run dev
根据官网的说明,浏览器运行结果如下
。。。
最后在 github上找到这个问题的解决方法,
在 build/webpack.base.conf.js 文件中添加如下二行
module: {
unknownContextCritical: false,
unknownContextRegExp: /^.\/.*$/,
...
}
重新运行
运行成功,不过界面底部有一个 access token 的提示,去官网上申请一个 access token ,在 new Cesium.Viewer 前添加 一行代码
Cesium.Ion.defaultAccessToken = ‘your_access_token’
放一张最终效果图
Cesium Vue开发环境搭建的更多相关文章
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- express+mysql+vue开发环境搭建
最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...
- vue开发环境搭建Mac版
一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对 ...
- 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建
node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...
- vue 开发系列(一) vue 开发环境搭建
概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...
- 最全Vue开发环境搭建
前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...
- 一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
- 【VUE】Mac下vue 开发环境搭建,以及目录结构
1 安装Node.js 参看 node.js环境安装 http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...
- vscode vue开发环境搭建
以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...
随机推荐
- 2018.10.24 bzoj3195: [Jxoi2012]奇怪的道路(状压dp)
传送门 f[i][j][k]f[i][j][k]f[i][j][k]表示前iii个点连了jjj条边,第i−K+1i-K+1i−K+1~iii个点连边数的奇偶性为kkk时的方案数. 转移规定只能从后向前 ...
- JSAAS 平台实现 微信类似的TOKEN机制
在企业微信中,我们在调用微信接口时,我们需要首先获取token,然后根据token,调用API接口方法.这个token是有生命周期的,微信的token默认的生命周期是7200秒. 因此这个token可 ...
- 容器,表格 ,div,元素可左右拖动,滚动 css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 一些js在线引用文档
1.jquery在线引用: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script& ...
- ejb servlet demo
官方文档: http://docs.oracle.com/javaee/6/tutorial/doc/gijre.html package converter.ejb; import java.mat ...
- 禁止浏览器缓存js
方法:在js文件后加上数学随机数; Math.random() 比如:源代码为 <script src="./js/lib/require/require.js" data- ...
- noip第28课作业
分段数列 [问题描述] 对于给定的一个长度为N的正整数数列A[i],现要将其分成连续的若干段,并且每段和不超过M(可以等于M),问最少能将其分成多少段使得满足要求. 输入格式: 输入第1行包含两个正整 ...
- 谷歌的java文本差异对比工具
package com.huawei.common.transfertool.utils; /** * @author Paul * @version 0.1 * @date 2018/12/11 * ...
- csdn上讲一个实时计算架构比较清晰的一篇文章
https://blog.csdn.net/ymh198816/article/details/51998085
- yum-本地源配置(CentOS7)
服务器版本查看:# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 一.挂载ISO文件: 1.ISO镜像下载网站:网易镜像: ...