首页 / 浏览问题 / WebGIS / 问题详情
有supermap cesium 和 vue-cli结合的示例吗
39EXP 2020年06月17日
有supermap cesium 和 vue-cli结合的示例吗,要在vue-cli中开发三维项目。

1个回答

<template>
  <div class="super">
    <div id="cesiumContainers" :style="styleObject">
    </div>
  </div>
</template>

<script>
var Cesium = window.Cesium
var smviewer = window.smviewer
var widget = window.widget
var scene = window.scene
var canvas = window.canvas
var json = require('./spuer.json')
var promiseSet = []
var hasInit = false
// var houseName = ''
export default {
  components: {
    // screen
  },
  mixins: [play],
  data: function () {
    return {
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    this.reloadInterval = setInterval(this.init, 1000)
  },
  destroyed () {
    hasInit = false
  },
  methods: {
    /**
       * 三维初始化
       * */
    init () {
      if (hasInit) {
        console.log('hasInit')
        clearInterval(this.reloadInterval)
        return
      }
      if (!Cesium || !Cesium.Viewer) {
        console.log('Cesium null')
        Cesium = window.Cesium
        return
      }
      smviewer = new Cesium.Viewer('cesiumContainers', {
        shadows: true
      })
      scene = smviewer.scene
      canvas = smviewer.canvas
      widget = smviewer.cesiumWidget
      var imageryLayers = smviewer.imageryLayers
      var baiduLayer = {}
      imageryLayers.addImageryProvider(baiduLayer)
      // 创建影像图层。打开地图
      var promise = smviewer.scene.open('http://www.supermapol.com/realspace/services/3D-OlympicGreenNight/rest/realspace')
      Cesium.when(promise, function (layers) {
        var x, y, z, heading, pitch, roll, up
        x = 113.290549; y = 23.370771; z = 2000.958422
        heading = 1.5; pitch = -1.5; roll = 0.1; up = 0.1
        // 设置地图镜头位置
        smviewer.scene.camera.setView({
          /* eslint-disable */
          destination: new Cesium.Cartesian3.fromDegrees(x, y, z),
          orientation:{
            heading: heading,
            pitch: pitch,
            roll: roll,
            up: up
          }
        })
      }, function (e) {
        if (widget._showRenderLoopErrors) {
          var title = '渲染时发生错误,已停止渲染。'
          widget.showErrorPanel(title, undefined, e)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #cesiumContainers{
    height: 97vh;
    z-index: 9999;
  }
</style>

详情见https://blog.csdn.net/u013517229/article/details/104752561?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

24EXP 2020年06月17日

按照示例做报这个错误:index.js?2711:1589 Uncaught (in promise) TypeError: Cesium.Viewer is not a constructor

...