# GraphicLayerService 标注服务工具类

mapgis-3d-graphic-layer-service

# 如何引入

//引入Mapgis3dGraphicLayerService组件
import { Mapgis3dGraphicLayerService } from "@mapgis/webclient-vue-cesium";
//在mixins里面混入
export default {
  name: "你的组件",
  //混入Mapgis3dGraphicLayerService服务
  mixins: [Mapgis3dGraphicLayerService]
};

# 混入后,如何使用

//初始化一个图层
this.$_newGraphicLayer({
  //指定vueIndex,只有一个时,也可以不传
  vueIndex: this.vueIndex,
  //vueKey,只有一个Cesium球时,也可以不传
  vueKey: this.vueKey,
  //标绘对象添加完毕后的回调事件
  getGraphic: function(e) {}
});
//开始绘制标绘对象
this.$_startDrawing({ type: "绘制类型", style: {} });

# 方法列表

名称 描述
$_newGraphicLayer(options) 初始化一个标绘图层对象
$_getGraphicLayer() 通过 vueKey,vueIndex 来获取 graphicsLayer 对象,当不传时,会使用默认的 vueKey,vueIndex
$_switchGraphicLayer() 当前 vue 页面下包含多个标绘图层时,通过 vueKey,vueIndex 来切换 graphicsLayerService 默认对应的 graphicLayer 对象
$_startDrawing(options) 通过绘制参数 options 来绘制要素,可通过 vueIndex,vueKey 来指定要绘制在哪一个 graphicsLayer 图层上,默认可不传
$_stopDrawing() 停止绘制
$_startEdit() 开始编辑标绘图形对象,可通过 vueIndex,vueKey 来指定要绘制在哪一个 graphicsLayer 图层上,默认可不传
$_stopEdit() 停止编辑
$_getAllGraphic() 获取该图层下所有标绘图形
$_getGraphicByID(id) 根据 id 获取标绘图形对象
$_removeGraphicByID(id) 根据 ID 移除选中标绘图形
$_getGraphicByIndex(index) 根据 index 获取标绘图形对象
$_removeGraphicByIndex(index) 根据 index 移除选中标绘图形
$_fromJson(json) 加载标绘对象组成的 json 数据
$_toJSON() 将整个图层导出为 json 数据
$_toFile(dataSource) 将数据导出为文件
$_removeAllGraphic() 移除该标绘图层下所有标绘对象
$_getJsonById(id, key, value) 通过 id 来获取标绘对象的 json 数据,该对象与 Cesium 解绑,操作该对象,并不会改变标绘对象的属性
$_updateStyle(Graphic, key, value) 更新标绘图形对象样式
$_updateStyleByStyle(id, style) 通过 style 对象,更新标绘图形对象样式,一次可同时更新多个值
$_updateStyleByLayer(layer) 通过一个标绘图层对象,更新标绘图形对象样式,一次可同时更新多个标绘对象的多个值
$_destroy() 销毁整个图层

# 方法

# $_newGraphicLayer(options)

初始化一个 graphicsLayer 对象,请通过$_getGraphicLayer 方法获取 GraphicLayer 对象,不要将 GraphicLayer 对象绑定在 vue 上

# 参数

名称 类型 是否必填 描述
options Object 初始化参数
# 参数详情
# options(options参数)
名称 类型 默认值 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串,不传则自动生成
vueKey String 'default' cesium 球体的唯一标识,默认值 default,当分屏时使用此对象标识多个球体
getGraphic(Graphic) Function 绘制完成时的回调函数
finishEdit(Graphic) Function 编辑完成时的回调函数
revokeModel(Graphic) Function 添加模型时,点击右键撤销模型的回调函数

# 返回值 - 无

# 示例

//始化一个 GraphicLayer 对象:
this.$_newGraphicLayer({
  vueIndex: vueIndex,
  vueKey: vueKey,
  getGraphic: function(e) {},
  finishEdit: function(e) {},
  revokeModel: function(e) {}
});

# $_getGraphicLayer(vueIndex, vueKey)

通过 vueKey,vueIndex 来获取 graphicsLayer 对象,当不传时,会使用默认的 vueKey,vueIndex

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
graphicsLayer Object graphicsLayer 对象

# 示例

//获取默认的 GraphicLayer 对象:
let graphicsLayer = this.$_getGraphicLayer();
//当在一个球体上,有多个GraphicLayer对象时,获取该对象,请指定vueIndex:
let vueIndex = "你的vueIndex";
let graphicsLayer = this.$$$$\_getGraphicLayer(vueIndex);
//当有多个球体,多个 GraphicLayer 对象时,获取该对象,请指定 vueIndex 以及 vueKey:
let vueIndex = "你的 vueIndex";
let vueKey = "你的 vueKey";
let graphicsLayer = this.$_getGraphicLayer(vueIndex, vueKey);

