SuperMap Vue2的开发案例

Supermap 的Vue版本这些组件怎么导入?

<template>
<sm-viewer>
</sm-viewer>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
//这个viewer 、Cesium 怎么导入?官方example都跑不起来
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation: {
heading: 1.4059101895600987,
pitch: -0.20917672793046682,
roll: 2.708944180085382e-13
}
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

回答

<template>
  <div>
    <div></div>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  mounted () {
    window.viewer = new Cesium.Viewer('cesiumContainer')
    let scene = window.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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}
</style>

THE END
分享
二维码
< <上一篇
下一篇>>