标签：popup 推荐 feature tooltip var getElementById Cesium position pm

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代码

<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>

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

标签：popup,推荐,feature,tooltip,var,getElementById,Cesium,position,pm
来源： https://www.cnblogs.com/hustshu/p/16130345.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。