earthSdk加载3D模型数据显示例子

注意在页面引入earthSdk 

<script src="http://earthsdk.com/v/last/XbsjEarth/XbsjEarth.js"></script>

<template>
  <div class="earthSdk" id="earthContainer"></div>
</template>

<script>
export default {
  data () {
    return {};
  },
  mounted () {
    this.mapInt();
  },
  methods: {
    mapInt () {
      const XE = window.XE;
      let earth;
      // var bgImagery;
      function startup () {
        // earth = new XE.Earth('earthContainer');
        // 初始化模型
        let earth = new XE.Earth('earthContainer', {
          // 这里设置Viewer的配置，和new Viewer(container, options)中的options一致
          homeButton: true,
          timeline: true,
        });
        console.log(earth, '-------');
        earth.sceneTree.root = {
          "title": "当前场景",
          "isSelected": true,
          "children": [{
            "czmObject": {
              "xbsjType": "Imagery",
              "enabled": true,
              "name": "谷歌影像",
              "show": true,
              "xbsjImageryProvider": {
                "XbsjImageryProvider": {
                  "url": "//www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
                }
              }
            }
          },
          {
            "czmObject": {
              "xbsjType": "Tileset",
              "name": "三维瓦片1x",
              "url": "http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json",
              "xbsjClippingPlanes": {},
              "xbsjUseOriginTransform": false, //是否启用原先的状态
              "skipLevelOfDetail": false
            },
            "ref": 'tileset'
          },
          ]
        };
        earth.sceneTree._$refs.tileset.czmObject.flyTo(); // 进入3D模型视角
      }
      console.log('earth', earth);
      // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
      XE.ready().then(startup);
    }
  }
}
</script>

<style lang="scss" scoped>
.earthSdk {
  width: 1000px;
  height: 600px;
  margin: auto;
  border: 1px solid #eee;
}
</style>