df-cesium-application v1.2.4

快速入门

安装

npm install df-cesium-application --save

使用:

• html 中添加 dom 节点，节点需要绑定一个唯一的的 ID

  <div id="dfCesiumContainer"></div>

• javascript 中定义初始化地图方法

    import { createDfCesiumApplication } from "df-cesium-application";

    const dfcesium = async (params, cssUrl, jsUrl)=>{
         return  await createDfCesiumApplication(params, cssUrl, jsUrl)
    }

调用 initMap 这个时候你在界面上已经可以看到一个地球!!!

参数说明

API 手册

地图

绘制

• 设备基础配置信息（后面涉及到的所有设备配置信息字段均以此为参考）

import { ShapeBaseConfig } from "df-cesium-application";
const shapeConfig = new ShapeBaseConfig(config)

参数 config 说明：

• 创建设备

  dfcesium.createShape（key, params）

参数说明 | name | Type | Default | Description | | --- | --- |--- |--- | | key | String | - | 设备类型 | | params | object | - | 设备配置信息 new ShapeBaseConfig({...}) |

• 指定设备以及设备连接点信息创建连接线

dfcesium.createConnectLine(lineConfig,startShape,endshape,startShapeDirection,endshapeDirection)

参数说明 | name | Type | Default | Description | | --- | --- |--- |--- | | lineConfig | object | - | 连接线配置信息 | | startShape | object | - | 起始设备| | endshape | fun | - | 结束设备 | | startShapeDirection | String | - | 起始设备端点位置 | | endshapeDirection | String | - | 结束设备端点位置 |

• 获取当前选中的设备列表

dfcesium.getSelectShapes()

• 取消选中某个设备

dfcesium.removeSelectShapeById(shapeId)

• 清空全部选中的设备

dfcesium.clearSelectShapes()

• 初始化设备列表

dfcesium.initShapeList(shapeList)   // shapeList 所有创建的设备list

• 获取视图 topo

dfcesium.getTopo()

• 设置链接 topo 关系

dfcesium.setTopo(topo)

topo 数据参数说明

[{
  "id":"", // 雪花 id ,唯一值
  "cnodeId":"", 连接点 ID,雪花 ID 生成,一个连接点 ID 对应多个链接关系
  "terminalId":"", 连接点对应的设备端点 ID
  "psrId":"", 连接点对应的设备 ID
  "psrType":"", 连接点对应的设备类型
  "versionCode":""  // 版本号
 }
 ...

 ]

• 获取所有设备

dfcesium.getAllShapes();

• 根据 id 获取设备

dfcesium.getShapeById(shapeId)

• 根据 id 删除设备

dfcesium.removeShape(shapeId)

• 删除设备（只更新视图不更新 shapeList）

dfcesium.shapeDeleteDraw(shapeId)

• 获取多边形区域内设备

dfcesium.getPolyGonIncludeShapes(shapeId)

• 添加暂存区

dfcesium.pushSync()

• 撤销

dfcesium.undoOperate()

• 还原

dfcesium.redoOperate()

• 根据 topo 关系推算获取所有的连接线设备

dfcesium.getLineShapeList(shapes, topo, psrType);

• 创建自定义任务

dfcesium.task.createTask(params);

任务参数

{
    key:'xxx',   // 任务key值
    params:{}   // 任务信息
}

• 获取当前任务

dfcesium.task.getTask();

• 删除任务

dfcesium.task.removeTask();

设备

• 更新设备属性信息

shape.updateShapeAttr(params)

• 开启设备可移动功能

shape.openShapeMove()

• 关闭设备移动功能

shape.closeShapeMove()

• 更新设备是否可以变形锁开关状态

shape.updateLockDeformationState(bool)

• 开启设备填充（只针对多边形设备）

shape.openFill()

• 关闭设备填充（只针对多边形设备）

shape.closeFill()

• 设备移动

shape.updateEntityPosition(startPosition, endPosition)

• 设备放大/缩小 （目前只支持圆)

shape.zoom(size) // size>1 放大 size<1 缩小 size不能小于0

• 更新设备裁剪和未裁剪状态（只针对多边形设备）

shape.updateCroppStatus(state,includeShapes)  // 0 未裁剪 1 已裁剪  includeShapes：包含的设备

默认交互介绍

1.多边形(包含矩形）和线段设备如果设置可以变形，且变形开关没有被锁定，则点击设备会给设备添加编辑点，当编辑点出现时设备处于变形编辑状态，拖动设备设备可自由变形，如果设备不可以变形或者设备变形开关被锁定，则点击设备不会添加编辑点

2.默认长按设备移动设备可跟随移动，如果设备处于变形状态时候会执行变形不会执行移动，如果设备是模型设备，模型不会移动，长按可复制子设备

3.图标设备移动时候默认连接线会跟随图标设备移动位置，保持链接关系

4.删除设备时候自身连接线也同步删除

5.动态创建设备阶段会展示鼠标跟随点