注意在页面引入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>