由于对webpack不熟悉,按照网上教程走,使用webpack引入项目直接卡死。前前后后花了3天功夫,踩了很多坑,终于在不用webpack的情况下跑起来了。
先看下我的项目结构,后面要提到
1.下载cesium
npm install cesium --registry=https://registry.npm.taobao.org
2.拷贝cesium
把node_modules/cesium拷贝到public中。
3.引入文件
在public/index.html的head标签里引入cesium文件。
<script src="./Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
4.vue引入
最后一步,也是最重要的一步,好几次走到这里,因为加载不出地图,以为直接引入出了问题,反反复复弄了很多次。
在src根目录下的index.vue中加入,先在首页index.vue中把cesium引入,要不然只能加载出cesium的框架,没有地球显示。(先跑通,后续想再改文件就好办了。因为我们cesium文件放在public下面,静态文件访问的地址是http://localhost/Cesium/xxxx,如果引入cesium的页面地址多了层级,如http://localhost/abc/,最后获取cesium的地址会变成http://localhost/abc/Cesium/xxxx是获取不到静态文件的)
一定要在mounted方法里初始化cesium,不能在created里初始化,因为这个时候vue还没编译成DOM,js没办法通过id找到div容器。
<template>
<div>
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "index",
mounted() {
this.initView() //一定要在mounted方法里初始化cesium
},
data() {
return {
viewer: undefined
};
},
methods: {
initView(){
Cesium.Ion.defaultAccessToken = '自己ceisum的token';
this.viewer = new Cesium.Viewer('cesiumContainer')
},
}
}
</script>
ps 获取cesium的token,自己到cesium的官网注册一下(https://cesium.com/),然后创建项目获取token。具体可以自己到网上查一下。
本文含有隐藏内容,请 开通VIP 后查看