鼠标点击的位置弹出信息框

最新推荐文章于 2024-05-29 11:38:40 发布

「已注销」

最新推荐文章于 2024-05-29 11:38:40 发布

阅读量7.8k

点赞数 6

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

本文链接：https://blog.csdn.net/liu844133828/article/details/84649293

版权

Cesium 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

在鼠标的MOUSE_DOWM事件中, 根据鼠标点击的位置, 动态的创建<div>元素, 显示数据信息.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload=function(){
		    document.onmousedown=function(ev){
		    	
		    	var mDiv = document.getElementById('carBox');
		    	if(mDiv){
		    		document.body.removeChild(mDiv);	
		    	}
		        var oEvent=ev||event;
		        var oDiv=document.createElement('div');
		        oDiv.id = "carBox";
		        oDiv.style.left=(oEvent.clientX-130)+'px';  // 指定创建的DIV在文档中距离左侧的位置
		        oDiv.style.top=(oEvent.clientY-145)+'px';  // 指定创建的DIV在文档中距离顶部的位置
		        oDiv.style.border='1px solid #0000FF'; // 设置边框
		        oDiv.style.borderRadius = '25px';
		        oDiv.style.background='rgba(0,0,0,0.5)';
		        oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
		        oDiv.style.width='260px'; // 指定宽度
		        oDiv.style.height='135px'; // 指定高度
		        var content = '<div style="padding: 10px;color: #FFF;font-size: 10px;">'+
		        '<div style="width:100%;height:100px;overflow:auto;">'+
		        '<table style="float:top;width:100%;height:100%;">'+
		        '<tr><td style="width:60px;">设备号:</td><td>设备号2</td></tr>'+
		        '<tr><td style="width:60px;">当前位置:</td><td>北京市顺义区军营南街10号</td></tr>'+
		        '<tr><td style="width:60px;">更新时间:</td><td>2018-11-20 09:39:20</td></tr>'+
		        '</table>'+
		        '</div>'+
		        '<div style="float:bottom;width:100%;">'+
		        '<a href="./a.html" style="float:left;margin-left:30px;">历史轨迹</a>'+
		        '<a href="./a.html" style="float:right;margin-right:30px;">视频查看</a>'+
		        '</div>'+
		        '</div>';
		        oDiv.innerHTML = content;
		        document.body.appendChild(oDiv); 
		    }
		}
</script>
	</body>
</html>

运行效果

接下来在Cesium中显示车辆信息

将后端获取到的车辆数据作为标注显示到地图上

点击图标, 弹出信息框, 显示车辆信息

代码实现

function loadScreenHandler(){
		handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		var clickPosition = undefined;
		//LEFT_DOWN
		handler.setInputAction(function(movement) {
			clickPosition = movement.position;
			//如果carBox正在显示, 则移除
			removeCarBox();
		}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

		//LEFT_UP
		handler.setInputAction(function(movement) {
				if((clickPosition.x - movement.position.x > 3) || (clickPosition.x - movement.position.x < -3) ||
					(clickPosition.y - movement.position.y > 3) || (clickPosition.y - movement.position.y < -3)) {
					clickPosition = undefined;
					return;
				}

		    	
		    	//获取点击的车辆
				var pick = viewer.scene.pick(movement.position);

				if(Cesium.defined(pick)) {
					/*点击标注*/
					if(pick.id) {
				        var oDiv=document.createElement('div');
				        oDiv.id = "carBox";
				        oDiv.style.left=(movement.position.x-130)+'px';  // 指定创建的DIV在文档中距离左侧的位置
				        oDiv.style.top=(movement.position.y-135)+'px';  // 指定创建的DIV在文档中距离顶部的位置
				        oDiv.style.border='1px solid #0000FF'; // 设置边框
				        oDiv.style.borderRadius = '25px';
				        oDiv.style.background='rgba(0,0,0,0.5)';
				        oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
				        oDiv.style.width='260px'; // 指定宽度
				        oDiv.style.height='135px'; // 指定高度
				        var content = '<div id="carBox" style="padding: 10px;color: #FFF;font-size: 10px;">'+
				        '<div style="width:100%;height:100px;overflow:auto;">'+
				        '<table style="float:top;width:100%;height:100%;">'+
				        '<tr><td style="width:60px;">设备号:</td><td>'+pick.id.carNum+'</td></tr>'+
				        '<tr><td style="width:60px;">当前位置:</td><td>'+pick.id.carLocation+'</td></tr>'+
				        '<tr><td style="width:60px;">更新时间:</td><td>'+pick.id.carTime+'</td></tr>'+
				        '</table>'+
				        '</div>'+
				        '<div style="float:bottom;width:100%;">'+
				        '<a href="javascript:void(0);" style="float:left;margin-left:30px;">历史轨迹</a>'+
				        '<a href="javascript:void(0);" style="float:right;margin-right:30px;">视频查看</a>'+
				        '</div>'+
				        '</div>';
				        oDiv.innerHTML = content;
				        document.body.appendChild(oDiv); 
					}
				}
			}, Cesium.ScreenSpaceEventType.LEFT_UP);
	}
	
	
	/**
	 * 移除carBox
	 */
	function removeCarBox(){
		var mDiv = document.getElementById('carBox');
    	if(mDiv){
    		document.body.removeChild(mDiv);	
    	}
	}

「已注销」

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
鼠标点击的位置弹出信息框

在鼠标的MOUSE_DOWM事件中, 根据鼠标点击的位置, 动态的创建<div>元素, 显示数据信息.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...
复制链接

扫一扫