项目中总结出一些常见问题,顺便熟悉开发中出现的API

smartBridge's tips:

操作iframe后点击模型后出现的闪烁问题

解决方法: 改变焦点事件

  1. 在模型队形的html上加入 onmouseover="changeFocus()"

  2. js中定义并执行一个无意义的点击操作

     function changeFocus() {
        $('.test').click();
     }
    

视图中定位方法的实现

需要定位到的位置坐标(x,y,z)

function position(x, y, z) {
    var vec3 = VirtualRealityCtrl.UtilManager.CreateInstance("Vertex");//创建病害坐标;
    vec3.X = x;
    vec3.Y = y;
    vec3.Z = z;
    var normalview = VirtualRealityCtrl.ViewerManager.GetView(0);  //拿到标准视图对象
    normalview.SetPosition(vec3, 80, 1);//以标准视图的视角定位到视图的中心点(坐标,高度,过渡时间)
}

植入模型后无法释放工具,反复添加

给定一个标识状态(目前不知道为什么加了就可以了)

var flagModel = false;   //给定一个状态

{ 
  //模型添加触发事件
  flagModel = true;
  //获取到模型的url = ??
  VirtualRealityCtrl.ToolManager.ActiveTool = 5;    //切换为点击事件
  VirtualRealityCtrl.attachEvent("ToolEvent", ToolEventAddModel); //ar注册事件
}

function ToolEventAddModel(id, type, data) {
    var obj = JSON.parse(data);
    if (flagModel) {
        AR.Tool.AddModel(url, obj[1]); //obj[1]是坐标信息集合
        flagModel = false;
    }
    if (obj.ID != "") {
        VirtualRealityCtrl.ToolManager.ReleaseActiveTool(); //释放点击的状态
    }
}

视图中添加"模型"(非种植的)一些操作

这里用智慧桥梁中的病害信息为例

  • 创建

实际上病害的创建是创建文本模型

var txt = VirtualRealityCtrl.ModelManager.CreateTextModelParam();
var vec3 = VirtualRealityCtrl.UtilManager.CreateInstance("Vertex");
vec3.X = x;
vec3.Y = y;
vec3.Z = z;
txt.Position = vec3;
txt.Text = t;
txt.ImagePath = basePath + imgUrl;
var mod = VirtualRealityCtrl.ModelManager.CreateTextModel(txt); //创建传感器说明
mod.ShowDirScreen = true;                                       //是否显示说明文字
VirtualRealityCtrl.LayerManager.ModelLayer.AddNode(mod);        //添加到展示层
arr.push({
    KeyId: item[i].KeyId,         //keyID是用于非文本模型操作的标识(依据此的请求等)
    ModId: mod.ID                 //mod.ID是获取该文本模型的标识
});
  • 删除

依赖于创建时三维视图中的唯一标识ID

if (arr != null) {
    for (var i = 0; i < arr.length; i++) {
        var model = VirtualRealityCtrl.LayerManager.GetModelNodeByID(arr[i].ModId);
        if (model != null) {
            VirtualRealityCtrl.LayerManager.ModelLayer.DeleteNode(model);
        }
    }
    arr = [];
}
  • 依据自定义iD字段请求

在注册事件中进行判断当前操作的文本模型是哪一个mod.id?? 然后通过这个再拿到keyId发起网络请求

VirtualRealityCtrl.attachEvent("ToolEvent", ToolEvents); //AR中的注册事件

function ToolEvents(id, type, data) {
  	var obj = JSON.parse(data); 
  	if (type == "5") {
      	//其他操作
		$.ajax({
          type: "GET",
          url: "../data/JsonData/timeMachine.json",
          success: function (data) {
            //其他操作
          }
  	}
}

绘制挡板(面)

思路:通过将工具type=4,调出绘面工具,然后在注册事件中拿到对应的点的坐标

  • 拼接新的数组
function ToolEvents(id, type, data) { 
  var obj = JSON.parse(data);//data为数组坐标合集
      if (type == "4") {
          for (var i = 0; i < obj.length; i++) {
              var tem = []
              if (i < obj.length - 1) {
                  tem = [obj[i], obj[i + 1]]
              } else {
                  tem = [obj[i], obj[0]]
              }
              bottomPoint.push(tem)
          }
          VirtualRealityCtrl.ToolManager.ActiveTool = 0;
          drawFace();
   }
}
//当时出现的问题在于:创建的时候把pgParam、vec3放在了循环外面
function drawFace() {
  for (var i = 0; i < bottomPoint.length; i++) {
      var pgParam = VirtualRealityCtrl.ModelManager.CreatePolygonModelParam(); //创建线面
      var vec3 = VirtualRealityCtrl.UtilManager.CreateInstance("Vertex");
      for (var j = 0; j < bottomPoint[i].length; j++) {
          vec3.X = bottomPoint[i][j].X;
          vec3.Y = bottomPoint[i][j].Y;
          vec3.Z = bottomPoint[i][j].Z;
          pgParam.AddVertex(vec3);
      }
      var temArr = bottomPoint[i].reverse();
      for (var k = 0; k < temArr.length; k++) { //坐标变换
          vec3.X = temArr[k].X;
          vec3.Y = temArr[k].Y;
          vec3.Z = temArr[k].Z + 5;
          pgParam.AddVertex(vec3);
      }
      pgParam.FillColor = 03333;      //添加其他属性
      pgParam.ShowSide = true;
      pgParam.SideColor = 03333;
      pgParam.SideWidth = 2;
      var plmodel = VirtualRealityCtrl.ModelManager.CreatePolygonModel(pgParam);
      plmodel.Transparency = 0.5;
      VirtualRealityCtrl.LayerManager.ModelLayer.AddNode(plmodel);//添加到场景中
      temArr = []; //清空临时数组
  }
  bottomPoint = [];
}

vue 复选框的使用

  • 单个复选框用于绑定布尔值

    <input type="checkbox" id=""  v-model="checked">  <!-- checked = "true" or "false" -->
    
  • 多个复选框用于绑定数组(传入value值入数组)

    <input type="checkbox" id="a" value="John" v-model="checkedNames">
    <label for="a">John</label>
    <input type="checkbox" id="b" value="Mike" v-model="checkedNames">
    <label for="b">Mike</label>
    <!-- checkedNames为选中复选框的input对应value值的集合 -->
    

IE11 下注册事件的兼容设置

Internet Explorer 11 默认情况下不支持 attachEvent 注册事件,需要在页面中修改默认兼容设置为IE10 才能使用 attachEvent 注册事件。 head中添加:

 <meta http-equiv="X-UA-Compatible" content="IE=10" />