本文根據zlx312大佬的這篇文章進行修改，實現顯示多個氣泡窗口。具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>顯示多個氣泡</title>
<style>
@import url(../Apps/Sandcastle/templates/bucket.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
@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);
}
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="../Build/Cesium/Cesium.js"></script>
<script>
viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
infoBox: false
});
viewer.scene.camera.flyTo({
destination: new Cesium.Cartesian3.fromDegrees(114.477839, 38.062508, 500),
duration: 1 //動畫持續時間
});
var positions = [
Cesium.Cartographic.fromDegrees(114.477839, 38.062508),
];
var terrain = Cesium.createWorldTerrain();
var promise = Cesium.sampleTerrainMostDetailed(terrain, positions);
Cesium.when(promise, function(updatedPositions) {
var terrainHeight = updatedPositions[0].height;
var position = Cesium.Cartesian3.fromDegrees(114.477839, 38.062508, terrainHeight);
var position2 = Cesium.Cartesian3.fromDegrees(114.478839, 38.062508, terrainHeight);
var entity = viewer.entities.add({
position: position,
mark: 'camera',
model: {
uri: '../Source/Cesium_Air.glb',
//uri: '../Source/camera.glb',
minimumPixelSize: 128,
//maximumScale: 128
}
});
var entity2 = viewer.entities.add({
position: position2,
mark: 'camera',
model: {
uri: '../Source/Cesium_Air.glb',
//uri: '../Source/camera.glb',
minimumPixelSize: 128,
//maximumScale: 128
}
})
});
var removeHandler;
var content;
var autoInfoWindow;
var scene = viewer.scene;
var handler3D = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler3D.setInputAction(function(movement) {
var pick = scene.pick(movement.position);
if (pick && pick.id) {
var infoDiv = '<div class="leaflet-popup trackPopUpContent' + pick.id._id + '" style="top:5px;left:0;">' +
'<a class="leaflet-popup-close-button" href="#">×</a>' +
'<div class="leaflet-popup-content-wrapper">' +
'<div class="leaflet-popup-content trackPopUpLink' + pick.id._id + '" style="max-width: 300px;"></div>' +
'</div>' +
'<div class="leaflet-popup-tip-container">' +
'<div class="leaflet-popup-tip"></div>' +
'</div>' +
'</div>';
$("#cesiumContainer").append(infoDiv);
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>' +
'</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) {
$('.trackPopUpLink' + pick.id._id).empty();
$('.trackPopUpLink' + pick.id._id).append(obj.content);
function positionPopUp(c) {
var x = c.x - ($('.trackPopUpContent' + pick.id._id).width()) / 2;
var y = c.y - ($('.trackPopUpContent' + pick.id._id).height());
$('.trackPopUpContent' + pick.id._id).css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
}
var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
positionPopUp(c);
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 ((c.x !== changedC.x) || (c.y !== changedC.y)) {
positionPopUp(changedC);
c = changedC;
}
});
$('#cesiumContainer').on('click','.leaflet-popup-close-button',function(){
$(this).parent().remove()
removeHandler.call();
return false;
});
return id;
}
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
</html>