# $_switchGraphicLayer(vueIndex, vueKey)

通过 vueKey,vueIndex 来切换 graphicsLayerService 默认对应的 graphicLayer 对象

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//切换 GraphicLayer 对象:
let vueIndex = "你的 vueIndex";
let vueKey = "你的 vueKey";
this.$_switchGraphicLayer(vueIndex, vueKey);

# $_startDrawing(options, vueIndex, vueKey)

通过绘制参数 options 来绘制要素,可通过 vueIndex,vueKey 来指定要绘制在哪一个 graphicsLayer 图层上

# 参数

名称 类型 默认值 是否必填 描述
options Object {} 绘制参数
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串
# 参数详情
# options(options参数)
名称 类型 默认值 是否必填 描述
type String 绘制类型,graphicType(司马云地址) (opens new window)Graphic(内网地址) (opens new window)
style Object {} 绘制样式,Style(司马云地址) (opens new window)Style(内网地址) (opens new window)
editPointStyle Object {} 编辑点样式,Style.EditPointStyle(司马云地址) (opens new window)Style.EditPointStyle(内网地址) (opens new window)
attributes Object {} 标绘对象绑定的属性
id String 标绘对象 id
name String 标绘对象名称
show Boolean true 是否显示标绘对象
isContinued Boolean true 是否连续绘制
drawWithHeight Boolean true 是否使用鼠标绘制高度,当为 true 时使用鼠标绘制高度,当为 false 时使用参数设置的统一高度
asynchronous Boolean false 默认为阻塞式更新,true 为异步更新,false 为阻塞式更新
heading Number 0 偏航角,弧度
pitch Number 0 俯仰角,弧度
roll Number 0 翻滚角,弧度
transformX Number 0 局部坐标系 X 方向平移量,单位米,X 方向为纬线方向
transformY Number 0 局部坐标系 Y 方向平移量,单位米,Y 方向为经线方向
transformZ Number 0 局部坐标系 Z 方向平移量,单位米,Z 方向为垂直地表方向

# 返回值 - 无

# 示例

//设置绘制参数,绘制点
let options = {
  type: "point", //绘制类型
  style: {
    //绘制样式
    color: Cesium.Color.ALICEBLUE
  }
};
//开始绘制
this.$_startDrawing(options);

# $_stopDrawing(vueIndex, vueKey)

停止绘制

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//停止绘制
this.$_stopDrawing();
//指定一个graphicLayer,停止绘制
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_stopDrawing(vueIndex, vueKey);

# $_startEdit(vueIndex, vueKey)

开始编辑标绘图形对象

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//开始编辑
this.$_startEdit();
//指定一个graphicLayer,开始编辑
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_startEdit(vueIndex, vueKey);

# $_stopEdit(vueIndex, vueKey)

停止编辑标绘图形对象

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//停止编辑
this.$_stopEdit();
//指定一个graphicLayer,停止编辑
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_stopEdit(vueIndex, vueKey);

# $_updateStyle(Graphic, key, value)

更新标绘图形对象样式

# 参数

名称 类型 默认值 是否必填 描述
Graphic Object {} 标绘对象,Graphic(司马云地址) (opens new window)Graphic(内网地址) (opens new window)
key String 样式名
value String 样式值

# 返回值 - 无

# 示例

//根据ID获取标绘对象
let Graphic = this.$_getGraphicByID("标绘图形ID");
//设置样式名
let key = "样式名";
//设置样式值
let value = "样式值";
//更新样式
this.$_updateStyle(Graphic, key, value);

# $_updateStyleByStyle(id, style, vueIndex, vueKey)

通过 style 对象,更新标绘图形对象样式,一次可同时更新多个值

# 参数

名称 类型 默认值 是否必填 描述
id String 标绘图形对象 ID
style Object {} 样式对象,Style(司马云地址) (opens new window)Style(内网地址) (opens new window)
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

let Graphic = this.$_getGraphicByID("标绘图形 ID");
let style = {
  "样式 1": "",
  "样式 2": ""
};
//更新样式
this.updateStyleByStyle(Graphic, style);

# $_updateStyleByLayer(layer, vueIndex, vueKey)

通过一个标绘图层对象,更新标绘图形对象样式,一次可同时更新多个标绘对象的多个值

# 参数

名称 类型 默认值 是否必填 描述
layer Object 标绘图层对象,GraphicsLayer(司马云地址) (opens new window)GraphicsLayer(内网地址) (opens new window)
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

let layer = "一个标绘图层对象";
let key = "样式名";
let value = "样式值";
//更新样式
this.$_updateStyleByLayer(layer, key, value);

# $_getGraphicByID(id, vueIndex, vueKey)

根据 id 获取标绘图形对象

# 参数

名称 类型 默认值 是否必填 描述
id String 标绘图形对象 ID
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
graphic Object 标绘图形对象,Graphic(司马云地址) (opens new window)Graphic(内网地址) (opens new window)

