GitHub代码托管平台使用指南与最新功能解析-七爪网

在当今这个数字化的时代，GIS技术，即地理信息系统，在多个行业扮演着关键角色。不过，关于其开发阶段的关键技术和可能遭遇的难题，人们了解得并不多。这便是我们需深入研究的内容。

GIS组件开发的基础

现在构建四十余种常用GIS组件具有重大价值。比如在[某具体项目]里，地图模块中包含了丰富的精确地理信息。众多开发者根据实际需求对组件进行个性化调整。在实际开发过程中，运用Vue3与Vite的搭配，开发效率显著提升。以某公司的GIS开发项目为例，采用这种组合可以比传统方法减少大约30%的开发时长。

GIS组件的开发涉及多个模块，这些模块的需求各不相同。以场景模块为例，它需要考虑现实中的诸多因素，比如光照。比如在[某地区]的城市规划中，若忽视光照和阴影效果，场景展示将显得不真实。

# 安装依赖包
npm install
# 服务启动/平台启动
npm run dev

3DVis-Vue3总体架构解析

- public
	- app							// 与应用项目
	- config
		- baseConfig.js				// 地理资源配置文件，可配置影像、地形、模型等
		- UIConfig.js				// 组件的配置文件，控制加载、默认状态等行为
	- VGEEarth
		- Config
			- ImageLayerTimeLine	// 卷帘对比组件的配置文件
			- pathPlanning			// 路径规划组件的配置文件
			- plotTool				// 标绘工具组件的配置文件
			- skybox				// 天空盒组件的配置文件
		- Ext						// 其他第三方依赖库的路径
		- Src						// VGEEearhSDK 的路径
	- favicon.ico
- src
	- assets
	- components			// 开发者编写的第二次开发组件路径
	- plugin
	- router
	- store
	- VGEUtils				// GIS 相关组件	
	- App.vue
	- main.js
- index.html
- package.json

该架构由多个部分组成。最底层就像建筑的地基，而类库层和组件层则是核心所在。类库层负责的数据解析和分析，是整个系统的支柱。以某个GIS项目为例，其数据解析功能能够快速应对复杂数据。

组件层通过调用类库来执行特定功能。比如在一个应用案例中，组件层所采用的模块化组件保证了各自功能的独立运作。因此，在调整或更动某个特定功能时，不会对其他部分造成影响。

开发中的特殊规则

const baseConfig = {
    /** SDK 的版本号，可由开发者去自定义 */
    Version: string,
    /** SDK 的 Token，用于与后台服务进行通信 */
    Token: string,
    /** 业务系统的名称 */
    appName: string,
    /** 显示在浏览器上 Tab 栏上的系统名称 */
    appTitle: string,
    /** 业务系统的图标 */
    appIcon: string,
    /** 数字地球的默认启动视角 */
    homeView: {
        longitude: number,
        latitude: number,
        height: number,
        /** 弧度制 **/
        headingRadians?: number,
        pitchRadians?: number,
        rollRadians?: number
    },
    /** 是否显示从全球旋转然后推进到默认视角的加载动画 */
    startAnimation: boolean,
    /** 演示服务器 基础路径 */
    demoServerUrl: string,
    /** 系统后台服务 基础路径 */
    AppBaseUrl: string,
    /** 静态资源服务器 基础路径 */
    GISResourcesUrl: string,
    /** GIS资源配置：图层、地形、gltf模型、倾斜模型、矢量、兴趣点 */
    layerList: ResourceItem [],
    terrainList: ResourceItem [],
    modelList: ResourceItem [],
    cesium3DTileSetList: ResourceItem [],
    geoJsonList: ResourceItem [],
    poiList: ResourceItem []
};
VGEEarth.ConfigTool.loadConfig(baseConfig);

在软件开发阶段，确保不出现全局变量污染是一项关键规范。曾经，一个开发团队未能重视此点，导致多个功能出现混乱。而在另一个知名项目开发过程中，团队严格遵循了这一规范，结果项目得以稳定运行。

enum DataTypeEnum {
    layer = 'layer',
    terrain = 'terrain',
    gltf = 'gltf',
    Cesium3DTile = 'Cesium3DTile',
    geoJson = 'geoJson',
    water = 'water',
    poi = 'poi'
}
interface ResourceItem {
    pid: string,				// 资源项的 pid，如果不指定，将默认自动生成一个
    name: string,				// 资源项的名称
    catalog: string,			// 资源项所属的目录
    dataType: DataTypeEnum,		// 资源项的类型
    showInTree: boolean,		// 资源项是否会出现在资源数中
    defaultLoad: boolean,		// 资源是否默认加载
    /** 资源项的网络根路径 **/
    netRootPaths?: string[],
    /** 资源项是否开启 IndexedDB 缓存，如为 ture 则 netRootPaths 为必填项 **/
    offlineCache: boolean,
    /** 资源项的解码字符串 **/
    decryptionKey?: string,
    
