cesium弹窗 popup完整代码
时间: 2023-08-13 13:07:22 浏览: 251
基于Cesium实现自定义弹窗效果组件,弹窗样式内容可以自定义,弹窗可跟随场景自适应移动,完整demo和源代码,代码未加密/未压
5星 · 资源好评率100%
当在Cesium中需要创建一个完整的弹出窗口时,您可以使用Cesium的Entity对象和自定义HTML、CSS来实现。下面是一个完整的示例代码,演示了如何在Cesium中生成一个弹出窗口:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cesium Popup</title>
<style>
.cesium-popup {
position: absolute;
padding: 10px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.cesium-popup-content {
margin-bottom: 10px;
}
.cesium-popup-close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="popup" class="cesium-popup" style="display: none;">
<div class="cesium-popup-content">
<h2>这是一个弹出窗口</h2>
<p>您可以在这里添加任意内容。</p>
</div>
<span class="cesium-popup-close" onclick="closePopup()">关闭</span>
</div>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
function showPopup(position) {
var popup = document.getElementById('popup');
popup.style.display = 'block';
popup.style.left = position.x + 'px';
popup.style.top = position.y + 'px';
}
function closePopup() {
var popup = document.getElementById('popup');
popup.style.display = 'none';
}
// 示例:在鼠标点击位置显示弹出窗口
viewer.screenSpaceEventHandler.setInputAction(function(event) {
showPopup(event.position);
}, Cesium.ScreenSpace
阅读全文