# 示例

//根据 id 获取标绘图形对象
let id = "标绘对象 ID";
this.$_getGraphicByID(id);

# $_getGraphicByIndex(index, vueIndex, vueKey)

根据 index 获取标绘图形对象

# 参数

名称 类型 默认值 是否必填 描述
index String 标绘图形对象 index
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
graphic Object 标绘图形对象,Graphic(司马云地址) (opens new window)Graphic(内网地址) (opens new window)

# 示例

//根据 index 获取标绘图形对象
let index = "标绘对象的 index";
this.$_getGraphicByIndex(index);

# $_fromJson(json, vueIndex, vueKey)

加载 json 数据

# 参数

名称 类型 默认值 是否必填 描述
json Object or String 标绘对象组成的 json 数据
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串
# 参数详情
# json(json参数)
名称 类型 默认值 是否必填 描述
type String "FeatureCollection" 数据类型,值就是 FeatureCollection,参考 GEOJSON
features Array [] 标绘对象数组

# 返回值 - 无

# 示例

//通过 json 加载标绘图形对象
let json = {
  type: "FeatureCollection",
  features: []
};
this.$_fromJson(json);

# $_getJsonById(id, vueIndex, vueKey)

通过 id 来获取标绘对象的 json 数据,该对象与 Cesium 解绑,操作该对象,并不会改变标绘对象的属性

# 参数

名称 类型 默认值 是否必填 描述
id String 标绘对象的 ID
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
graphic Object 标绘图形对象,Graphic(司马云地址) (opens new window)Graphic(内网地址) (opens new window)

# 示例

//通过 id 来获取标绘对象的 json 数据
let id = "标绘对象的 ID";
this.$_getJsonById(id);

# $_toJSON(vueIndex, vueKey)

将整个图层导出为 json 数据

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
graphicsLayer Object 标绘图层对象,GraphicsLayer(司马云地址) (opens new window)GraphicsLayer(内网地址) (opens new window)

# 示例

//将默认图层导出为 json 数据
this.$_toJSON();
//将指定图层导出为json数据
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_toJSON(vueIndex, vueKey);

# $_toFile(dataSource, title)

将数据导出为文件

# 参数

名称 类型 默认值 是否必填 描述
dataSource Any 要导出的数据
title String "无标题" 文件名

# 返回值 - 无

# 示例

//将数据导出为文件
this.$_toFile("你的数据", "文件名");

# $_removeAllGraphic(vueIndex, vueKey)

移除该标绘图层下所有标绘对象

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
isRemove Boolean 是否移除成功

# 示例

//移除默认图层的所有标绘对象
this.$_removeAllGraphic();
//移除指定图层的所有标绘对象
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_removeAllGraphic(vueIndex, vueKey);

# $_removeGraphicByIndex(index, vueIndex, vueKey)

根据 index 移除选中标绘图形

# 参数

名称 类型 默认值 是否必填 描述
index Number 要移除的标绘图形的 index
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
isRemove Boolean 是否移除成功

# 示例

//根据 index,移除默认图层的标绘对象
let index = "标绘对象的 index";
this.removePlottingGraphicByIndex(index);
//根据 index,移除指定图层的标绘对象
let index = "标绘对象的 index";
let vueIndex = "你的 vueIndex";
let vueKey = "你的 vueKey";
this.$_removeGraphicByIndex(index, vueIndex, vueKey);

# $_removeGraphicByID(id, vueIndex, vueKey)

根据 ID 移除选中标绘图形

# 参数

名称 类型 默认值 是否必填 描述
id String 要移除的标绘图形的 ID
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值

名称 类型 描述
isRemove Boolean 是否移除成功

# 示例

//根据 ID,移除默认图层的标绘对象
let ID = "标绘对象的 index";
this.$_removeGraphicByID(ID);
//根据ID,移除指定图层的标绘对象
let ID = "标绘对象的ID";
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$$$$\_removeGraphicByID(ID, vueIndex, vueKey);

# $_destroy(vueIndex, vueKey)

销毁整个图层

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//销毁当前图层
this.$_destroy();
//销毁指定图层
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$_destroy(vueIndex, vueKey);

# $_getAllGraphic(vueIndex, vueKey)

获取该图层下所有标绘图形

# 参数

名称 类型 默认值 是否必填 描述
vueIndex String or Number 随机数 graphicLayer 的唯一标识,随机生成的数字或字符串
vueKey String graphicLayer 的唯一标识,随机生成的数字或字符串

# 返回值 - 无

# 示例

//获取默认图层的所有标绘图形
this.$_getAllGraphic();
//获取指定图层的所有标绘图形
let vueIndex = "你的vueIndex";
let vueKey = "你的vueKey";
this.$$$$\_getAllGraphic(vueIndex, vueKey);