GAF“场景搭建“能力介绍
GAF"场景搭建"能力介绍
上一篇文章对GAF的服务管理进行详细介绍，接下来就介绍服务搭建场景的能力。
利用注册的GIS服务，通过流程化可视化的方式配置底图、资源目录、工具条、相机位置来搭建一个三维场景，并可实时预览查看效果，还可通过下载为前端工程以供二次开发，以此来简化GIS场景相关的开发。
场景搭建
在场景搭建功能中，预先在 服务管理 注册需要的各种类型的iserver服务，例如地图服务、三维服务、数据服务等，再在 按钮管理中 提前注册和修改好按钮，接着在地图应用管理中新增应用，通过配置底图、资源目录、工具条、相机视角完成场景配置，最后下载为前端工程，用于简化GIS场景相关的开发。
场景配置
在底图应用管理中，新增应用场景示例(scene_demo)。
底图配置
底图来源包括天地图或者自定义，底图包括三种类型：地形、影像、矢量。
若底图来源选择天地图，需要天地图浏览器端密钥，如下图。
若底图来源选择自定义，则可从已注册的地图服务中选择地形、影像、矢量。
资源目录配置
下一步，配置资源目录，即由各种地图服务、三维服务、影像服务等构成的目录树。可新建目录，组织服务的层级结构， 如下图。
工具条配置
工具条类型包含 业务工具条和基础工具条。
其中，业务工具条可配置空间分析、空间量算、空间操作等相关的按钮，包括天际线分析、坡度坡向分析、可视域分析、高度量算、面积量算、距离量算、剖切、压平等按钮。如下图。
基础工具条则可配置基础的按钮，包括鹰眼、缩小、放大、指北针等，如下图。
有些按钮需要配置json格式的参数，可参考GAF帮助文档-附录-按钮参数配置
相机配置
下一步，配置相机视角。通过左侧的场景预览界面，放大、缩小、移动、旋转等操作，调整相机位置后，通过视点拾取操作，得到相机的位置参数，包括经度、纬度、高度、朝向、倾斜度。如下图。
预览
完成配置，保存后，在地图应用管理界面，选择预览。
下载并启动前端工程
目录结构
在地图应用管理界面，下载配置好的地图应用并解压。前端工程目录结构如下图。
启动
**注意：**需要提前安装nodejs 16.13.2及以上、安装yarn1.22.5及以上、并配置好yarn和npm的仓库地址为https://nexus.gaf.net.cn/repository/npm-group
在前端工程根目录下， 安装依赖yarn install，然后使用在package.json中提前定义的脚本，执行yarn dev命令，本地启动并查看http://localhost:8080。
集成到前端模板工程
由于需要把搭建的场景集成到GAF，则需要把必要的文件复制到根据模板创建的前端工程，然后打包部署集成到GAF。
根据前端模板创建工程，使用如下命令生成前端工程. 注意：选择框架时选择 gaf-map-ui 框架 而不是gaf-ui框架。
npm config set registry https://nexus.gaf.net.cn/repository/npm-group
yarn global add @gaf/create-gaf-project
create-gaf-project extend1
子应用
extend1
extend1
10200
GAF MAP UI 框架
是
extend1
得到如下工程结构
前端基于Vue, Ant Design Vue, GAF-UI,微前端qiankun等技术栈
创建完成后，在src/pages目录下，创建文件夹SceneDemo，并复制scene_demo工程src文件夹下的App.vue到SceneDemo文件夹下，并重命名为index.vue。复制json文件夹到对应的SceneDemo文件下，如下图。
修改根据模板创建的前端工程中src/routes/index.js文件，增加页面路由地址/scene-demo，
{
path: '/scene-demo',
name: 'SceneDemo',
component: () => import(/* webpackChunkName: "about" */ '../pages/SceneDemo/index.vue')
}
启动根据模板创建的前端工程，
yarn install
yarn serve
访问新增的场景页面，http://localhost:10204/scene-demo，如下图
可根据实际情况进行二次开发和调试。
模板管理
模板管理包括应用模板、资源目录模板和工具条模板。 在场景搭建的过程中，可将配置的资源目录、工具条和应用保存为模板，可供下次场景搭建时使用。