cesium自定义的气泡弹窗（可随球放大缩小，移动）

效果图如下：

 

1. 从后台获取遍历的数据，先遍历循环加上点位

   

 setTimeout(() => {
      this.UAVpoint.forEach(result => {

        var pinBuilder = new Cesium.PinBuilder();

        var bluePin = this.viewer.entities.add({
          id: result["ID"],
          name: result["Name"],
          position: Cesium.Cartesian3.fromDegrees(result["Longitude"], result["Latitude"]),
          billboard: {
            image: '../../../../ecology/assets/images/Icon/m1.png',
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          }
        });

      })
    }, 200);

2. 再次遍历循环为每个加上气泡弹窗

  

setTimeout(() => {


      this.UAVpoint.forEach(result => {

        var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

        var that = this;
        handler.setInputAction(function (movement) {
          var pick = that.viewer.scene.pick(movement["position"]);

          var content;
          var infoDiv = '
' +
            '
' +
            '×' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
' +
            '
';
          $("#sas").append(infoDiv);


          if (Cesium.defined(pick) && (pick.id.id === result["ID"])) {
            $('#trackPopUp').show();
            var cartographic = Cesium.Cartographic.fromCartesian(movement["position"]);
            var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
            var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
            var id = pick.id._id.replace(/[^0-9]/ig, "");
            content =
              '' +
              '' +
              '' +
              '
' + pick.id._name + '
经度
纬度
'
            var obj = { position: movement["position"], destination: destination, content: content };
            infoWindow(that.viewer, that.scene, obj);
          }

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      });
    }, 500);

3. 另外调用的两个方法在最外层

  

var removeHandler;


function infoWindow(viewer, scene, obj) {
  var picked = scene.pick(obj.position);
  if (Cesium.defined(picked)) {
    var id = picked.id;
    if (id instanceof Cesium.Entity) {
      $(".cesium-selection-wrapper").show();
      $('#trackPopUpLink').empty();
      $('#trackPopUpLink').append(obj.content);
      var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
      $('#trackPopUp').show();
      positionPopUp(c); // Initial position
      // at the place item
      // picked
      removeHandler = viewer.scene.postRender.addEventListener(function () {
        if (picked.id._polyline != null) {
          // var pos = {};
          // pos.x = (id._polyline._positions._value["0"].x + id._polyline._positions._value[1].x) / 2;
          // pos.y = (id._polyline._positions._value["0"].y + id._polyline._positions._value[1].y) / 2;
          // pos.z = (id._polyline._positions._value["0"].z + id._polyline._positions._value[1].z) / 2;
          // var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pos);
          console.log("我执行了");
        } else {
          var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, id._position._value);
        }// If things moved, move the
        // popUp too
        if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
          positionPopUp(changedC);
          c = changedC;
        }
      });
      // PopUp close button event handler
      $('.leaflet-popup-close-button').click(function () {
        $('#trackPopUp').hide();
        $('#trackPopUpLink').empty();
        $(".cesium-selection-wrapper").hide();
        removeHandler.call();
        return false;
      });
      return id;
    }
  } else {
    $('#trackPopUp').hide();
  }

}

function positionPopUp(c) {
  var x = c.x - ($('#trackPopUpContent').width()) / 2;
  var y = c.y - ($('#trackPopUpContent').height());
  $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
}

4.本文参考: https://blog.csdn.net/zlx312/article/details/79825111