cesium功能封装之气泡弹窗

点击模型实时查询相关信息

系统里通常会有这样的功能：在模型加载完成后，点击视野内的某个建筑物（房屋、设备、管线等）会弹出对应的信息，即气泡功能，如下图所示。本文主要梳理该功能的实现过程，用的到不仅仅是cesium的功能，还有iclient单独封装的方法。

1. S3MTileslayer.setQueryParameter
   因为默认加载的图层是基于iServer发布的S3M图层，因此为实现模型加载后的实时查询，首先利用S3MTileslayer的setQueryParameter方法获取图层信息。关于该方法的优缺点

    var promise = scene.open(realspace_url);
    Cesium.when(promise, function (layers) {
     
      app.layers = layers;
      app.h337 = h337;
      if (!scene.pickPositionSupported) {
     
        alert('不支持深度拾取,属性查询功能无法使用！');
      }
    }, function (e) {
     
      if (widget._showRenderLoopErrors) {
      }
    });
    promise.then(function () {
     
      scene.layers._layerQueue.forEach(element => {
     
        element.setQueryParameter({
     
          url: data_url,
          dataSourceName: app.dataSource,
          dataSetName: element._name,
          keyWord: 'SmID'
        })
      })
      var imageLyrIndex = 2;
      var imageLyr = scene.imageryLayers.get(imageLyrIndex);
      imageLyr.transperantBackColor = Cesium.Color.fromCssColorString('#000000');
      imageLyr.transperantBackColorTolerance = Number(0.1); //去黑边
    })
    viewer.pickEvent.addEventListener(function (feature) {
     
      debugger;
      app.showBubbleEvent('clickModel', feature)
    });

之后添加的图层如果想要继续实现气泡查询，也要追加setQueryParameter方法。
2. scene.postRender
即scene里的render系列事件，官方释义：Gets the event that will be raised immediately after the scene is rendered. Subscribers to the event receive the Scene instance as the first parameter and the current time as the second parameter.
想要实现鼠标点击模型或标牌，弹出提示信息框(div)，同时当界面缩放、放大或点击同一模型不同位置时，弹窗能跟随视角或点击的模型及标牌等实时移动就需要sence的Render系列事件了，这里用到postRender，camera里的changed事件貌似也可以，但这里暂不研究，只解释sence的渲染事件。基本配置代码如下：

//气泡位置计算
var bubbleEvent = function () {
     
  if (app.scenePosition) {
     
    var canvasHeight = scene.canvas.height;
    var windowPosition = new Cesium.Cartesian2();
    Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, app.scenePosition, windowPosition);
    app.infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 40) + 'px';
    app.infoboxContainer.style.left = (windowPosition.x - 50) + 'px';
    app.infoboxContainer.style.display = 'block';
    app.infoboxContainer.style.visibility = "visible";
  }
}
//添加每一帧都计算气泡的位置
app.addEventListenerBubblePosition = function () {
     
  scene.postRender.addEventListener(bubbleEvent)
}
//移出每一帧都计算气泡的位置
app.removeEventListenerBubblePosition = function () {
     
  scene.postRender.removeEventListener(bubbleEvent)
}

具体调用时，比如点击列表里的某一项实现气泡弹窗功能，则每次先调用移除事件，在激活添加事件，即：

3.整体流程梳理
有了以上准备就可以去实现该功能了，以建筑为图层为例，点击一个建筑物，如果setQueryParameter查到了该建筑物的属性信息，则直接跳到：

    viewer.pickEvent.addEventListener(function (feature) {
     
      debugger;
      app.showBubbleEvent('clickModel', feature)
    });

然后在showBubbleEvent方法里基于feature的属性值进行数据填充，比如将feature的一些属性值填充进table里显示，或者基于feature的某个值（比如id）来进行网络资源查询，获取资源后再填充。并且根据查询的内容不同可以更具体的去配置气泡弹窗的样式等。每次先remove再add。