# 开发指南

# 项目模块

  • assets ------ 资源包
  • docs ------ 说明文档
  • examples ------ H5 示例资源
  • examples_other ------ Vue等其他前端示例资源
  • lib ------ gvolsdk包
  • index.html ------ 首页
  • package.json ------ package配置文件
  • server.cjs ------ 服务文件（自带的可以单独启动的服务）

# 引入SDK示例

# （一）H5 引入方式

  • 新建index.html页面；

  • 引入 Cesium.js 1.91版本，可以引入在线版js也可以下载Cesium官网js库手动引入；

  • 引入 lib中的geovisearth.sdk.js；

  • 初始化GVOL.Core.GvolEngine。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../lib/resources/gvolCesium/Widgets/widgets.css" rel="stylesheet">
<script src="../../lib/resources/gvolCesium/Cesium.js"></script>
<script src="../../lib/geovisearth.sdk.js"></script>
</head>

<body>
    <div id='GvolContainer'></div>
    <script>
        window.GVOL_BASE_URL = "/";
        let options = {
            baseLayerPicker: false
        };
        //初始化地球
        const CustomContainer = new GVOL.GvolEngine('GvolContainer', options, null);
    </script>
</body>
</html>

# （二）Vue 引入方式

  • 新建vue工程；

  • 将gvolsdk资源包中的：assets和lib放入vue工程中的public文件夹中；

  • 在public文件夹中主html页面里引入CesiumJs及widgets.css样式文件；

  • 在vue工程中初始化GVOL.Core.GvolEngine

  • （1）index.html部分：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../lib/resources/gvolCesium/Widgets/widgets.css" rel="stylesheet">
<script src="../../lib/resources/gvolCesium/Cesium.js"></script>
<script src="../../lib/geovisearth.sdk.js"></script>
</head>
 ………………
 ………………

</html>

  • (2)Vue部分

    <template>
<div id='GvolContainer'></div>
</template>

<script>
import * as Cesium from 'cesium'
import '@/public/static/geovisearth.sdk.js'
export default {
name: 'HelloWorld',
props: {
   msg: String
},
mounted: function () {    
   this.initViewer();
},
methods: {
   initViewer() {
   let mapToken = GVOL.Tool.TokenHelper.getGeovisDaasToken();
   //创建viewer实例
   var CustomContainer = new GVOL.GvolEngine('GvolContainer', {
       baseLayerPicker: false,
       imageryProvider: new Cesium.UrlTemplateImageryProvider({
       url: `https://tiles.geovis.online/base/v1/img/{z}/{x}/{y}?format=webp&`+mapToken
       })
   },null);
   },
}
}
</script>

← 接口概览 →