Cesium的tooltip(推荐)

本文主要介绍在cesium球上点击Entity后，展示元素的属性信息。

1、监听cesium球的点击事件

            if(ShapeEventHandler != undefined){  
                 ShapeEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            var ShapeEventHandler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
            ShapeEventHandler.setInputAction(function(click){
                let feature = _this.viewer._selectedEntity;
                if(feature != undefined){
                    _this.showCesiumPop(feature,click);
                }
            },Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、展示Entity属性信息

      showCesiumPop:function(feature,CLICK){
            let _this = this;
            var _position, _pm_position, _cartesian, max_width = 300, max_height = 500, infoDiv;
            var coordinate = [feature._name.lon,feature._name.lat,];
            var data = feature._name;
            if(data != undefined){
              var pop_container = document.getElementById('popup');
              var pop_content = document.getElementById('popup-content');
              pop_container.style.display = "display";
              var point = {"lng":Number(feature._name.lon),"lat":Number(feature._name.lat),"alt":0}
              var cartesian = _this.WGS84_to_Cartesian3(point);
              var cartographic = _this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
              var picks = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, cartesian);

              _position = CLICK.position;
              _cartesian = cartesian;
              _pm_position = {x: picks.x, y: picks.y}

              var lng = cartographic.longitude * 180 / Math.PI;
              var lat = cartographic.latitude * 180 / Math.PI;
              var hei = cartographic.height;

              window.document.getElementById("popup").style.display = "block";

              var _pm_position_2;
              var  clickFun = function () {
                if (_pm_position != _pm_position_2) {
                  _pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, _cartesian);
                  if(window.document.getElementById("popup") != null){
                    var popw = window.document.getElementById("popup").offsetWidth;
                    var poph = window.document.getElementById("popup").offsetHeight;

                    var trackPopUpContent_ = window.document.getElementById("popup");
                    trackPopUpContent_.style.left = _pm_position_2.x + (popw-391)+"px";
                    trackPopUpContent_.style.top = _pm_position_2.y - (poph+10)+"px";
                  }
                }
              }
              _this.viewer.scene.postRender.removeEventListener(clickFun);
              _this.viewer.scene.postRender.addEventListener(clickFun);

              var pop_closer = document.getElementById('popup-closer');
              pop_closer.onclick = function () {
                _this.viewer.scene.postRender.removeEventListener(clickFun);
                pop_container.style.left = '-550px';
                pop_container.style.display = "none";
                return false;
              };
            }
          }

3、属性信息html代码

<div id="popup" class="ol-popup">详细信息
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content" style="width:300px; height:260px; text-align: left;">
        <el-table
          :data="tableData3"
          height="250"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="名称"
            width="160">
          </el-table-column>
          <el-table-column
            prop="value"
            label="值">
          </el-table-column>
        </el-table>
    </div>
  </div>

4、css样式代码

<style scoped>
  .ol-popup {
    position: absolute;
    color: white;
    background-color: #112959;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 20px;
    border-radius: 10px;
    /*border: 1px solid #cccccc;*/
    bottom: 12px;
    height: 300px;
    /*right: -550px;*/
    display: none;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: #112959;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    color: white;
  }
  .ol-popup-closer:after {
    content: "✖";
  }
</style>