VueCli3中加载Cesium.js

缺乏、安全感 2021-07-25 11:54 1382阅读 0赞

更多Cesium示例代码：[https://sandcastle.cesium.com/][https_sandcastle.cesium.com]

首先下载Cesium.js

cnpm i -g cesium

这里是下载到全局，然后复制cesium中的文件夹，如下：

![20200908194703585.png][]

粘贴到Vuecli3项目中的public文件夹下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

在index.html中引入css文件和JavaScript文件即可

<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <script src="Cesium/Cesium.js"></script>

页面

<template>
      <div class="home">
        <div id="cesiumContainer"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          map: {}
        };
      },
      components: {},
      created() {},
      mounted() {
        new Cesium.Viewer("cesiumContainer");
      },
      computed: {},
      methods: {
        initMap() {}
      }
    };
    </script>
    
    <style scoped lang="scss">
    .home {
      height: 100vh;
      #cesiumContainer {
        height: 100%;
        border: 1px solid gray;
      }
    }
    </style>

展示结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[https_sandcastle.cesium.com]: https://sandcastle.cesium.com/
[20200908194703585.png]: /images/20210725/f418c02f9f5c46fb866fb6f01012d6f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/3866b3fb16cc4750a5dda19ae36bc5f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/01fc26e33bdf438794e05474b82d7973.png

发表评论取消回复

表情：

评论列表（有 3 条评论，1382人围观）

蒲公英云8A4005V铁粉 2021-08-24 11:39

'Cesium' is not defined是怎么解决的。

蒲公英云8A4005V铁粉 2021-08-24 11:39

蒲公英云8A4005V铁粉 2021-08-24 11:39

'Cesium' is not defined

相关阅读

相关如何安装、更新、卸载vueCli教程

一、安装VUE-CLI 配置npm淘宝镜像：`npm config set registry htps://registry.npm.taobao.org` 全局安装v

超、凢脫俗/ 2023年10月09日 15:49/ 0 赞/ 27 阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 12 阅读

相关 vuecli3.0 配置vue-router

安装直接在命令行打开项目目录然后输入以下代码进行安装 npm install vue-router 配置路由 1.使用`router-view`标签设

布满荆棘的人生/ 2023年06月15日 09:49/ 0 赞/ 107 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 308 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 255 阅读

相关通过超图在网页中加载3dmax模型

接此； [https://blog.csdn.net/bcbobo21cn/article/details/116806866][https_blog.csdn.net_bc

深藏阁楼爱情的钟/ 2022年10月05日 04:46/ 0 赞/ 231 阅读

相关 cesiumjs开发实践 (一)

cesiumjs 简介、开发环境搭建群号：309141738 摘要 Cesiumjs 是一套javascript库，用来渲染

浅浅的花香味﹌/ 2022年09月23日 11:00/ 0 赞/ 237 阅读

相关从内存中加载DLL DELPHI版

//从内存中加载DLL DELPHI版 unit MemLibrary; interface uses Windows;

雨点打透心脏的1/2处/ 2021年11月23日 18:24/ 0 赞/ 372 阅读

相关 Vuecli3+express实现跨域

目录一，本地跨域二，线上跨域 -------------------- 一，本地跨域首先，本地服务器地址开放的是3000端口，云服务器上开发的是4

阳光穿透心脏的1/2处/ 2021年07月25日 17:22/ 0 赞/ 576 阅读

相关 VueCli3中加载Cesium.js

更多Cesium示例代码：[https://sandcastle.cesium.com/][https_sandcastle.cesium.com] 首先下载Cesium.

缺乏、安全感/ 2021年07月25日 11:54/ 0 赞/ 1383 阅读