Cesium结合Vue

标签： Cesium 分类： Gis 创建时间：2021-10-15 10:02:08 更新时间：2023-10-20 11:23:25

我的项目本身是基于vue的，前期呢，为了上一个Demo，索性就使用了ifrme的方式将写好的Cesium直接嵌入了vue项目中，但是最后我觉得还是要使用Vue的方式进行开发，这样才能达到代码统一的目的。

根据参考文章2的代码，这里有几个问题

(1) 出现配置不正确，参见问题一的解决方法

(2) 修改之后，无法加载地球，也就是有一个资源因为跨域的问题无法加载，导致了地球出不来

解决方法就是换一个地图，因为我尝试定义defaultAccessToken，似乎不起作用。于是我切换到了默认的openstreetmap地图。

1.加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
export default {
  name: "CesiumScene",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {},
  methods: {
    init() {
      // 初始化Cesium应用程序
      const viewer = new Cesium.Viewer('cesiumContainer');  
      // 移除默认的影像图层   
      const imageryLayers = viewer.imageryLayers;
      imageryLayers.remove(imageryLayers.get(0));
      
      // 初始化OSM影像图层数据源
      const osmImageryProvider = new Cesium.OpenStreetMapImageryProvider({
          url : 'https://a.tile.openstreetmap.org/'
      });
      // 将OSM影像图层数据源组织为OSM影像图层
      const osmImageryLayer = new Cesium.ImageryLayer(osmImageryProvider);
      // 将OSM影像图层加入到影像图层容器中
      imageryLayers.add(osmImageryLayer);

    }
  }
};
</script>

<style lang='scss' scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
参考文章:
1.Cesium系列4 — Vue+Cesium开发环境搭建（基于Cesium1.74） (这里的Cesium版本是1.74，但是vue-cli版本是2.x,而不是3.x,还是使用的webpack.base.conf.js进行的配置文件修改)
2.Vue Cli 4 引入 Cesium 配置 (这里的vue-cli是4.x)
3.Cesium 发行日志[官方同步至1.79.1]
4.[CesiumJS]Cesium入门2 - Cesium环境搭建及第一个示例程序
5.Cesium官方教程1：开始 (这里定义了defaultAccessToken，加载了地形，但是我实际上并没有成功使用Cesium.Ion.defaultAccessToken)
6.Cesium多源数据加载之影像图层（一） (这篇文章中，就是讲了如何加载不同的影像，比如OpenStreetMap、Bing地图以及，Cesium.Ico的地图等)
7.三维地图之cesium加载天地图（有代码） (我在使用单纯的js开发不集成Vue的时候，也是使用这种方法，就是加载天地图自定义的cesiumTdt插件，然后在这个插件基础上加载了天地图)
8.Vue 数据劫持导致Cesium球卡慢的解决方案 Ceisum球初始化之后将viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持。
9.vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法

问题

(1) “Options should be array” error - constructor only takes array args. 

1
2
3
4
5
6
7
8
9
10
11
12
13
new CopyWebpackPlugin([
    { from: "node_modules/cesium/Build/Cesium/Workers", to: "lib/cesium/Workers" },
    {
        from: "node_modules/cesium/Build/Cesium/ThirdParty",
        to: "lib/cesium/ThirdParty"
    },
    { from: "node_modules/cesium/Build/Cesium/Assets", to: "lib/cesium/Assets" },
    { from: "node_modules/cesium/Build/Cesium/Widgets", to: "lib/cesium/Widgets" }
]),
new webpack.DefinePlugin({
    // Define relative base path in cesium for loading assets
    CESIUM_BASE_URL: JSON.stringify("/lib/cesium")
})
参考文章:
1.“Options should be array” error - constructor only takes array args. (这里的讨论有利于解决这个问题)
2.CopyWebpackPlugin (CopyWebpackPlugin的使用方法)
3.基于VUE的Cesium加载本地地图跨域问题解决方案 (这里是使用vue自带的proxyTable进行了代理的转发)

(2) 加载很慢
我在使用vue之后，感觉加载底图特别的慢，当我的模型已经加载完成之后，底图还没有加载出来,我换成了按需加载的方式,进行加载还是不行,还是很慢,出现那个球,也要二三十秒吧.

1
2
3
4
5
// import * as Cesium from "cesium";
import {Viewer,WebMapTileServiceImageryProvider,Cartesian3,HeadingPitchRoll,Matrix4,Cesium3DTileset,
    Cesium3DTileStyle,Color,Entity,ScreenSpaceEventType,PostProcessStageLibrary,defined,
    Cartographic,Cesium3DTileFeature,Math as CesiumMath,BoundingSphere,Ellipsoid,LabelGraphics,VerticalOrigin,
    HorizontalOrigin,HeightReference,GeoJsonDataSource,JulianDate,ImageryLayer} from "cesium";
参考文章:
1.Cesium笔记 — Vue+Cesium开发环境搭建（基于Cesium1.69）
2.cesium 页面多 viewer 地图加载过缓解决方案
3.Vue 数据劫持导致Cesium球卡慢的解决方案

2.解决加载慢的问题

【解决方法一】
后来我打开控制台,发现了有些请求很大,达到了3.7M,这还是压缩后的结果

还有一些不知道是什么的碎文件,从cesium处加载

于是我放弃了使用import的方式加载Cesium,转而使用加载js文件的方式进行,因为是在Vue环境下,于是在切换页面的时候需要动态加载脚本文件.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default {
  name: "mapShow3D",
  mounted() {
    // this.init();
    this.loadScript(this.baseUrl+'/lib/Cesium/Cesium.js',this.init);
  },
  methods: {
    // 动态加载script
    loadScript(src, callback) {
        var script = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
        script.type = 'text/javascript';
        script.charset = 'UTF-8';
        script.src = src;
        if (script.addEventListener) {
            script.addEventListener('load', function () {
                callback();
            }, false);
        } else if (script.attachEvent) {
            script.attachEvent('onreadystatechange', function () {
                var target = window.event.srcElement;
                if (target.readyState == 'loaded') {
                    callback();
                }
            });
        }
        head.appendChild(script);
    },
    // 初始化
    init(){
        
    }
  }
};

【解决方法二】
还有文章说,不要将Cesium对象绑定到data中,这样做的目的,就是防止vue对一些不必要的变量进行了数据劫持,导致程序变慢.

3.vue-cesium

vue-cesium,这是网上有人使用vue3对cesium进行封装的结果，提供了很多的组件形式。

**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.加载
    1. 1.1. 问题
  2. 2. 2.解决加载慢的问题
  3. 3. 3.vue-cesium
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文