1.下载cesium源码,将源码中Cesium,cesium-navigation两个文件夹放入src/static中,或者直接从个人百度云盘下载
2.
1.写入样式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video { margin: 0; padding:
0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
} /* HTML5 display-role reset for older browsers */ article, aside, details,
figcaption, figure, footer, header, hgroup, menu, nav, section { display:
block; } body { line-height: 1; font-family: monospace; font-size: 0.16rem;
min-width: 12rem; } ol, ul { list-style: none; } blockquote, q { quotes:
none; } blockquote:before, blockquote:after, q:before, q:after { content:
""; content: none; } table { border-collapse: collapse; border-spacing:
0; border-color: #b7b7b7; } html, body, #app { width: 100%; height: 100%;
position: relative; } text { display: inline-block; }.webglError{position: fixed;width: 400px;height: 240px;top: calc(50% - 100px);left: calc(50% - 200px);z-index: 9999;font-size: 14px;background: #fff;padding: 25px;border-radius: 8px;line-height: 22px;box-shadow: 2px 3px 10px #000;display: none;}.webglError font{font-size: 12px;padding-left: 28px;line-height: 20px;}
2.在根目录下index.html中引入cesium
<script src="static/Cesium/Cesium.js"></script>
<script src="static/cesium-navigation/CesiumNavigation.umd.js"></script>
<script src="static/Cesium/CesiumHeatmap.js"></script>
<script src="static/Cesium/cesiumTdt.js"></script>
<script src="static/plugins/painting.js"></script>
<script src="static/plugins/heatmap.min.js"></script>
<script src="static/plugins/timelinepick.js"></script>
3.写入自己令牌accessToken
Cesium.Ion.defaultAccessToken =
3.在需要使用界面的mounted中写入代码,包括html容器
<template>
<div id="cesiumContainer"></div>
</template>
<script>
export default{
methods:{
},
mounted() {
var viewer = new Cesium.Viewer('cesiumContainer');
}
}
</script>