6、cesium中divPoint展示数据

时间：2019-09-08 12:46:18 阅读：327 评论：0 收藏：0 [点我收藏+]

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  是否开启
            })