• cesium中divPoint展示数据


    cesium中divPoint展示数据

    在用点击面获取位置信息的时候,会弹出一个divPoint框,用来展示这个面的属性信息;或者位置信息。

    代码如下:

     1  var handlerClick = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     2     var divPoint = null;
     3     handlerClick.setInputAction(function (movement) {
     4         var position = viewer.scene.pickPosition(movement.position);
     5         if (position) {
     6             var cartographic = Cesium.Cartographic.fromCartesian(position);
     7             var BSM = showDivPositionOld.BSM._value;
     8             var JSMJ = showDivPositionOld.JSMJ._value;
     9             var YSDM = showDivPositionOld.YSDM._value;
    10             var html = `<div class="label">
    11                             <table>
    12                                     <tr>
    13                                         <th>属性名</th>
    14                                         <th>属性值</th>
    15                                     </tr>
    16                                     <tr>
    17                                         <td>BSM</td>
    18                                         <td>{BSM}</td>
    19                                     </tr>
    20                                     <tr>
    21                                         <td>JSMJ</td>
    22                                         <td>{JSMJ}</td>
    23                                     </tr>
    24                                     <tr>
    25                                         <td>YSDM</td>
    26                                         <td>{YSDM}</td>
    27                                     </tr>
    28                                 </table>
    29                                 <span class="triangle"></span>
    30                             </div>`;
    31             html = html.replace('{BSM}', BSM)
    32                 .replace('{JSMJ}', JSMJ)
    33                 .replace('{YSDM}', YSDM);
    34 
    35             if (divPoint) {
    36                 divPoint.destroy();
    37                 divPoint = null;
    38             }
    39 
    40             divPoint = new Cesium.DivPoint(viewer, {
    41                 html: html,
    42                 position: position,
    43                 anchor: [0, -15],
    44                 noEvent: true
    45             });
    46         }
    47     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    其中我获取的是面的属性信息。如果你想获取它的经纬度信息的话,方法是一样的。

     divPoint框就是上面模板字符串里面的html;

    divPoint = new Cesium.DivPoint(viewer, {
                    html: html,//模板字符串中的html
                   position: position,//你获取到的位置
                    anchor: [0, -15], 偏移角度
                 noEvent: true  是否开启
                })

    相关学习群:854184700

  • 相关阅读:
    五、页脚footer
    一、页眉header
    四、(2)列布局+媒体查询
    二、导航栏nav
    coredns介绍
    pandas指定列索引和行索引
    学习笔记246—国家自然科学基金申请书写作攻略【收藏】
    Axios请求传参的格式
    NodeJspm2常用命令
    FastAPI实现谷歌DialogFlow 接口问答批量导入导出和批量删除 DialogFlow batch import and export Q&A interface
  • 原文地址:https://www.cnblogs.com/yaosusu/p/11484796.html
Copyright © 2020-2023  润新知