我的项目本身是基于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() {
const viewer = new Cesium.Viewer('cesiumContainer');
const imageryLayers = viewer.imageryLayers;
imageryLayers.remove(imageryLayers.get(0));
const osmImageryProvider = new Cesium.OpenStreetMapImageryProvider({
url : 'https://a.tile.openstreetmap.org/'
});
const osmImageryLayer = new Cesium.ImageryLayer(osmImageryProvider);
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({
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 {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.loadScript(this.baseUrl+'/lib/Cesium/Cesium.js',this.init);
},
methods: {
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进行封装的结果，提供了很多的组件形式。
