vue/cli3引入cesium

  一开始用了webpack结合vue引入vue;结果是各种bug,搞了半天。最后问了基友,发现vue脚手架这个·简单高效的方法,只需要几行代码就轻松地搞定啦!

方案一、搭建完vue项目后,直接在public文件中引入cesium文件夹,然后在index.html中引入widgets.css;在body底部引入cesium.js

  如下图:

  

展示效果如下:

方案二:利用vue-cesium进行项目搭建:首先在你的项目中执行命令;相关学习链接https://www.npmjs.com/package/vue-cesium

npm i --save vue-cesium

  之后,在你的main.js中引入

最后在你vue页面写如下代码:

在你的方法中加入下面代码

之后,可以根据个人的需求,进行页面小控件的隐藏以及位置大小的调整。

如果有不理解的地方,欢迎加我们的群,一起学习讨论。学习群:854184700

vue/cli3引入cesium的更多相关文章

  1. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  2. Vue Cli3 中别名的配置问题

    Vue Cli3 中别名的配置问题 vue-cli3中是没有config.build等目录的,这是因为vue-cli3中将这些配置隐藏起来了,如果想要修改,可以在vue.config.js文件中进行修 ...

  3. Vue Cli3 TypeScript 搭建工程

    Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程(ts+vuex+ ...

  4. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  5. 比较好的前端方法库及一些vue如何引入静态文件

    https://select2.github.io/examples.html   select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...

  6. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  7. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  8. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  9. vue.js引入

    开始学习vue.js,引入vue.vue.js一定要在head里面引入,实际开发中我们可能在body中引入,但是可能存在抖屏现象. 为了避免出现抖屏现象,我们引入vue.js或者jquery.js 最 ...

随机推荐

  1. 工控PLC中,关于定时器TON,TOF,的一点新认知,或者说醒悟吧!

    PLC  中的定时器,都是放在一个具体PRG任务单元中的,而PRG单元需要放在具体固定的周期循环任务中才能被执行,而这个周期循环任务的循环周期 T: 与定时器的定时时间T0:    T与T0 的数量级 ...

  2. C++中动态内存申请的结果

    1,问题: 1,动态内存申请一定成功吗? 1,不一定成功: 2,常见的动态内存分配代码: 1,C 代码: * sizeof(int)); if( p != NULL ) { // ... ... } ...

  3. BZOJ 2724蒲公英 (分块) 【内有块大小证明】

    题面 luogu传送门 分析 先分块,设块大小为x(之后我们会证明块大小取何值会更优) 步骤1 把所有的数离散化,然后对每个值开一个vector pos[i],pos[i]存储数i出现的位置 我们设查 ...

  4. docker--shell和Exec格式

    shell格式 RUN apt-get install -y vim CMD echo "docker so easy" ENTRYPOINT echo "docker ...

  5. Php 十六进制短浮点数转十进制,带符号位

    /** * 十六进制浮点型转为十进制 * @param String $strHex 十六进制浮点数 * @return 十进制 */ public static function hexToDecF ...

  6. ant打包遇到的问题

    \build\build.xml:350: Problem: failed to create task or type foreach Cause: The name is undefined. A ...

  7. SQL数据库—<6>存储过程

    Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这样就可以提高存储过程的性能. Ø ...

  8. redis出现MISCONF Redis is configured to save RDB snapshots...的错误

    今天重启服务器在连接redis数据库时突然报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not ...

  9. 2018-2-22-在-windows-安装-Jekyll

    title author date CreateTime categories 在 windows 安装 Jekyll lindexi 2018-02-22 17:47:39 +0800 2018-2 ...

  10. Java高频经典面试题(第一季)一:自增的分析

    package will01; public class testZiZeng { public static void main(String[] args) { int i = 1; i = i ...