Cesium笔记 初始化 原生Cesium

1、创建vue项目

vue create my_demo

2、下载Cesium 

可以从官网下载,也可以使用node下载

npm install cesium

3、把node_modules文件夹中下载得Cesium,移出到public文件夹下

4、将Cesium.js 以及样式文件widgets.css在index.html中引用

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title>myDEmo</title><link rel="stylesheet" href="./static/Cesium//Widgets/widgets.css" /></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"></div><script type="text/javascript" src="./static/Cesium/Cesium.js"></script><!-- built files will be auto injected --></body>
</html>

5、新建vue文件,在vue文件中初始化场景

<template><div id="cesiumContainer" class="cesium-container"></div>
</template>
<script>
export default {name: "CesiumMap",methods: {},mounted() {let viewer = new Cesium.Viewer("cesiumContainer");}
};
</script>

6、效果如下:

遇到问题如下:

'Cesium' is not defined 问题:package.json 文件eslintConfig 添加 

 "globals": {

      "Cesium": true

    }

CesiumMap.vue文件不支持ts,改用js写,如要用ts请百度

The "HelloWorld" component has been registered but not used  问题 例如xxx已经注册,但是为使用这种问题 eslint 问题 解决办法是:package.json 文件eslintConfig 添加 

 "rules": {

      "vue/no-unused-components": "off",

      "no-unused-vars": "off"

    },