Cesium 添加自定义文字介绍界面

最新推荐文章于 2025-06-04 11:38:08 发布

qq_26723085

最新推荐文章于 2025-06-04 11:38:08 发布

阅读量9.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： Cesium自定义信息框

本文链接：https://blog.youkuaiyun.com/qq_26723085/article/details/84841310

首先添加style：

	<style type="text/css">
		#info {
            position: absolute;  
            width: 100px;
            height: 100px;
            z-index: 1000;
            display: none;
            background: rgba(255, 255, 255, 0.5);
            border: 2px solid greenyellow;
            border-radius: 4px;
        }         
	</style>

添加DIV:

<div id="cesiumContainer">
	<div id="info"></div>
</div>

注册点击事件：


			var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

            //注册鼠标点击事件
            handler.setInputAction(function(e) {

				
				pickedObject = scene.pick(e.position, 3, 3);

				if(Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
					showInfo(viewer.entities.getById(pickedObject.id.id));
					viewer.trackedEntity = viewer.entities.getById(pickedObjec