vue集成cesium或超图的supermap-cesium学习笔记

在项目中，需要利用vue进行cesium和超图的集成开发，本文以supermap-cesium为例，进行vue的集成开发。

npm 安装vue-cesium-supermap

1. 首先在你的项目中利用npm添加依赖项vue-cesium-supermap

npm i --save vue-cesium-supermap

2.在vue的main.js中全局注册
添加：import SuperMapCesium from 'vue-cesium-supermap'
然后注册supermapCesium：

Vue.use(SuperMapCesium,{
    cesiumPath:'/static/Cesium'
})

（其中cesiumPath为超图webgl开发包build文件夹下面的Cesium文件夹，将该文件夹放入到项目的static文件夹中或者你自定义的文件夹中，然后添加上该路径即可）

vue-cesium-supermap的使用

利用npm引入vue-cesium-supermap包后，进行组件的使用：
1.在你需要添加的vue组件中引入supermap三维地球，比如我想在项目的home.vue中添加三维地球，具体的使用方式如下：

//home.vue组件
<template>
 <!-- 超图三维地球viewer -->
   <sm-viewer @ready=ready navigation fullscreenButton>
   </sm-viewer>
</tempalte>

添加以上代码，超图的三维地球就会出现在你的home页面中。

2.在成功添加三维球后，如何获取我们所需要的Cesium和viewer核心类。
viewer组件渲染完毕时触发，返回一个Cesium的核心类和viewer实例。该项目组件是异步加载，请不要尝试在组件的生命周期中访问 Cesium 核心类和 viewer 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。
在上面的代码中 <sm-viewer @ready=ready navigation fullscreenButton> 我们看到sm-viewer组件中有一个ready函数，这个函数返回了一个CesiumInstance对象，它包括了我们所需要的Cesium和viewer核心类，ready函数的具体代码为(ready函数写在home的methods方法中)：

ready(cesiumInstance) {
     var Cesium = cesiumInstance.Cesium;
     var viewer= cesiumInstance.viewer;

这样我们就可以获取到我们需要的两个核心类，这样你就可以继续开发啦。。。

vue-cesium-demo的github地址：vue-cesium-demo
vue-cesium-supermap的github地址：vue-cesium-supermap