Cesium（六）图层弹窗信息展示

这个例子借鉴了超图官方的例子，加入一些自己的理解，那就在这里写详细一点。

思路

1. 先写出html，加上取消的按键
2. 创建弹窗的方法
3. 调用2的方法

html

<div id="bubble" class="bubble" v-show="showBuble">
    <div id="tools" style="text-align: right">
      <span style=" padding: 5px; position: absolute; left: 10px; top: 4px">对象属性</span>
      <span @click="closebubble" title="关闭" id="close" style="color: darkgrey; padding: 5px">
        <a-icon type="close" />
      </span>
    </div>
    <div style="overflow-y: scroll; height: 150px;padding:0 4px" id="tableContainer">
      <table id="tab">
      </table>
    </div>
  </div>

js

1.先把之前的table一条条删除
2.遍历传入的数组对象，插入table中
3.（这个方法借鉴的超图的例子），可以让弹窗一直正对你

// 创建弹窗
    createBubble(obj) {
      if(this.pickedPositon.length!=0){
          this.showBuble = true
          var position = this.pickedPositon
          var table = document.getElementById("tab");
          for (var i = table.rows.length-1;i > -1;i--){
                    table.deleteRow(i);
                }
          for(var index in obj){
                    var newRow = table.insertRow();
                    var cell1 = newRow.insertCell();
                    var cell2 = newRow.insertCell();
                    cell1.innerHTML = index;
                    cell2.innerHTML = obj[index];
                }

          //弹窗随屏幕移动而移动
          var infoboxContainer = document.getElementById('bubble')
          viewer.scene.postRender.addEventListener(function () {
            // 每一帧都去计算气泡的正确位置
            if (position) {
              var canvasHeight = scene.canvas.height
              var windowPosition = new Cesium.Cartesian2()
              Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
              infoboxContainer.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
              infoboxContainer.style.left = windowPosition.x - 70 + 'px'
              infoboxContainer.style.visibility = 'visible'
            }
          })
      }
    },

在mouted里面调用pickEvent方法获取信息

//注册鼠标点击事件
    viewer.pickEvent.addEventListener(function(feature){    
      _this.createBubble(feature)
    });

想获取到feature对象，必须在获取图层信息的时候使用setQueryParameter方法查询信息。

layers.forEach((res, i) => {
        res.selectedColor=Cesium.Color.CYAN;
        var layername = res.name.split('@')
        res.setQueryParameter({
                    url: 'url',
                    dataSourceName: layername[1],
                    dataSetName: layername[0],
                    keyWord: 'SMID'
                });

样式写的有点丑，不擅长写样式，大家可以自己写样式。

<style>
.bubble {
  text-align: center;
  z-index: 999;
  text-align: center;
  position: fixed;
  padding: 15px;
  margin: 0;
  opacity: 0.8;
  background:#1f6666;
  max-height: 200px;
}
//下面的尖角
.bubble:after {
    content: "";
    position: absolute;
    left: 45%;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #1f6666;
    display: block;
    width: 0;
}
/* Border styles */
#tab {
    border:1px solid blanchedalmond;
    td{
      border: 1px solid blanchedalmond ;
      padding: 0 4px;
    }
}
</style>

东西不多，关键是获取数据，第二个就是插入数据。