iModel.js若干前端功能开发样例


（iModel.js前端若干功能，开发语言 typescript ）

一、视图功能

1)   修改视图样式

修改视图背景

可以动态修改视图的背景色

方法：

  1. 获取当前视图；
  2. 复制一个当前视图的样式（displayStyle）；
  3. 修改新复制的样式，并将其设置给当前视图；

示例截图：（默认背景色为白色，现在设置为红色）

关键代码：

//获取当前视图;  

let vp = IModelApp.viewManager.selectedView;

  const distyle = vp?.displayStyle;

//复制当前视图的样式;

  let style = distyle!.clone();

//修改新样式的背景色为红色;

  style.backgroundColor = ColorDef.red;

//将新样式设置给当前视图，即可生效;

  vp!.displayStyle = style;                        

2)   显示网格，阴影等

可以动态设置当前视图是否显示网格，阴影等；

方法:

  1. 获取当前视图；
  2. 复制一个当前视图的ViewFlags;
  3. 修改新复制的ViewFlags，并将其设置给当前视图；

示例截图:（显示网格和阴影）

关键代码：

let vp = IModelApp.viewManager.selectedView;

const flag = vp!.viewFlags;

let f=flag.clone();

f.grid = true;//设置为true显示网格;

f.shadows=true;//设置为true显示阴影;

vp!.viewFlags=f;
 

3)  根据太阳光时间设置阴影

可以动态设置：随着每天时间的更新，阴影会随着太阳光而变化(注意，也会随着季节变化)。

注意：必须在viewFlags.shadows设置为true的情况下，才会出现如下截图效果。

关键代码：

public static updateSunTime(time:number){

const vp = IModelApp.viewManager.selectedView;

if (vp && vp.view.is3d()){

const displayStyle=vp.view.getDisplayStyle3d();

displayStyle.setSunTime(time);

vp.displayStyle=displayStyle;

vp.synchWithView();

}
 

示例截图：

4)   设置视图中元素外观

基本使用

可以动态的强调，隐藏等选中的元素；

方法：

  1. 获取当前视图；
  2. 从强调处理处理程序注册或创建一个新的视口；
  3. 执行处理程序；

关键代码：

  const vp = IModelApp.viewManager.selectedView;

//创建或者注册视口;

  const emph = EmphasizeElements.getOrCreate(vp);

    //执行处理应用程序，即可生效; 

  emph.hideSelectedElements(vp);

扩展

用户可以根据需要扩展自己的特性基类来渲染强调元素。

关键代码:

class MyProvider implements FeatureOverrideProvide{

public id:string="MyProvider";

public addFeatureOverrides(

ovrs: FeatureSymbology.Overrides,

vp:Viewport

):void{

/*扩展代码*/

}}



然后添加定义的特性类对象:

const vp =IModelApp.viewManager.selectedView;

vp?.addFeatureOverrideProvider(new MyProvider());

可以一下方式查询当前视图是否包含该特性类对象：

let provider=vp!.findFeatureOverrideProviderOfType <MyProvider>(MyProvider);

if(undefined==provider){

//没有包含MyProvider;

}else{

//已经包含MyProvider;

}
 

5)   聚焦当前选中元素

可以动态设置聚焦于当前所选中的元素集，并以可配置的动画，顶视图，侧视图等方式呈现。

方法:

  1. 获取当前视图；
  2. 选择需要聚焦的元素集，并配置呈现方式；
  3. 当前视图触发聚焦；

关键代码：

  const vp = IModelApp.viewManager.selectedView!;

  const idArray: Id64String[] = ["0x40000000838"];

  const prop: ViewChangeOptions & ZoomToOptions = {

animateFrustumChange: true, };

//配置呈现方式以动画形式呈现;

  await vp.zoomToElements(idArray, prop);

 

6)  为视图添加装饰(Decorator)

基本使用

可以为当前活动视图动态添加装饰。

关键代码:

IModelApp.viewManager.addDecorator(new AccuSnap());

注意:AccuSnap是imodel.js已经实现的精确捕捉的一个装饰功能；

扩展

Decorator是可扩展装饰子类的接口，用户可以通过该接口实现包含自定义特性的子类；

class MyDecorator implements Decorator 

{

/*扩展代码*/

}

//将实现好的装饰子类对象添加到渲染循环中:

IModelApp.viewManager.addDecorator(new MyDecorator);

 

7)  裁剪视图

基本使用

可以动态设置在裁剪功能，对视图在X，Y，Z方向上分别进行裁剪。

关键代码：

async function TestClip(){

const vp = IModelApp.viewManager.selectedView;

IModelApp.tools.run(ViewClipClearTool.toolId);

ViewClipDecorationProvider.create().toggleDecoration(vp!);

if(!vp.view.getViewClip())addExtentsClipRange(vp);}

const addExtentsClipRange =(vp:ScreenViewport)=>{

const range=vp.view.computeFitRange();

range.high.z=(range.high.z+range.low.z)/2.0;

const block:ClipShape=ClipShape.createBlock(

range,

range.isAlmostZeroZ

?ClipMaskXYZRangePlanes.XAndY

:ClipMaskXYZRangePlanes.All,

false,

false

);

const clip:ClipVector=ClipVector.createEmpty();

clip.appendReference(block);

vp.view.setViewClip(clip);

vp.setupFromView();

const vcdp:ViewClipDecorationProvider=ViewClipDecorationProvider.create();

vcdp.clearDecorationOnDeselect=false;

vcdp.showDecoration(vp);

IModelApp.toolAdmin.startDefaultTool();};
 

 

示例截图:

扩展使用

可以指定选项是分别以垂直于X，Y，Z轴之一的平面进行裁剪。

如下所示:（以垂直于Y轴的平面进行裁剪）

二、元素操作

8) 获取当前选中的元素

方法：

获取当前IModelConnection，然后根据该接口通过selectionSet获取当前选中的元素的Id的集合；

关键代码：

  const imodel = UiFramework.getIModelConnection();

  //elementIdSet存储的是当前选中元素的Id;

  const elementIdSet = imodel!.selectionSet;

 

三、 工具

9)     系统工具

iModel.js前端包含大量的系统工具，例如FitViewTool等，这些系统工具类均继承自Tool,每个工具类均包含一个标识符toolId，该toolId必须保持唯一。例如FitViewTool类的toolId是”View.Fit”。一般在程序初始化的时候，需要预先注册这些工具，然后可以根据需要使用。

例如，启动Fit工具，代码如下所示:

IModelApp.tools.run(FitViewTool.toolId);

常用的系统工具类:

类名

toolId

FitViewTool

View.Fit

ViewGlobeSatelliteTool

View.GlobeSatellite

ViewGlobeLocationTool

View.GlobeLocation

WindowAreaTool

View.WindowArea

ViewUndoTool

View.Undo

ViewRedoTool

View.Redo

…

…

 

10) 自定义工具

用户只需要继承合适的工具基类就可以定制自定义工具类，然后进行注册，使用(注意，注册，使用过程与系统工具一样)。常被继承的基类有InteractiveTool和PrimitiveTool。其中，PrimitiveTool类可用于实现创建或修改几何元素的工具。

class MyTool extends PrimitiveTool {

  public static toolId = "MyTool";

/***其他代码****/

}

 

//启动自定义工具;

IModelApp.tools.run(MyTool.toolId);