Skip to content

EarthSDK使用指南6 APP创建模板介绍

Jump to bottom
Tang Xiaofei edited this page Sep 23, 2019 · 3 revisions

EarthSDK使用指南6-APP创建模板介绍

前言

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

模板汇总

EarthSDK-simple-App

github地址：https://github.com/cesiumlab/EarthSDK-simple-App

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

EarthSDK-webpack-App

github地址：https://github.com/cesiumlab/EarthSDK-webpack-App

这是一个基于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地址：https://github.com/cesiumlab/EarthSDK-webpack-standalone-vue-App

基于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地址：https://github.com/cesiumlab/EarthSDK-vue-cli-app

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

Clone this wiki locally