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. js对象传到后台ACTION使用

    需的包 <script type="text/javascript" src="s"></script>gson-1.2.3.jar谷歌 ...

  2. nginx的安装和负载均衡例子（RHEL/CentOS7.4）

    首先安装RHEL/CentOS7.4 mini ,然后关闭防火墙和 selinux ,更新系统(参看配置linux使用本地yum安装源和Redhat7/CentOS7 关闭防火墙和 selinux两个 ...

  3. js 使用技巧

    一,获取客户端状态 1.获取cookie function cookieInfo() { setcookie('cookie_test','1'); var cookie_test = getcook ...

  4. Appium初始化设置：手写代码连接手机、appium-desktop连接手机

    一.包名获取的三种方式 1)找开发要2)mac使用命令:adb logcat | grep START win使用命令:adb logcat | findstr START 或者可以尝试使用第3条命令 ...

  5. python多线程的几种情形分析-三种情况

    情形一:默认情况 默认情况,只开启线程,那么,主线程结束,其他子线程可能还没结束. 只使用t=threading.Thead(target=fun),t.start(). import threadi ...

  6. C语言|博客作业4

    一.本周教学内容:用C语言编写程序-循环结构 2.4 输出华氏-摄氏温度转换表.要求学生掌握使用for循环语句实现指定次数的循环程序设计. 二.本周作业头 问题 答案 这个作业属于哪个内容 C语言程序 ...

  7. java--二叉树解析及基本实现

    一.二叉树的结构 在进行链表结构开发的过程之中,会发现所有的数据按照首尾相连的状态进行保存,那么 在进行数据查询时为了判断数据是否存在,这种情况下它所面对的时间复杂度就是"O(n)" ...

  8. spark streaming 笔记

    spark streaming项目 学习笔记 为什么要flume+kafka? 生成数据有高峰与低峰,如果直接高峰数据过来flume+spark/storm,实时处理容易处理不过来,扛不住压力.而选用 ...

  9. js中获取input中所输入的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 在Python中处理大型文件的最快方法

    我们需要处理的各种目录中有大约500GB的图像.每个图像的大小约为4MB,我们有一个python脚本,一次处理一个图像(它读取元数据并将其存储在数据库中).每个目录可能需要1-4小时才能处理,具体取决 ...