cesium弹窗极简版

最新推荐文章于 2024-06-22 19:10:00 发布

大圣请转身

最新推荐文章于 2024-06-22 19:10:00 发布

阅读量631

点赞数

分类专栏： Cesium 文章标签： javascript

本文链接：https://blog.csdn.net/d351064378/article/details/109738837

版权

Cesium 专栏收录该内容

7 篇文章 6 订阅

订阅专栏

cesium弹窗极简版

不说废话, 拷过去直接就能用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>cesium弹窗极简版</title>
  <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div style="width: 100px; height: 100px; position: absolute;background: white;left: 0; top: 0;z-index: 10" id="hot"></div>
<div id='toolbar' class="param-container tool-bar">
  <p>提示：</p>
  <span>点击房屋面以查看动态单体化效果</span>
</div>
<script>
	var viewer = new Cesium.Viewer('cesiumContainer');
	var scene = viewer.scene;
	var camera = scene.camera;
	let element = document.getElementById('hot');
	let position = null
	document.getElementById('cesiumContainer').addEventListener('click', e => {
		element.style.left = e.x + 'px'
		element.style.top = e.y + 'px'
		position = scene.pickPosition({x: e.x, y: e.y});
	})
	viewer.camera.changed.addEventListener(() => {
		if (position) {
			let coordinates = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
					scene,
					position
			)
			element.style.left = coordinates.x + 'px'
			element.style.top = coordinates.y + 'px'
		}
	})
</script>
</body>
</html>

大圣请转身

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
cesium弹窗极简版

cesium弹窗极简版不说废话, 拷过去直接就能用<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫

专栏目录