Question

使用产品：Vue-iClient3D-WebGL 操作系统：win10 x64

其他环境信息：

C:\Users\10794>node --version
v16.15.1

C:\Users\10794>vue --version
2.9.6

数据类型：？

问题详细描述：

viewer和Cesium如何进行import操作？

参考链接：

快速上手 | SuperMap/Vue-iClient3D-WebGL

• 在参考csdn的教程之后 SuperMap iClient3D for WebGL教程-Vue开发环境配置入门_supermapsupport的博客-CSDN博客_vue-iclient3d-webgl

Answer 1

您好，首先对于您的问题，有一些疑惑的地方：

1.您所说的“ viewer和Cesium如何进行import操作 ”是什么意思呢？import通常是用来串联其他控件的，而不是用来操作方法或对象的

2.您这里的viewer和Cesium为什么会放在mounted下面呢？放在里面其实也没有问题，但是您这个viewer没有定义啊。

3.我给您放一部分示例代码在下方，这是我这边的一个程序代码的mounted()的开头：

let Cesium = window.Cesium;
console.log()
let viewer = new Cesium.Viewer("indexright");
let scene = viewer.scene;
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
  url : 'https://dev.virtualearth.net',
  mapStyle : Cesium.BingMapsStyle.AERIAL,
  key : 'AhLx52IuZUuca_C3zK2TzBG2eu1vihUkayqc_e4MISbXZyn5Zw_X--odRqrweVap'
}));
let urlStr = 'http://localhost:8090/iserver/services/3D-hyy_middle/rest/realspace';
scene.open(urlStr);
scene.camera.setView({
  //将经度、纬度、高度的坐标转换为笛卡尔坐标
  destination: new Cesium.Cartesian3(-2653915.6463913363, 3571045.726807149, 4570293.566342328),
  orientation: {
    heading: 2.1953426301495345,
    pitch: -0.33632707158103625,
    roll: 6.283185307179586
  }
})

希望可以帮助到您！

Comments

我Vue也是刚开始学，还不是很熟悉。我只是对着官网的例子：

• SuperMap iClient3D for WebGL教程-Vue开发环境配置入门_supermapsupport的博客-CSDN博客_vue-iclient3d-webgl
• 快速上手 | SuperMap/Vue-iClient3D-WebGL

进行开发，例子咋写我咋写，我只是想先把一个地球加载出来……

---

如果对vue不太熟悉的话，因为您这边有示例的，所以我推荐您
https://cn.vuejs.org/v2/api/index.html

打开vue的API随时可以查看，比如mounted的使用。

另外我这边再给您放一篇比较适用的简单示例，是一个控制组件显隐的

https://blog.csdn.net/qq_34802416/article/details/89302496

通过子父组件的控制，以及官方的示例代码，相信您可以写出一个完整的程序，加油！

---

按照你给的例子，我大致修改了我的代码：

<script>

let Cesium = window.Cesium
let viewer = new Cesium.Viewer('cesiumContainer')//div id
let scene = viewer.scene

scene.camera.setView({
  // 将经度、纬度、高度的坐标转换为笛卡尔坐标
  destination: new Cesium.Cartesian3(-2653915.6463913363, 3571045.726807149, 4570293.566342328),
  orientation: {
    heading: 2.1953426301495345,
    pitch: -0.33632707158103625,
    roll: 6.283185307179586
  }
})

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

---

 可以了，大哥喝茶！就是好像有点卡

<script>
console.log(window)
let Cesium = window.Cesium

export default {
  name: 'HelloWorld',
  mounted () {
    let viewer = new Cesium.Viewer('cesiumContainer')
    let scene = viewer.scene

    scene.camera.setView({
      // 将经度、纬度、高度的坐标转换为笛卡尔坐标
      destination: new Cesium.Cartesian3(-2653915.6463913363, 3571045.726807149, 4570293.566342328),
      orientation: {
        heading: 2.1953426301495345,
        pitch: -0.33632707158103625,
        roll: 6.283185307179586
      }
    })
  }
}
</script>