（转载）cesium的气泡弹窗，已实现

最近在做cesium的气泡弹窗，找到作者：zlx312 原文：https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy 写的比较好的博客，并按照教程实现了，在此感谢并转载记录以后备用！

（在借鉴过程中出现两个问题，通过查询资料解决了，主要由以下三点，

（1）因为刚开始做地图，刚开始找不到scene是哪里定义的，后台查询资料确定 var scene = viewer.scene;

(2) 可能是版本问题，我使用文中的

var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler3D.setInputAction(function(movement) { }定义鼠标事件一直诶成功，后来使用如下方法实现：

viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(getLittleWindow,Cesium.ScreenSpaceEventType.RIGHT_CLICK);

(3)可能是一些经纬度设置转化的差异，在文中的var cartographic = Cesium.Cartographic.fromCartesian(movement.position);我一直是失败，查询了一些资料(https://blog.csdn.net/u012123612/article/details/78621498?utm_source=copy )发现需要在这一步前面添加：

var cartesian=viewer.camera.pickEllipsoid(evt.position,viewer.scene.globe.ellipsoid);
var cartographic=Cesium.Cartographic.fromCartesian(cartesian);

）

由于我们实现过程中的一些设置会有差异，因此如需参考，读者可首先根据@zlx312 博客中的方法试试，如果不行可以尝试我的一些修改方法，如上两点。

下面是zlx312 博客原内容，希望对君有用：

在Web GIS开发的过程中，我们非常需要一个信息窗口去展示点击实体的功能，Cesium自带的InfoWindow是比较方便调用的，但是有很多局限性：比如它只能出现在右上角；比如它的样式不太美观；比如它的按钮无法响应js的onclick事件~

这个时候我就在想百度地图、高德地图的SDK多好用啊，气泡两行代码就可以生成了~在我百思不得解的时候，cesium交流群里的大大们告诉我——自定义气泡窗口。听起来非常麻烦呢，于是我就马不停蹄地开始实践啦~

思想和部分核心代码参考GIS之家的博文cesium自定义气泡窗口infoWindow后续优化篇点击打开链接 ,非常有启发性的一篇文章，这里就不再赘述了，不过GIS之家的文章非常简练，作为小白的我刚开始是一头雾水的。本章主要是对附上我经过几日的努力编写出的完整实现代码，以供大家参考。

CSS

@CHARSET "UTF-8";
/*leaflet风格气泡窗口样式模板*/
.leaflet-popup {
position: absolute;
text-align: center;
}
.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-popup-content-wrapper {
text-align: center;
max-height: 200px;
overflow-y: auto;
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

/*按钮样式*/
.add-button{

}
/**
* 动态添加气泡窗口
*/
var removeHandler;
var content;
var autoInfoWindow;
var infoDiv = '<div id="trackPopUp" style="display:none;">'+
           '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">'+
   '<a class="leaflet-popup-close-button" href="#">×</a>'+
   '<div class="leaflet-popup-content-wrapper">'+
   '<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width: 300px;"></div>'+
   '</div>'+
   '<div class="leaflet-popup-tip-container">'+
   '<div class="leaflet-popup-tip"></div>'+
   '</div>'+
   '</div>'+
           '</div>';
           $("#cesiumContainer").append(infoDiv);

       var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas);
       handler3D.setInputAction(function(movement) {
               var pick = scene.pick(movement.position);
               if(pick && pick.id){
                   console.log(pick.id);
                   $('#trackPopUp').show();
                   var cartographic = Cesium.Cartographic.fromCartesian(movement.position);
                   var point=[cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                   var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
                   var id=pick.id._id.replace(/[^0-9]/ig,"");
                   content =
                   '<table><tbody><tr><th style="color:black;">'+pick.id._name+'</th><td><button style="color:black;" οnclick="updateValve('+id+')">确定</button></td><td><button οnclick="deleteValve('+id+')" style="color:black;">删除</button></td></tr>'+
                   '<tr><th style="color:black;">类型</th><td><input style="color:black;" value='+station[id].stadianame+'></td></tr>'+
                   '<tr><th style="color:black;">经度</th><td><input id="x" style="color:black;" value='+station[id].x.toFixed(6)+'></td></tr>'+
                   '<tr><th style="color:black;">纬度</th><td><input id="y" style="color:black;" value='+station[id].y.toFixed(6)+'></td></tr>'+
               '</tbody></table>'
       var obj = {position:movement.position,destination:destination,content:content};
       infoWindow(obj);

       function infoWindow(obj) {
               var picked = scene.pick(obj.position);
               if (Cesium.defined(picked)) {
               var id = Cesium.defaultValue(picked.id, picked.primitive.id);
               if (id instanceof Cesium.Entity) {
                   $(".cesium-selection-wrapper").show();
                   $('#trackPopUpLink').empty();
                   $('#trackPopUpLink').append(obj.content);
                       function positionPopUp (c) {
                           var x = c.x - ($('#trackPopUpContent').width()) / 2;
                           var y = c.y - ($('#trackPopUpContent').height());
                           $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
                       }
                       var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                       $('#trackPopUp').show();
                       positionPopUp(c); // Initial position
                                                           // at the place item
                                                           // picked
                       removeHandler = viewer.scene.postRender.addEventListener(function () {
                           if(picked.id._polyline!=null){
                               var pos={};
                               pos.x=(id._polyline._positions._value["0"].x+id._polyline._positions._value[1].x)/2;
                               pos.y=(id._polyline._positions._value["0"].y+id._polyline._positions._value[1].y)/2;
                               pos.z=(id._polyline._positions._value["0"].z+id._polyline._positions._value[1].z)/2;
                               var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,pos);
                           }else{
                               var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, id._position._value);
                           }// If things moved, move the
                                               // popUp too
                           if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
                               positionPopUp(changedC);
                               c = changedC;
                           }
                       });
                       // PopUp close button event handler
                       $('.leaflet-popup-close-button').click(function() {
                           $('#trackPopUp').hide();
                           $('#trackPopUpLink').empty();
                           $(".cesium-selection-wrapper").hide();
                           removeHandler.call();
                           return false;
                       });
               return id;
               }
               }
       }
               }
               else{
                   $('#trackPopUp').hide();

               }
           }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
JS部分如上，我的后端是Java写的，从数据库中一次性取出了所有信息存为JSON，方便调用

该气泡窗会随着缩放移动而动态改变，也可以响应js jquery的点击事件，如果觉得样式单调，自行美化CSS就可以了，非常方便~

效果如下

备注：地图上的点线是我通过将cad文件直接解析为json进行读取的，如果有必要的话后面的文章也会写一下过程（虽然可能太简单了没人看哈哈）
---------------------
作者：zlx312
来源：CSDN
原文：https://blog.csdn.net/zlx312/article/details/79824940?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！

（转载）cesium的气泡弹窗，已实现相关推荐

qpython3h手机版写弹窗代码_Android Q之气泡弹窗的实现示例
在Android Q中,用户可以借助气泡,轻松地在设备上任何位置进行多任务处理.气泡内置于"通知"系统中,它会浮动在其他应用的上层,并会跟随用户的移动而移动到屏幕的任何位置,用于取 ...
Android Q之气泡弹窗
在Android Q中,用户可以借助气泡,轻松地在设备上任何位置进行多任务处理.气泡内置于"通知"系统中,它会浮动在其他应用的上层,并会跟随用户的移动而移动到屏幕的任何位置,用于取 ...
vue-directive 自定义指令实现popover气泡弹窗
vue 自定义指令实现popover气泡弹窗效果展示 1 .写好 popover 组件 2.创建自定义指令 popover.js 文件  <t ...
Cesium构造popup弹窗函数
初学Cesium,发现没有自带的popup方法,从网上找资料自己写了一个,供大家参考先上效果,样式方面大家可以自行发挥构造函数 class Popup {constructor(info) {th ...
cesium 设置时间_Cesium 车辆跟踪事件气泡弹窗一直开启
展示图: 功能思路: (1)设置创建时钟组件JulianDate,该时间组件很重要,不仅是用来追踪路线使用,还要监听每个时间点到达的坐标位置. (2)气泡的实时根据坐标刷新,上一篇有说到,根据当前时间 ...
Cesium 车辆跟踪事件气泡弹窗追随
展示图: 功能思路: (1)设置创建时钟组件JulianDate,该时间组件很重要,不仅是用来追踪路线使用,还要监听每个时间点到达的坐标位置. (2)气泡的实时根据坐标刷新,上一篇有说到,根据当前时间 ...
转载---Cesium简介
转载---https://blog.csdn.net/mrib/article/details/78260971 Cesium是什么 Cesium 是一款面向三维地球和地图的,世界级的JavaScri ...
[转载]《科幻世界》那些已消失的作者
看知乎日报突然想起了当年上学在图书馆看科幻世界的日子- 转载篇文章吧原文连接:http://blog.renren.com/share/258295456/792872881 前几日,在整理书架过程 ...
[转载]致创业者：APP已死服务永生
前几日,有位创业者和我讲他在带领团队做一个将爱踢球的人集中在一起的App,我告诉他你的创业方向错了.原因在于你的目的是要为爱踢球的人提供服务,而你现在却在竭尽全力的做App,你应该做的是设计你为爱踢球 ...

（转载）cesium的气泡弹窗，已实现

（转载）cesium的气泡弹窗，已实现相关推荐

最新文章

热门文章