# 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);