最近在做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
版权声明：本文为博主原创文章，转载请附上博文链接！
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
