iTwin 开源工具集合

使用方式：IModelApp.tools.run(“View.Walk”)

另一些工具是需要使用FrontendDevTools 相关的工具，需要先安装依赖包： @itwin/frontend-devtools。

并且初始化IModelApp.startup();
await FrontendDevTools.initialize();

View相关

ToolKey	工具描述
View.Walk	行走模式
View.Rotate	旋转视图
View.Pan	平移视图
View.Look	环顾当前视角
View.Fit	视图放置于视口中心
View.Zoom	缩放视图（默认鼠标滚轮）
View.Select	选择元素（默认工具）
View.LookAndMove	使用鼠标+键盘或触摸控件执行步行，类似很多游戏软件中的操作：W、A、S、D（或箭头键）：分别向前、向左、向右或向后移动，E，Q（或PgUp，PgDn）：分别向上和向下移动，+、-（或滚轮）：增加或减少速度
View.Fly	飞行模式
View.WindowArea	将视图缩放到框选的区域
View.GlobeSatellite	从卫星的角度查看背景地图上的位置的工具
View.GlobeBird	从鸟瞰角度查看背景地图上的位置的工具
View.GlobeModel	在背景地图上查看当前 iModel，以便显示工程的范围
View.Undo	执行视图撤消操作的工具
View.Redo	执行视图重做操作的工具
View.SetupCamera	设置相机
View.ToggleCamera	打开关闭相机
View.SetupWalkCamera	设置行走时的相机参数
View.Standard	view的不同视角，默认为Top { Top = 0, Bottom = 1, Left = 2, Right = 3, Front = 4, Back = 5, Iso = 6, RightIso = 7 } vp.view.setStandardRotation(id); vp.synchWithView();

获取眼坐标和目标点坐标

const vp = IModelApp.viewManager.selectedView;
  if (!vp)
    return false;

if ( ! vp.view.is3d())
    return;
  
console.log(vp.view.getEyePoint(),vp.view.getTargetPoint())

修改选中元素的默认着色

const settings = {
      color: ColorDef.from(0, 255, 127),
      hiddenRatio: 0,
      silhouette: 1,
      visibleRatio: 1,
    };
 
vp.hilite = settings;

剖切相关

ToolKey	工具描述
ViewClip.Clear	清除剖切
ViewClip.ByPlane	通过平面定义剖切
ViewClip.ByShape	使用元素对齐框或轴对齐框定义视图剖切
ViewClip.ByRange	通过指定范围定义视图剖切框的工具
ViewClip.ByElement	使用元素对齐框或轴对齐框定义视图剖切框

根据特定高度裁切模型

// https://www.itwinjs.org/sandboxes/MenghuaYe/LevelPickerTest

if ( ! vp.view.is3d())
    return;
  let viewState = vp.view;
  
  const planeSet = ConvexClipPlaneSet.createEmpty();
  createPlane(planeSet, 0, false);
  createPlane(planeSet, 50, true);

  const prim = ClipPrimitive.createCapture(planeSet);
  const clip = ClipVector.createEmpty();
  clip.appendReference(prim);
  viewState.setViewClip(clip);
  viewState.viewFlags = viewState.viewFlags.with("clipVolume", true);

  // const categoryIds = await getCategoriesToTurnOff(imodel);

  vp.applyViewState(viewState);
  // vp.changeCategoryDisplay(categoryIds, false);

  // Need a way to re-render the scene
  vp.invalidateDecorations();
  requestAnimationFrame(() => { });

剖切面着色的例子 ：iTwin.js Code Sandbox

测量相关

ToolKey	工具描述
Measure.Distance	测量距离
Measure.Area	测量面积
Measure.AreaByPoints	根据点计算面积
MeasureTools.MeasureLocation	测量点位置
MeasureTools.MeasureRadius	测量半径
MeasureTools.MeasureAngle	测量角度
MeasureTools.MeasurePerpendicular	测量垂直距离
MeasureTools.ClearMeasurements	清除测量

空间点转经纬度展示（二开）

