EarthSDK使用指南6-APP创建模板介绍
2020-03-23 09:43:01
800次阅读
0个评论
最后修改时间:2020-03-23 15:35:20

前言


为了方便大家使用EarthSDK来创建三维APP,提供了一些方便使用的模板。


模板汇总


EarthSDK-simple-App


github地址:github.com/cesiumlab/Ea


这是一个最简单的模板,没有使用任何第三方库(例如webpack),主要目的是为了方便理解构建APP的过程。
可以使用npm全局安装http-server,来在本地查看该网页。
或者使用其他http服务器查看也是可以的。


EarthSDK-webpack-App


github地址:github.com/cesiumlab/Ea


这是一个基于webpack和npm创建的APP。通过webapck打包可以将文件进行压缩混淆,减少js文件的大小和加载时间,从而带来更好的浏览体验。 EarthSDK是通过npm install earthsdk的方式引入的,方便引入最新的EarthSDK。


调试时,需要执行 npm run dev 打包时,需要执行 npm run build


如果开发者,希望自行引入EarthSDK文件,也可以通过在根目录下建立Static目录,然后将EarthSDK文件放在此目录下来使用。


不过需要注意的是:此时调试执行 npm run dev2 ; 打包执行 npm run build2 。


EarthSDK-webpack-standalone-vue-App


github地址:github.com/cesiumlab/Ea


基于EarthSDK、webpack和vue创建的极简App,可以调试和打包。
其中Vue以独立的js文件从外部引入,而不是以.vue文件引入。
注意:小项目可以使用这种方式,比较省事,大型项目最好用Earth-webapck-vue-App或者Earth-vue-cli-App这两个项目来构建。
这个项目的缺点是,vue组件的创建,不能直接写xxx.vue文件,需要用js方式书写,类似下面这种形式:


// 1 创建Earth的vue组件
var EarthComp = {
    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>
    `,
    data() { 
        return {
            message: '页面加载于 ' + new Date().toLocaleString(),
            _earth: undefined, // 注意:Earth和Cesium的相关变量放在vue中,必须使用下划线作为前缀!
            _bgImagery: undefined,
        };
    },
    // ...
}

export default EarthComp;


EarthSDK-vue-cli-app 🚩


github地址:github.com/cesiumlab/Ea

通过vue-cli创建项目,然后再基于EarthSDK创建地球。
如果是大型项目,推荐参考这种方式来构建程序。
本项目,相当于在vue-cli的基础上做一些稍许修改,就可以加载EarthSDK了。

github上有对此项目的详细说明,可以参考下。


收藏 0 0

登录 后评论。没有帐号? 注册 一个。

西部世界

VIP会员 工作人员
  • 0 回答
  • 0 粉丝
  • 0 关注