vue项目中集成cesium

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容