// https://www.itwinjs.org/sandboxes/RonSeydler/pick-a-point-RSv2/   
  const latLongFormatterSpec = await IModelApp.quantityFormatter.getFormatterSpecByQuantityType(QuantityType.LatLong, false);
    const cartographic = await this.iModel.spatialToCartographic(ev.point);
    const formattedLat = IModelApp.quantityFormatter.formatQuantity(Math.abs(cartographic.latitude), latLongFormatterSpec);
    const formattedLong = IModelApp.quantityFormatter.formatQuantity(Math.abs(cartographic.longitude), latLongFormatterSpec);
    console.log(formattedLat);
    console.log(formattedLong);
    const latDir = CoreTools.translate(cartographic.latitude < 0 ? "Measure.Labels.S" : "Measure.Labels.N");
    const longDir = CoreTools.translate(cartographic.longitude < 0 ? "Measure.Labels.W" : "Measure.Labels.E");

    console.log(`{x: ${ev.point.x}, y: ${ev.point.y}, z: ${ev.point.z}}`);
    console.log(`{Lat Raw: ${cartographic.latitudeDegrees}, Long: ${cartographic.longitudeDegrees}, Height: ${cartographic.height}}`);
    console.log(`Lat:${formattedLat}${latDir} Long:${formattedLong}${longDir}`);

元素相关

工具	描述
const vp = IModelApp.viewManager.selectedView; const iModel = vp.iModel; const elements = await iModel.elements.getProps(iModel.selectionSet.elements); const elementProperty = await Presentation.presentation.getElementProperties({ imodel:vp.iModel, elementId: '0x20000008d0c' }) console.log(elementProperty); https://www.itwinjs.org/sandboxes/grigas/element-properties-loader/	元素详细信息
const vp = IModelApp.viewManager.selectedView; const iModel = vp.iModel; const elements = await iModel.elements.getPlacements(iModel.selectionSet.elements);	元素的位置信息
const viewChangeOpts: ViewChangeOptions = { animateFrustumChange: true, }; const vp = IModelApp.viewManager.selectedView; if (vp) await vp.zoomToElements(elementId, { ...viewChangeOpts }); // iModelConnection.selectionSet 选中的在这里 ZoomToElementhttps://www.itwinjs.org/sandboxes/pmconne/ZoomToElement-ElementScope/	Zoom in到某个元素
请参考代码 https://www.itwinjs.org/sandboxes/iTwinPlatform/Emphasize%20Elements 中 EmphasizeElementsApi接口部分	修改某个元素颜色；仅显示一个元素；强调元素虚影化
const hilites = IModelApp.viewManager.selectedView?.iModel.hilited; const settings: Hilite.Settings = { color: ColorDef.from(0, 255, 127), hiddenRatio: 0, silhouette: 1, visibleRatio: 1, }; vp!.hilite = settings;	修改选中元素显示样式(之前默认为透明蓝色)
let parentId = iModel.elements.tryGetElementProps(currId)?.parent?.id;	获取父元素id（前端）

实景相关

