代码拉取完成,页面将自动刷新
同步操作将从 地球可视化实验室(EarthSDK&CesiumLab)/EarthSDK-vue-cli-app 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
通过vue-cli创建项目,然后再基于EarthSDK创建地球。
如果是大型项目,可以参考这种方式来构建程序。
本项目,相当于在vue-cli的基础上做一些稍许修改,就可以加载EarthSDK了。
注意:该项目可以配置成使用纯Cesium开发,看说明文档最下方。
npm install
npm run serve
npm run build
npm run test
npm run lint
npm install copy-webpack-plugin
npm install earthsdk
// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: config => {
const cwp = new CopyWebpackPlugin([
{
from: './node_modules/earthsdk/dist/XbsjCesium',
to: 'js/earthsdk/XbsjCesium',
toType: 'dir'
},
{
from: './node_modules/earthsdk/dist/XbsjEarth',
to: 'js/earthsdk/XbsjEarth',
toType: 'dir'
},
]);
config.plugins.push(cwp);
}
}
<template>
<div style="width: 100%; height: 100%">
<div ref="earthContainer" style="width: 100%; height: 100%"></div>
<div style="position: absolute; left: 18px; top: 18px">
<button>{{ message }}</button>
</div>
</div>
</template>
<script>
// 1 创建Earth的vue组件
var EarthComp = {
data() {
return {
message: "页面加载于 " + new Date().toLocaleString(),
_earth: undefined, // 注意:Earth和Cesium的相关变量放在vue中,必须使用下划线作为前缀!
_bgImagery: undefined
};
},
// 1.1 资源创建
mounted() {
// 1.1.1 创建地球
var earth = new XE.Earth(this.$refs.earthContainer);
// 1.1.2 添加默认地球影像
earth.sceneTree.root = {
children: [
{
czmObject: {
name: "默认离线影像",
xbsjType: "Imagery",
xbsjImageryProvider: {
createTileMapServiceImageryProvider: {
url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
fileExtension: "jpg"
},
type: "createTileMapServiceImageryProvider"
}
}
}
]
};
this._earth = earth;
// 仅为调试方便用
window.earth = earth;
},
// 1.2 资源销毁
beforeDestroy() {
// vue程序销毁时,需要清理相关资源
this._earth = this._earth && this._earth.destroy();
}
};
export default EarthComp;
</script>
需要等待earthsdk载入以后(XE.ready()),再创建vue的示例(new Vue(...)),代码如下:
// 之前的代码注释掉
// new Vue({
// render: h => h(App),
// }).$mount('#app')
// 修改后的代码
function startup() {
new Vue({
render: h => h(App),
}).$mount('#app')
}
// 1 XE.ready()会加载Cesium.js等其他资源,注意ready()返回一个Promise对象。
XE.ready().then(startup);
找到public/index.html文件,做如下修改,即可使用纯Cesium进行开发。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。