Cesium的tooltip(推荐)

https://www.jianshu.com/p/95f155c972f6
本文主要介绍在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代码

详细信息
    
    

        
          
          
          
          
        
    
  

4、css样式代码

本文转自 https://www.jianshu.com/p/95f155c972f6，如有侵权，请联系删除。