描述
new AttachRealityModelTool().parseAndRun(‘{“tilesetUrl”:”http://127.0.0.1:5000/TileRoot.json"}‘	添加实景
new SetRealityModelTransparencyTool().parseAndRun(“0.5”)	修改实景透明度
new SetRealityModelLocateTool().parseAndRun(“true”)	显示实景的位置
new SetRealityModelEmphasizedTool().parseAndRun(“true”)	强调显示实景
new DetachRealityModelTool().parseAndRun(“-1”)	卸载实景
new SetRealityModelColorTool().parseAndRun(“255”,”0”,”0”)	设置实景颜色
new ClearRealityModelAppearanceOverrides().parseAndRun(“0”)	清除实景颜色

地图相关

工具	描述
vp.view.displayStyle.backgroundMapBase= BaseMapLayerSettings.fromJSON({ formatId: "ArcGIS", url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", name: "ESRI World Imagery!!" })	添加arcgisonline地图
vp.viewFlags = vp.viewFlags.with("backgroundMap", false);	关闭地图
const style = vp.backgroundMapSettings.clone({ transparency:0.9});   vp.displayStyle.backgroundMapSettings = style;	设置地图Layer透明度
const settings = BaseMapLayerSettings.fromJSON({     formatId: "ArcGIS",         url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",         name: "ESRI World Imagery"   }) vp.displayStyle.attachMapLayer({ settings, mapLayerIndex: { isOverlay: false, index: 1 } }); 关闭background，露出来下面的base overlay的效果 vp.displayStyle.attachMapLayer({ settings, mapLayerIndex: { isOverlay: true, index: 1 } });	插入Background (图层从base--》background--》overlay 层级向上)
vp.displayStyle.changeBackgroundMapProps({applyTerrain: true});	打开地形

环境类

工具	描述
new ToggleSkyboxTool().run()	是否展示天空盒子
new SkySphereTool().parseAndRun(“/sky/top.png”)	图片代替天空盒子
new SkyCubeTool().parseAndRun(“/sky/top.png”,”/sky/bottom.png”,”/sky/left.png”, “/sky/right.png”,”/sky/front.png”,”/sky/back.png”)	多图片代替天空盒子
请参考相关代码 iTwin.js	DisplayStyle
iTwin.js请参考相关代码 iTwin.js	设置背景色
new ChangeViewFlagsTool().parseAndRun(“rendermode=0”) //  Wireframe = 0, SmoothShade = 6,SolidFill = 4,HiddenLine = 3,	修改渲染模式
new OverrideSubCategoryTool().parseAndRun(“id=0x20000000038”,”c=16711680”) 先元素查询category，再查找subcategory，再着色 const subCategoryIds = iModel.subcategories.getSubCategories("0x20000000066"); console.log("subCategoryIds",subCategoryIds) new OverrideSubCategoryTool().parseAndRun('id=0x20000000067','c=16711680','t=0.7')	修改SubCategory
IModelApp.tools.run(ToggleProjectExtentsTool.toolId)	显示隐藏包围盒
IModelApp.tools.run(MeasureTileLoadTimeTool.toolId)	展示加载Tile时长
IModelApp.tools.run(ChangeUnitsTool.toolId,false) IModelApp.quantityFormatter.setActiveUnitSystem("metric");	修改单位
请参考代码 iTwin.js	风霜雪雨效果
请参考代码 iTwin.js	设置相机效果

 修改model的颜色

async function modifyModelColor() {
  const vp = IModelApp.viewManager.selectedView;
  if (!vp)
    return false;

  const iModelConnection = vp.iModel;
  const selectPhysicalModels = `SELECT ECInstanceId as id from bis.SpatialModel where IsPrivate=false`
  const color = ColorDef.red;
  const appearance = FeatureAppearance.fromRgb(color);
// FeatureAppearance.fromJSON({ rgb: new RgbColor(100, 100, 100), weight: 1, transparency: 100 / 255, linePixels: LinePixels.Solid, ignoresMaterial: true }

  const sqlReader = iModelConnection.createQueryReader(
    selectPhysicalModels,
    undefined,
    {
      rowFormat: QueryRowFormat.UseJsPropertyNames,
    }
  );

  const result = await sqlReader.toArray();
  
  for (const row of result) {
    vp.displayStyle.settings.overrideModelAppearance(row.id, appearance)
  }
}

// clear
 const appearance = FeatureAppearance.fromJSON(undefined);
 vp.displayStyle.settings.overrideModelAppearance(row.id, appearance)

隐藏model

vp.view.modelSelector.models.clear() //所有
vp.view.modelSelector.dropModels(models) //单个

隐藏Category

vp.view.categorySelector.dropCategories(vp.view.categorySelector.categories)

常用Listener

IModelApp.viewManager.onViewOpen.addListener(()=>{call some tool})
IModelApp.viewManager.selectedView?.onChangeView.addListener(()=>{call some tool})

ECSQL查询

const query = `SELECT * FROM BisCore:GeometricElement3d limit 1`;
    const rows: QueryRowProxy[] = [];

    for await (const row of iModelConnection!.createQueryReader(query)) {
      if (row)
        rows.push(row.toRow());
    }
    console.log(rows)

更多用例，请参见 iTwin Samples

回调函数

选中元素后操作

// https://www.itwinjs.org/sandboxes/grigas/Element%20Properties%20Loader/
 
 Presentation.selection.selectionChange.addListener((evt, selectionProvider) => {
    for (const entry of selectionProvider.getSelection(evt.imodel, evt.level).instanceKeys) {
      for (const id of entry[1]) {
        console.log(id);
        return;
      }
    }
  })

其他一些有趣的例子

Color Legend

（二开着色？）

https://www.itwinjs.org/sandboxes/JoshSchifter/legend/

双屏展示

iTwin.js

自定义工具

iTwin.js Code SandboxiTwin.js Sandbox is an online code editor for trying out iTwin.js SDK and building your digital twin apps.https://www.itwinjs.org/sandbox/JoshSchifter/override-select-tool/