    /** 为 Cesium 的默认参数。例如：
    1、当资源类型为 layer 时，properties 对应填写 new Cesium.ImageryLayer(imageryProvider, options)的 options 参数
    2、当资源类型为 terrain 时，properties 对应填写 new Cesium.Cesium3DTileset(options) 的 options 参数
    **/
    properties: any;			// 为 Cesium 的默认参数。例如
}

引入第三方库有它的技巧。通过index.html导入静态脚本文件，能带来不少便利。比如在某个大型开发项目中，这样做就解决了npm可能引发的版本不兼容等问题，还提升了项目的运行效率。

enum layerSchemeEnum {
    'layer-wms' = 'layer-wms',
    'layer-tms' = 'layer-tms',
    'layer-wmts' = 'layer-wmts',
    'layer-singleTileImagery' = 'layer-singleTileImagery',
    'layer-xyz-3857' = 'layer-xyz-3857',
    'layer-xyz-4326' = 'layer-xyz-4326',
    'layer-arcgisMapServer' = 'layer-arcgisMapServer',
    'layer-geoserver' = 'layer-geoserver',
    'IonImageryProvider' = 'IonImageryProvider'
}

二次开发的基础配置

{
    pid: 'f859bb06-68b3-aed9-f7c5-e85c0c544516',
    name: '高德电子地图',
    catalog: '基础数据',
    dataType: 'layer',
    showInTree: true,
    defaultLoad: true,
    properties: {
       scheme: 'layer-xyz-3857',
       url: 'http://webst04.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}'
    }
}

基础配置内容十分全面。它包括了项目运行所需的关键信息。比如，项目名称这一项，能帮助用户迅速辨认项目。以[某公司内部项目]为例，只需调整初始视角等参数，不同用户就能获得满意的视觉效果。

{
    pid: '5b1f7a60-3195-4b95-1916-6e87558145f2',
    name: '区域地形',
    catalog: '经典场景',
    dataType: 'terrain',
    default: false,
    properties: {
        scheme: 'CesiumTerrainProvider',
        url: 'https://127.0.0.1:3560/yuncs/dem'
    },
}

在配置过程中，对组件状态的调节至关重要。比如，当[某特定组件]状态发生变动时，所调用的函数便依照这些规则进行，确保其显示与隐藏状态的准确调整。

组件中的工具实现

interface Offset {
    lon: number,
    lat: number,
    height: number
}

实现工具功能涉及多道工序。必须添加特定的模板样式组件。举例来说，在编写[某文件的工具]时，加入样式模板组件，这样才能确保工具窗口的样式保持统一。

{
    name: '大雁塔',
    catalog: '三维模型',
    dataType: '3DTiles',
    properties: {
        url: 'https://127.0.0.1:3560/3DTIles/tileset.json',
        maximumScreenSpaceError: 2,
        offset: {
            height: 180
        }
    }
},

编写具体工具实现功能时，不同组件有其特定的注意事项。以fs-.vue文件为例，必须依据组件的具体功能需求细致入微地编写，绝不能草率行事。

/** 为 false 时，只将资源项显示在资源树中；为 true 时，直接加载上球，并显示在资源树中 **/
VGEEarth.ConfigTool.addOSMOnLine(false);
VGEEarth.ConfigTool.addMapBoxOnAliYun(false);
VGEEarth.ConfigTool.addBingMapOnIon(false);
VGEEarth.ConfigTool.addTerrainOnIon(false);
VGEEarth.ConfigTool.addTerrainOnAliYun(false);

视窗的自定义功能

用户能够通过视窗搭载的多个组件，享受到很高的操作自由度。他们可以随意调整工具和数据的布局，以满足个人需求。在[某GIS应用体验]中，这种灵活性受到了用户的高度赞扬。

this.$store.commit('setVGEEarthComAction', { name: 'areaNavigation', on_off: 2 });

用户自定义视窗主题UI颇具特色。然而，要找到对应的CSS文件进行修改并引入，并非易事。一位新手用户在尝试这一过程时，耗费了不少时间才成功找到正确的路径。

在此，我想请教众多读者，在GIS开发过程中，哪一部分让您感到最为棘手？衷心期望大家能参与到讨论中来。同时，还请为这篇文章点赞并转发，以便让更多的人认识到GIS组件的开发过程。

this.$store.getters.comStatus("areaNavigation")

{name: '洪水模拟', type: 'ToolBoxItem', open: false, comName: 'floodSimulation', config: {inToolBox: true, iconClass: 'fenxi'}},

相关文章

微信