gisinfo-gmap v5.1.1

GMap5接口详细设计文档

1. 坐标系说明

​ 超图框架目前根据调研和咨询：在球体场景下，只支持WGS84坐标系、CGCS2000 经纬度坐标系；在平面场景下只支持墨卡托投影。

​ ArcGIS开发框架目前针对上海本地坐标系做的开发，目前遇到的问题是图层加载需要跳过坐标验证才行，然后转换相机镜头还有问题。

2. 总体模块

3. 基础对象

为了提供统一的API，需要设计一套上层的抽象对象用来数据交互，包括图形对象、样式对象、图层对象。图形对象又包含点、线、面，屏幕坐标对象、几何体对象。样式对象包含点样式、面样式、线样式、标签样式、字体样式对象。图层对象是一个抽象对象，定义了一系列的行为包含了查询，加载，过滤，控制子图层的功能，每一种地图服务都是一个具体的实现类。

3.1 图形对象

​ 图形对象的设计以GeoJson 格式为基础，若要表示三维数据结构，则在二维的基础上加上z值，例如点的GeoJson格式如下：

{
    "type": "Point",
    "coordinates": [125.6, 10.1]
}

​ 三维坐标的话如下表示：

{
    "type": "Point",
    "coordinates": [125.6, 10.1, 0]
}

点线面同理，在创建图形对象的时候，需要将geoJson当作参数传入构造函数中，例如：

const point3D = new Point3D({
    "type": "Point",
    "coordinates": [125.6, 10.1, 0]
})

3.1.1 抽象类-Geometry

​ Geometry是一个抽象类，用于定义通用的对象行为，目前定义了两个个通用方法：

