VueCli3中加载Cesium.js

缺乏、安全感 2021-07-25 11:54 1479阅读 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 条评论，1479人围观）

蒲公英云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 赞/ 94 阅读

相关 vueCli3 身份证正则校验

js / @Description:身份证校验规则. / //校验身份证号 export function isIdentity

秒速五厘米/ 2023年10月03日 00:47/ 0 赞/ 28 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 30 阅读

相关 vuecli3.0 配置vue-router

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

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

相关 vuecli3 多页面配置

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

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

相关快速部署vuecli3 vuecli搭建 vuecli

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

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

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

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

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

相关从内存中加载DLL DELPHI版

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

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

相关 Vuecli3+express实现跨域

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

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

相关 VueCli3中加载Cesium.js

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

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