• getType：获取图形类型的方法，返回的对象是GeometryType(#7.1 图形对象-GeometryType)。

• toGeoJson：转换成geoJson的方法。

  抽象类结构如下：

interface Geometry {
		//获取图形类型
    getType(): GeometryType
		//转换成geoJson
    toGeoJson(): PolygonGeoJson|PolylineGeoJson|PointGeoJson
}

3.1.2 点-Point3D

三维点对象结构如下图，该对象继承了Geometry(#2.1.1 抽象类-Geometry)类

class Point3D {
  	x: number;
    y: number;
    z: number;
    spatialReference: any;
}

3.1.3 线-Polyline3D

三维线对象结构如下图，该对象继承了Geometry(#2.1.1 抽象类-Geometry)类

class Polyline3D {
  	points: Point3D[];
  	spatialReference: any;
}

3.1.4 面-Polygon3D

三维面对象结构如下图，该对象继承了Geometry(#2.1.1 抽象类-Geometry)类

class Polygon3D {
		points: Point3D[][];
		spatialReference: any;
}

3.1.5 几何体-IMesh

几何体类型由于存在多种情况，所以设计成抽象类，以便适配多种几何体，目前针对盒子、圆柱、平面、球体、模型等三维物体情况设计了方法、具体的几何体的则由各个实现类去适配。

interface IMesh extends Geometry
{		
  	//几何体类型
    type: string
	
  	//三维盒子类型
    createBox()
		
		//圆柱
    createCylinder()
		
  	//平面
    createPlane()
	
  	//球体对象
    createSphere()
		
  	//模型对象
    creatModel()
}

3.1.6 屏幕对象-Pixel

class Pixel {
  x: number;
  y: number;
}

3.1.7 范围-Extent

class Extent  {
    //超图环境中--最西的经度，以弧度表示，在[-Pi，Pi]范围内。
    xmin: number;
  	//超图环境中--以弧度表示的最南端的纬度，范围为[-Pi/2，Pi/2]。
    ymin: number;
  	//超图环境中--最东经度，以弧度表示，在[-Pi，Pi]范围内。
    xmax: number;
  	//超图环境中--最北端的纬度，以弧度表示，范围为[-Pi/2，Pi/2]。
    ymax: number;
}

3.2 样式对象-Style

​ 通用样式作为所有样式的父类，抽象出通用的属性：颜色、类型、扩展属性。类型字段的主要作用在于针对不同厂家的GIS产品样式对象结构是不一致的，种类也是不一致的。所以通过type字段标识出这是哪种产品的类型对象，方便用来转换，options是用来存储扩展属性的，一些无法抽象出的属性统一存入该属性

interface Style {
  //颜色
	color?: string;
  //类型
	type: string;
  //扩展属性
	options?: any;
}

下面描述超图和arcgis两种GIS产品下type对应原生对象：

3.2.1 文本样式

​ 文本样式用来定义文字的颜色、字体大小等样式属性，继承通用Style(#3.2 样式对象-Style)对象。

interface LabelStyle extends Style {
	type: string;
	//字体
	font?: Font;
	//大小，超图则对应scala
	size?: number;
	//字的颜色
	color?: string;
	//背景色
	bgColor?: string;
	//文本
	text?: string;
	//外边框颜色
	outlineColor?: string;
	//外边框宽度
	outlineWidth?: number;
	//偏移
	offset?: Array<number>;
	//额外属性
	options?: any;
}

3.2.2 点样式

点样式用来定义点的渲染样式，继承通用Style(#3.2 样式对象-Style)对象。

interface PointStyle extends Style {
  //点类型
	type: string;
  //大小
	size: number;
  //颜色
	color?: string;
  //边框颜色
	outlineColor?: string;
  //边框宽度
	outlineWidth?: number;
  //额外属性
	options?: any;
}

3.2.3 线样式

线样式用来定义线的渲染样式、继承通用Style(#3.2 样式对象-Style)对象。

interface PolylineStyle extends Style {
  //线类型
	type: string;
	//线条宽度
	width: number;
	//线条颜色
	color: string;
	//是否边框
	outline?: boolean;
	//边框颜色
	outlineColor?: string;
	//边框宽度
	outlineWidth?: number;
  //额外属性
	options?: any;
}

3.2.4 面样式

面样式用来定义面的渲染样式、继承通用Style(#3.2 样式对象-Style)对象。

interface PolygonStyle extends Style {
  //面样式
	type: string;
  //是否填充
	fill?: boolean,
	//颜色
	color: string;
	//是否外边框
	outline?: boolean;
	//边框颜色
	outlineColor?: string;
	//边框宽度
	outlineWidth?: number;
	//填充的图片
	fillImage?: string;
	//额外属性
	options?: any;
}

3.2.5 标签样式

标签样式用来定义图片的渲染样式。目前只支持PNG格式的图片。

interface MarkStyle extends Style {
	type: string;
	//图片路径
	image?: string | HTMLCanvasElement;
	//颜色
	color?: string;
	//比例尺
	szie?: number;
	//旋转角度
	angle?: number;
	//宽度
	width?: number;
	//高度
	height?: number;
	//偏移
	offset?: Array<number>;
	options?: any;
}

3.2.6 通用样式

通用样式是用来定义Mesh图形的的，但不包含全部的样式。

interface CommonStyle extends Style {
	//是否填充
	fill?: boolean;
	//素材
	material?: any;
	//外部边框
	outline?: boolean;
	//外部颜色
	outlineColor?: any;
	//边框宽度
	outlineWidth?: number;
}

3.3 图层对象-ILayer

​ 图层对象是对原始图层对象的一层封装，目的是希望能方便扩展各种图层的支持，图层管理组件的工作尽量通用，减少代码的变更。而具体对地图服务的操作放到图层实现类中。具体的实现类如下：

interface ILayer{
    
    /**
     * 图层初始化，加载前的预处理
     * @param options 图层初始化参数，至少包含id,type,url等属性，具体参数由实现类决定。格式如下，
     * {
     *  "id":"layer-a10ce81b7a1", //图层ID，唯一即可
     *  "type":"TileSuperMapRest",//图层类型
     *  "url":"http://192.168.0.190:8090/iserver...", //图层服务地址
     *  ...
     * }
     */
    init(options?:any):void;

    /**
     * 获取图层ID
     */
    getId():string;

    /**
     * 设置图层ID
     * @param id 图层ID
     */
    setId(id:string):void;

    /**
     * 加载图层
     * @param view 地图对象
     * @param options 可见，子图层。。。
     */
    load(view:any,options?:any):Promise<boolean>;

    /**
     * 移除图层
     * @param view 地图对象
     */
    remove(view:any):Promise<boolean>;
    
    /**
     * 重新加载
     * @param options 
     */
    reload(options?:any):Promise<boolean>;

    /**
     * 监听图层相关事件
     * @param type 事件类型，不做要求由实现类自定义
     * @param options 可选参数
     */
    on(type:string,options?:any):Promise<{}>;

    /**
     * 显示图层或子图层
     * @param options 子图层参数
     */
    show(options?:any):void;

    /**
     * 隐藏图层或子图层
     * @param options 子图层参数
     */
    hide(options?:any):void;

    /**
     * 过滤图层要素
     * @param condition 过滤条件
     * @param options 子图层参数
     */
    filter(condition:any,options?:any):Promise<boolean>;

    /**
     * 自定义图层渲染样式
     * @param options 渲染参数
     */
    render(options?:any):Promise<boolean>;

    /**
     * @param type 查询类型
     * @param options 查询条件
     * @param resultOptions 设置查询结果，比如统计，返回图形等
     */
    query(type:string,options:any,resultOptions:any):Promise<{}>;

    /**
     * 获取图例
     * @param options 子图层参数
     */
    getLegend(options?:any):Promise<any[]>;

    /**
     * 设置透明度
     * @param opacity 透明度
     * @param options 子图层参数
     */
    setOpacity(opacity:number,options?:any):Promise<any>;

    /**
     * 获取透明度
     * @param options 子图层参数
     */
    getOpacity(options?:any):number;

    /**获取图层地址 */
    getUrl():string;

    /** 获取图层类型 */
    getType():string;

    /** 获取原始图层对象*/
    getOriginalLayer():any;

    /** 获取图层所有可以提供的参数*/
    getOptions():any;

    /**获取图层可见信息，含子图层 */
    getVisibleInfo():any;

    /**
     * 子图层重排序
     * @param options 子图层顺序信息
     */
    reorderSubLayer(options:any):Promise<boolean>;

    /** 获取子图层信息  */
    getSublayerOptions():any;

    /** 获取图层状态  */
    getState():string;
}

3.3.1 GMAP图层对象

由于目前只适配超图和ArcGIS，所以下面列出对这两种产品地图服务的封装对象清单与映射关系：

超图环境下：

ArcGIS环境下：

使用图层对象示例：

const tileSuperMapRest = new GMAP.Layers.TileSuperMapRest({url, type, id})

3.3.2 图层类型

图层类型是从业务和作用角度设计的，分为底图图层、操作图层、本地图层

3.3.3 图层元数据

图层元数据对象是对图层的描述信息，包括了图层本身对象，还有图层处于地图的顺序，和图层类型：

class LayerInfo{
  	 //图层ID
     id:string;
  	 //图层实体
     layer:ILayer;
  	 //扩展信息
     options:any;
  	 //图层顺序
     index:number;
  	 //图层类型
     type: string;
}

3.3.4 子图层对象

子图层对象是针对图层对象来说的，一般情况下地图服务是拥有多个子图层的。由于当地图加载地图服务的时候，子图层有时候不需要全部显示，所以需要额外的对象来对子图层的进行管理：

const subLayerInfo = {
  //子图层序号
	id:string, 
  //名称
  name:string,
  //子图层顺序
  index string:
}

4. 图层管理

4.1 图层管理

​ 图层管理负责物理图层的管理。负责将抽象图层转换到物理图层，并处理物理图层的加载、排序、透明度等功能，通过图层管理类能够知道当前打开的物理图层有多少，当前图层的打开顺序等。

const layerManager = gmap.Layers.LayerManager

4.1.1 添加图层

layerManager.addLayer(layer: ILayer, type: string, visible?: boolean, subLayerInfo?: any): Promise<object> 

功能描述：添加图层对象到地图上，并控制图层的现实。

参数描述：

结果描述：返回promise对象，当图层加载完毕 ,则异步返回{"success":true,"msg":""} ，出错则异步返回{"success":false,"msg":""}

4.1.2 修改图层可见行

layerManager.changeLayerVisibility(id: string, visible: boolean, subLayerInfo?: any): Promise<{}> 

功能描述：根据图层ID调整图层是否可见或者不可见

参数描述：

结果描述：返回promise对象，完成操作后 ,则异步返回{"success":true} ，出错则异步返回{"success":false}

4.1.3 修改图层透明度

layerManager.changeLayerOpacity(id: string, opacity: number, subLayerInfo?: any): Promise<{}> 

功能描述：根据图层ID调整图层的透明度

参数描述：

结果描述：返回promise对象，完成操作后,则异步返回{"success":true} ，出错则异步返回{"success":false}

4.1.4 移除图层

layerManager.removeLayer(id: string): Promise<ILayerInfo>

功能描述：删除一个图层组里的节点

参数描述：

结果描述：返回promise对象，异步返回图层元信息

4.1.5 获取图层

layerManager.getLayer(id: string): ILayer

功能描述：根据图层ID获取图层对象

参数描述：

结果描述：返回ILayer对象

4.1.6 获取图层元信息

 layerManager.getLayerInfo(id:string):ILayerInfo

功能描述：获取已加载到地图的图层元信息，图层元信息请参考3.3.3 图层元数据(#3.3.3 图层元数据)

参数描述：

结果描述：返回ILayerInfo(#3.3.3 图层元数据)对象

4.1.7 获取可见图层信息

  layerManager.getAllVisibleLayerInfo():ILayerInfo[]

功能描述：该接口无需参数，返回地图全部的可见图层列表

结果返回：返回ILayerInfo(#3.3.3 图层元数据)对象列表，顺序与当前地图加载顺序一致

4.1.8 获取全部图层信息

 layerManager.getAllLayerInfo():ILayerInfo[]

功能描述：该接口无需参数，返回图层管理的全部图层列表

结果返回：返回ILayerInfo(#3.3.3 图层元数据)对象列表

4.1.9 是否图层存在

 layerManager.layerExists(id:string):boolean

功能描述：根据图层ID判断是否已经添加地图服务，该服务可能处于加载中状态

参数描述:

结果返回：返回true 则代表存在或者加载中，false 代表不存在

4.2 图层组管理

​ 图层组管理主要是用来管理一组树状结构的工具，在业务上，图层往往是分类的，而这种分类根据业务视角不同，会形成不同的树状结构的图层组，因此，为了方便管理多个图层组的信息，特意出相处图层组管理模块。

​ 图层组由于是一个树，因此定义成如下结构类型：

{
  "id":"",            //节点ID
  "name":"",          //节点名称
  "subItem":[
    {        //子节点
      "id":"",        
      "name":"",      
      "layers":[options]  //图层参数
      "options":{}    
  	}
  ], 
  "options":{}        //节点扩展参数
}

获取方式:

const layerManager = gmap.Layers.LayerManager;
const layerGroupManager = new gmap.Layers.LayerGroupManager(layerManager, "oplayer");

​ 构造函数中 第一个参数是图层管理对象，第二个参数则是标明这个图层组管理负责的是什么图层类型的服务

4.2.1 添加图层组

 layerGroupManager.addTree(tree:any):boolean;

功能描述：将一个完整的图层树添加到图层组中，该图层组将会挂接到顶级分组节点root上

参数描述：tree 是一个完整的图层组对象，结构如下

{
  "id":"",            //节点ID
  "name":"",          //节点名称
  "subItem":[
    {        //子节点
      "id":"",        
      "name":"",      
      "layers":[Ilayer,Ilayer]  //图层参数
      "options":{}    
  	}
  ], 
  "options":{}        //节点扩展参数
}

节点类型包含了三个属性：id 全局唯一、name 节点名称、options：属性信息。如果是叶子节点，则还包含图层列表信息。图层信息请参考3.3图层对象(#3.3 图层对象-ILayer)，其他节点当有子节点时则包含subItem属性

结果描述：true表示添加成功，false 表示添加失败

4.2.2 添加节点

layerGroupManager.addNode(id:string,name:string,parentId:string,options?:any):boolean;

接口描述：添加分组，顶级分组的id是root,已内置。 包含图层的叶子分组不允许添加子分组。 除顶级分组外，其他分组需指定父分组ID

参数描述：

结果描述：true表示添加成功，false 表示添加失败

4.2.3 获取节点信息

 layerGroupManager.getNodeOptions(id:string):any;

接口描述：每个节点都附带了属性信息，通过该方法可以获取节点的属性信息

参数描述：

结果描述：返回节点的options信息

4.2.4 删除节点

  layerGroupManager.removeNode(id:string):boolean;

接口描述：从图层组中移除节点信息

参数描述：

返回结果：true表示成功，false 表示失败

4.2.5 更新节点

 layerGroupManager.updateNodeOptions(id:string,options:any):boolean;

接口描述：该接口主要用来维护options的信息

参数描述：

返回结果：true表示成功，false 表示失败

4.2.6 绑定图层信息

layerGroupManager.addLayerInfo(id:string,layers:any[]):boolean;

接口描述：该功能是给树的叶子节点绑定图层信息，使之成为图层列表

参数描述：

返回结果：true表示成功，false 表示失败

4.2.7 移除图层绑定

  layerGroupManager.removeLayerInfo(id:string):boolean;

接口描述：该接口允许针对一个图层节点移除图层信息

参数描述：

返回结果：true表示成功，false 表示失败

4.2.8 修改图层节点透明度

 layerGroupManager.changeLayerNodeOpacity(id:string,opacity:number):boolean;

接口描述：修改此分组下所有图层的透明度

参数描述：

返回结果：true表示成功，false 表示失败

4.2.9 图层节点可见控制

 layerGroupManager.changeLayerNodeVisibility(id:string,visible:boolean):boolean;

接口描述：修改此分组下所有图层是否可见

参数描述：

返回结果：true表示成功，false 表示失败

4.2.10 移动图层节点

layerGroupManager.moveNode(id:string,parentId:string,order:number):boolean;

接口描述：移动节点到指定分组下

参数描述：

返回结果：true表示成功，false 表示失败

4.2.11 遍历图层树

layerGroupManager.forEach(id:string,callback:Function):void;

接口描述：遍历指定节点下的全部子节点，并执行回调方法

参数描述：

5. 查询分析

5.1 空间查询

​ 空间查询工具类用来提供访问地图数据。完整的空间查询分为四个阶段，分别是：1. 在地图上绘制图形，2. 根据图形查询指定的图层，3. 查询出的结果进行格式化和翻译，4. 渲染查询到的结果。而其中根据业务需要 2和3是需要独立出来使用的，因此根据这种设计，抽象出了四个查询接口：绘点查询、点查询、绘面查询、面查询，下面会一一介绍。查询API的获取如下方式：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取查询工具
const spatialQuery = gmap.Query.spatialQuery;

5.1.1 绘点查询

spatialQuery.drawPointQuery(distance?: number): Promise<Result>;

接口描述：绘点查询包含了空间查询的完整步骤即从绘图到结果返回，设计思想是调用该接口后，需要鼠标在地图上选点，然后将该点的坐标进行缓冲成圆，缓冲的半径由参数指定。将圆与当前地图可见图层按照顺序进行空间查询，当在一个图层上查到数据后，就不再继续查询，如果没有查到数据，则继续查询下面的图层，直到查到数据为止。

参数描述：

结果描述：

结果采用异步返回，当查询结束后，可以根据如下方法获取查询结果：

spatialQuery.drawPointQuery(100).then(result => { console.info(result)})

result结构如下:

[
  {	
    //有数据的图层
    layer:{
      //图层ID
      id: string
      //图层名称
      name: string
    },
    //查询到的结果
    result: [
      {
        //图形对象，geoJson格式
        geometry: geoJson,
        //属性信息
        attributes:[{key:string, name: string, value: number, translate: string }, ...]
      },
      ...
    ]
  }
]

因为缓冲查询查询图层有可能会查询到多个图层的多个图斑，因此返回结果设计成一个数组。每个地块包含两部分信息，geometry-图形，attributes-属性，其中attributes是个数字格式，里面存储的每个属性的信息。如没有查询到数据，则结果为[] ,空的数组，具体字段描述见下表：

layer结构描述：

每个地块的结果描述如下

5.1.2 点查询

spatialQuery.queryPoint(point?: Point3D, distance?: number, layers?: string[], wheres?:{}): Promise<Result>;

接口描述：该接口与绘点查询的区别在于，只负责图层查询的第二个步骤和第三个步骤，不负责点的绘制和渲染。绘制和渲染全部交由外部处理。因此需要传点，图层数组和条件，返回的是全部的结果。这个结果是图层上的数据和他相关联的属性表数据的综合信息，这个接口主要用于业务上的查询。

参数描述：

结果描述：

查询结果请参考5.1.1 绘点查询(#5.1.1 绘点查询)的结果描述，两者是一样的

5.1.3 绘面查询

  spatialQuery.drawPolygonQuery(): Promise<Result>

接口描述：这个接口与绘点查询一样，需要在地图上绘制一个面，然后进行空间查询。

结果描述：

查询结果请参考5.1.1 绘点查询(#5.1.1 绘点查询)的结果描述，两者是一样的

5.1.4 面查询

 queryPolygon(polygon?: Polygon3D, layers?: string[], where?:{})

接口描述：该接口接收一个面对象，和图层列表，以及额外的条件信息，用于批量的查询图层数据。功能与点查询接口相似。

参数描述：

结果描述：

查询结果请参考5.1.1 绘点查询(#5.1.1 绘点查询)的结果描述，两者是一样的

5.2 空间定位

​ 空间定位有两种方式，一种是已知的图形，需要渲染到地图上，还一种是已知的业务条件，需要去查询图形信息，在渲染到地图上。具体使用API方式如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取查询工具
const spatialLocate = gmap.Query.spatialLocate;

5.2.1 空间定位

spatialLocate.locateGeometry([{geometry: Geometry, style?: Style}], isBlink?): void;

接口说明：空间定位支持批量的将已知图形渲染到地图上;

参数描述:

接口需要的参数是一个数组，数组里每一项包含了geometry--图形，style--样式。具体描述如下：

5.2.2 条件定位

spatialLocate.locateWithQuery([{layer: string, where: string, style?}], isBlink?): void

接口说明：根据业务条件进行空间查询后，在进行定位。

参数描述:

接口需要的参数是一个数组，数组里每一项包含了layer--图层ID，condition- 查询条件，style--样式。具体描述如下：

6. 地图操作

6.1 基础操作

​ 基础操作是表示地图的视角操作，包括放大缩小平移等。获取基础操作API的方式如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取操作工具
const operateUtils = gmap.Operates.OperateUtils;

6.1.1 切换二三位视角

operateUtils.switchView(viewType: string)

接口说明：这个接口是用来切换

接口描述：

6.1.2 放大缩小

operateUtils.goTo(amount: number)

接口说明：用来控制地图的放大缩小

参数说明：

6.1.3 获取当前范围

operateUtils.getCurrentExtent(): Extent

接口说明：用来获取当前地图范围

结果返回：返回四至对象，请参考Extent(#3.1.7 范围-Extent)说明

6.1.4 获取当前角度

operateUtils.getCurrentExtent():{fov, heading, tilt}

接口说明：返回当前相机的角度，该方法只有在三维场景下才有

结果返回：结果返回为一个JSON对象包含fov, heading, tilt 三个属性，fov： 相机旋转角度，单位为弧度， heading: 相机方位角，单位为弧度, tilt: 相机的俯仰角，单位为弧度。

6.1.5 地图旋转

operateUtils.rotateMap(angle: number)

接口说明：对地图进行旋转

参数说明：

6.1.6 全景

operateUtils.setFullScreen()

接口说明：地图恢复到全景状态，全景从配置中获取，注意：超图和arcgis的全景配置是不同的

6.1.7 禁止地图旋转

operateUtils.disableRotateMap(disable: boolean)

接口说明：在编辑图形的一些业务场景下，地图需要禁止移动，使鼠标能够操作图形，这里提供参数用来恢复地图的移动和禁止地图的移动

参数说明：

6.1.9 设置相机

operateUtils.setCamera(options: any)

接口说明：设置相机范围

参数说明：

options参数是一个json对象，具体结构如下：

6.1.10 重置相机

operateUtils.resetCamera()

接口说明：重置相机的初始化视角、这块视角是从配置中读取

6.1.11 平移

operateUtils.pan(options: PanOptions)

接口说明：对地图进行平移转换，⚠️ 该接口在ArcGIS与 超图环境下 参数不一致

接口参数：

6.1.12 缩放到指定范围

  operateUtils.zoomTo(target: Geometry)

接口说明：将地图缩放到指定图形范围

接口参数：

6.2 飞行操作

飞行操作是用来控制相机做飞行效果的工具类， 飞行API如下方式获取：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取飞行工具
const flyUtils = gmap.Operates.FlyUtils;

6.2.1 开始飞行

flyUtils.fly(line: Polyline3D)

接口描述：相机根据指定的路径开始移动

参数描述：

6.2.2 暂停飞行

flyUtils.pauseFly(time?: number)

接口描述：暂停相机移动，并且可以指定暂停时间

参数描述：

6.2.3 继续飞行

flyUtils.continueFly() 

接口描述：让相机继续飞行

6.2.4 结束飞行

flyUtils.stopFly()

接口描述：结束相机飞行

7. 通用工具

7.1 DOM工具

将一段HTML元素绑定到地图的固定点上，位置随着地图移动而变动，而不是悬浮在页面上。调用方式：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取DOM工具
const domUtils = gmap.Tools.DomUtils;

7.1.1 添加HTML元素

 domUtils.appendHTMLtoViewer(html: HTMLElement, opt: Opt): string

接口描述：将HTML加入到地图里面。

参数描述：

返回结果：返回唯一标识。用来后续针对该HTML的操作

7.1.2 移除元素

 domUtils.removeHTMLbyId(id: string): void

接口描述：根据ID删除

参数描述：

7.2 绘图工具

绘图工具是基础的绘图工具，不负责其他业务处理，只负责绘图并返回结果，获取如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取绘图工具
const drawUtils = gmap.Tools.DrawUtils

7.2.1 获取绘图工具

const handler = drawUtils.getDrawHandler(type: DrawType, mode?: DrawMode, drawStyle?: Style) 

接口描述：获取绘图操作对象。

参数描述：

7.2.2 激活绘图状态

handler.activate()

接口说明：激活handler的绘图状态，使之能够绘图

7.2.3 监听开始绘图事件

handler.onStartDraw(callback: (isActive: boolean) => void)

接口说明：该方法用来监听绘图开始事件

7.2.4 监听鼠标移动事件

handler.onMovingDraw(callback: (windowPosition: Pixel) => void)

接口说明：该方法用来监听鼠标移动事件

7.2.5 监听选点事件

handler.onPickPoint(callback: (geometry: Geometry) => void)

接口说明：该方法用来监听选点事件

7.2.6 监听绘图结束事件

handler.onEndDraw(callback: (geometry: Geometry) => void)

接口说明：该方法用来监听监听绘图结束事件

7.2.7 绘图结束

handler.deactivate()

7.2.8 绘图清除

handler.clear()

接口说明：该方法用来清除绘图

7.3 测量工具

测量目前主要用来测量地图的长，面积、高度。获取API方法如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取测量工具
const measureUtils = gmap.Tools.MeasureUtils

7.3.1 地图取点

measureUtils.measuerPosition(option: any = {})

接口说明：该方法用来在地图上取个点，然后展示坐标。

option参数说明：

7.3.2 测量线

measureUtils.measureDistance(option: any = {})

接口说明：该方法用来测量线的长度。

option参数说明：

回调函数的参数说明：

realtimeCallback = ({
    positions: Array<Point3D>,
    distances: Array<number>,
    id: string,
  	sum: length
}) => {}

7.3.3 测量面

measureUtils.measureArea(option: any = {})

接口说明：该方法用来测量面的面积。

option参数说明：

回调函数的参数说明：

realtimeCallback = ({
    positions: Array<Point3D>,
    area: number,
    id: string
}) => {}

7.3.4 测量高

measureUtils.measureHeight(option: any = {})

接口说明：该方法用来房屋的高度。

option参数说明：

回调函数的参数说明：

realtimeCallback = ({
  positions: Array<Point3D>,
    distanceD: number, // 控件距离
    distanceV: number, // 水平距离
    distanceH: number //垂直距离
    labelPosition: {
        labelPositonD: Point3D,
        labelPositonV: Point3D,
        labelPositonH: Point3D,
    }
}) => {}

7.4 图形工具

图形工具用来管理外部添加的图形，获取方法如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取绘图工具
const graphicUtils = gmap.Tools.GraphicUtils

7.4.1 添加图片

graphicUtils.addMark(position: Point3D, style?: MarkStyle): Graphic

接口说明：在指定位置增加图片

参数说明：

Graphic结果说明：

7.4.2 添加文本

graphicUtils.addLabel(position: Point3D, style: LabelStyle): Graphic

接口说明：在指定位置添加文本

参数说明：

结果说明：请参照7.4.1 添加图片(#7.4.1 添加图片)中Graphic的结构

7.4.3 添加模型

graphicUtils.addModel(opt: IMesh, style?: Style): Graphic

接口说明：将模型对象添加到地图中

参数说明：

结果说明：请参照7.4.1 添加图片(#7.4.1 添加图片)中Graphic的结构

7.4.4 添加点

graphicUtils.addPoint(position: Point3D, style: PointStyle): Graphic

接口说明：将点对象添加到地图中

参数说明：

结果说明：请参照7.4.1 添加图片(#7.4.1 添加图片)中Graphic的结构

7.4.5 添加线

graphicUtils.addPolyline(polyline: Polyline3D, style: PolylineStyle): Graphic

接口说明：将线对象添加到地图中

参数说明：

结果说明：请参照7.4.1 添加图片(#7.4.1 添加图片)中Graphic的结构

7.4.6 添加面

graphicUtils.addPolygon(polygon: Polygon3D, style: PolygonStyle): Graphic

接口说明：将面对象添加到地图中

参数说明：

结果说明：请参照7.4.1 添加图片(#7.4.1 添加图片)中Graphic的结构

7.4.7 高亮图形

graphicUtils.hightLight(id: String, style?: Style): void

接口说明：将图形进行高亮显示

参数说明：

7.4.8 闪烁图形

graphicUtils.blinkShape(id: String, times?: number, style?: Style): void

接口说明：让图形进行闪烁

参数说明：

7.4.9 删除图形

graphicUtils.removeGrahpic(id: string): void

接口说明：从图层中移除图形

参数说明：

7.4.10 绑定点击事件

graphicUtils.bindClickEvent(id: string, clickFunction:function): void

接口说明：针对一个图形，绑定它的点击事件，一个图形只能绑定一个事件，因此新的事件会替换旧的事件

参数说明：

7.4.11 清除点击事件

graphicUtils.removeClickEvent(id: string): void

接口说明：针对一个图形，移除它的点击事件

参数说明：

7.5 编辑工具

编辑工具用来在线编辑点线面，获取API如下：

//创建地图对象
const gmap = new GMAP.Viewer();
//初始化
gmap.initMap(options);
//获取编辑工具
const editUtils = gmap.Tools.EditUtils

7.5.1 编辑点

editUtils.editPoint(point: Point3D, style?: PointStyle, mode?: DrawMode): IEditHandler;

接口描述：接口允许在地图上拖动点的位置，以达到编辑的目的

参数说明：

结果说明：

返回结果是一个IEditHandler对象，该对象才是一个真正的编辑对象，需要调用他的方法来出发编辑操作，具体描述请参考7.5.4 编辑手柄(#7.5.4 编辑手柄)

7.5.2 编辑线

editPolyline(polyline: Polyline3D,  style?: PolylineStyle, mode?: DrawMode): IEditHandler

接口描述：接口允许在地图上拖动点的位置，以达到编辑的目的

参数说明：

结果说明：

返回结果是一个IEditHandler对象，该对象才是一个真正的编辑对象，需要调用他的方法来出发编辑操作，具体描述请参考7.5.4 编辑手柄(#7.5.4 编辑手柄)

7.5.3 编辑面

editPolygon(polygon: Polygon3D,  style?:PolygonStyle, mode?: DrawMode): IEditHandler

接口描述：接口允许在地图上拖动点的位置，以达到编辑的目的

参数说明：

结果说明：

返回结果是一个IEditHandler对象，该对象才是一个真正的编辑对象，需要调用他的方法来出发编辑操作，具体描述请参考7.5.4 编辑手柄(#7.5.4 编辑手柄)

7.5.4 编辑手柄

interface IEditHandler {

     /**
     * 激活编辑
     */
    activate(): void

    /**
     * 取消编辑,并清除图形
     */
    deactivate(): void,

    /**
     * 移动画笔事件
     * @param callback
     */
    onMovingEdit(callback: (windowPosition: Pixel) => void): void,

    /**
     * 开始画图事件
     * @param callback
     */
    onStartEdit(callback: (isActive: boolean) => void): void

    /**
     * 结束编辑事件
     * @param callback
     */
    onEndEdit(callback: (geometry: Geometry) => void): void

}

8. 基础模块

8.1 日志打印

gmap.logger.info(message);
gmap.logger.error(message);
gmap.logger.warn(message);
gmap.logger.debug(message);

8.2 获取配置

gmap.configManager.getXXX()

8.3 网络请求

//get请求
gmap.netManager.get(url: string, params?: object, 
                    options?: {timeout: number, headers: { "Content-Type": string }}):Promise<any> 
//post请求
gmap.netManager.post(url: string, params?: object,
                    options?: {timeout: number, headers: { "Content-Type": string }}):Promise<any> 

8.4 缓存获取

//会话缓存
let cache = gmap.cacheManager.getSessionCache();
//永久缓存
cache = gmap.cacheManager.getCache();
//缓存信息
cache.set(key, options)
//获取缓存
cache.get(key, default)
//移除缓存
cache.remove(key)
//清除缓存
cache.clear()

8.5 注册微件

gmap.component.registerComponent({
		code: string,   //组件代码
    state?: string, //组件初始化状态 open、close、min
    title: string,  //组件名称
    component?: Vue, //vue对象
 })

8.6 获取微件

gmap.component.findComponentByCode(code):Map

9. 地图初始化

<script src="./lib/gmap5.umd.js"></script>
<div id="cesiumContainer"> </div>
<script>
  const gmap = new GMAP.Viewer();
  gmap.initMap({dom:"cesiumContainer",lib:{
    	url:"http://qiuwei.xyz:8080/Cesium/Cesium.js",
    	css:"http://qiuwei.xyz:8080/Cesium/Widgets/widgets.css",
    	type: GMAP.Enum.GisEnum.SuperMap
  }});
</script>

10. 枚举

10.1 绘图类型

enum DrawType {
	//点
  Point,
  //线
  Polyline,
  //面
  Polygon,
  //标签
  Marker,
  //范围
  Extent
} 

使用方法：

const drawType = GMAP.Enum.DrawType

10.2 绘图模式

enum DrawMode {
  Space,   //空间模式,默认模式
  Ground,  //贴地模式，即画的点线面会贴到地形上
  S3mModel, //贴对象模式，画的点线面会贴在模型上
}

使用方法：

const drawMode = GMAP.Enum.DrawMode

11. 事件列表

//配置加载前事件
GMAP.Events.CONFIG_LOAD_BEFORE_EVENT

//配置加载完成事件
GMAP.Events.CONFIG_LOADED_EVENT

//权限验证前事件
GMAP.Events.BEFORE_AUTH_VERIFY_EVENT

//权限验证后事件
GMAP.Events.AFTER_AUTH_VERIFY_ENVENT

//地图基础组件加载完成事件
GMAP.Events.GISINFO_MAP_LOADED_EVENT

//地图清除事件
GMAP.Events.GISINFO_CLEAR_EVENT

//测量工具鼠标状态清楚事件
GMAP.Events.GISINFO_MEASURETOOLS_ONAFTERDOCLEAR

//API接口加载完成事件
GMAP.Events.GISINFO_API_LOADED_EVENT