首页 / 浏览问题 / 三维GIS / 问题详情
三维场景 鼠标监听不起作用 pickEvent.addEventListener
1EXP 2020年02月03日

使用产品:iserver10  iDesktop10i 操作系统:win10 x86
数据类型:文件型

问题详细描述:监听事件进不去,不能查询单体化属性,layer也已经找到了,setQueryParameter也写进去了,就是点击不好用,求解决!!!代码如下:

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>query</title>
		<link href="css/widgets.css" rel="stylesheet">
		<link href="css/pretty.css" rel="stylesheet"> 
		<script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>
		<script type="text/javascript">
			var viewer,url;
			function onload(Cesium){
				//初始化Viewer和场景部件
				viewer=new Cesium.Viewer('cesiumContainer');
				var scene= viewer.scene;
				//获取场景的url地址
				var url="http://localhost:8090/iserver/services/3D-DaYanTa/rest/realspace";
				//打开场景
				var promise = scene.open(url);
				var infoboxContainer = document.getElementById("bubble");
				viewer.customInfobox = infoboxContainer;
				Cesium.when(promise,function(layers){	
					console.log(scene.layers);
					var layer = scene.layers.find("Config");
					scene.camera.setView({destination:Cesium.Cartesian3.fromDegrees(0,0,800)});
					console.log(layer);
					layer.setQueryParameter({
						url: 'http://localhost:8090/iserver/services/data-DaYanTa/rest/data',
						dataSourceName: 'dayanta_1', 
						dataSetName: 'IsoLine_region_1_1_1', 
						keyWord: 'SmID'
					});
				});
				viewer.pickEvent.addEventListener(function(feature){  
						alert("监听事件已生效");    
				});
			}
		</script>
	</head>
	<body>
		<div id="cesiumContainer" style="width:100%;height:100%"></div>
		<blockquote id="bubble" class="bubble">
			<h2 id="title"></h2>
			<p id="des" class="word"></p>
		</blockquote> 
	</body>
</html>

1个回答

请问这个layer是模型吗,还是倾斜摄影,如果是模型的话,setQueryParameter中的数据是否由模型转出,如果都没有问题可以发部分数据让我这边看下
2,701EXP 2020年02月03日
是倾斜摄影的,数据怎么发给您?
数据私信发给您了
需要部分倾斜和udb数据,可以私信发我百度网盘链接,倾斜摄影发一点就可以

我刚才看了下数据,应该是S3M没有单体化,不能点击数据导致的。这边有两个解决方法。

第一,可以用原始osgb数据和udb数据生成单体化的倾斜然后前端调用

第二,或者对udb数据直接进行点击查询,下面是第二种的实现效果

尝试过单体化,显示单体化成功后,还是不能点击进行查询,需要将矢量面导入才可以,可能是单体化没有成功。如果采用第二中方法,请问是如何找到的矢量面,我在前端,layers中只有一个config,看不到矢量面的layer

以上是我单体化的过程和结果,单体化后,也不能点击查询属性,而且经纬度存在偏差,osgb格式的配置文件和矢量化的面数据,单独打开都是可以对应的,就是单体化后经纬度有变化,不知道是经纬度变化导致单体化不成功吗?

数据还在下载很慢,第二种的话可以通过发送请求来查询

    var queryObj = {
                "getFeatureMode": "SPATIAL",
                "spatialQueryMode": "INTERSECT",
                "datasetNames": [dataSourceName + ":" + dataSetName],
                "geometry": {
                    id: 0,
                    parts: [1],
                    points: [queryPoint],
                    type: "POINT"
                }
            };

            queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数

            $.ajax({
                type: "post",
                url: dataServiceUrl,
                data: queryObjJSON,
                success: function (result) {
                    var resultObj = JSON.parse(result);
                    if (resultObj.featureCount > 0) {
                        addClapFeature(resultObj.features[0]);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            })
        }

参考示例https://iserver.supermap.io/iserver/iClient/for3D/webgl/zh/examples/editor.html#dynamicDTH

动态单体化示例

 代码改成了这样,点获取到了,然后查询的结果一直为空,不知道哪里出了问题,数据集名称都是对的,求指导!麻烦了,如果打扰到您休息,明天解决也可以,真的麻烦了,谢谢

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>query</title>
		<link href="css/widgets.css" rel="stylesheet">
		<link href="css/pretty.css" rel="stylesheet"> 
		<script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>
		<script src="js/jquery.min.js"></script>
			<script type="text/javascript">
			var viewer,url;
			function onload(Cesium){
				//初始化Viewer和场景部件
				viewer=new Cesium.Viewer('cesiumContainer');
				var scene= viewer.scene;
				var camera = scene.camera;
				//获取场景的url地址
				var url="http://localhost:8090/iserver/services/3D-DaYanTa/rest/realspace";
				//打开场景
				var promise = scene.open(url);
				var infoboxContainer = document.getElementById("bubble");
				viewer.customInfobox = infoboxContainer;
				Cesium.when(promise,function(layers){	
					console.log(scene.layers.layerQueue);
					var layer = scene.layers.find("Config");
					scene.camera.setView({destination:Cesium.Cartesian3.fromDegrees(0,0,800)});
					console.log(layer);
					layer.setQueryParameter({
						url: 'http://localhost:8090/iserver/services/data-DaYanTa/rest/data',
						dataSourceName: 'dayanta_1', 
						dataSetName: 'IsoLine_region_1_1_1', 
						keyWord: 'SmID'
					});
					//console.log(layer);
				});
				viewer.pickEvent.addEventListener(function(feature){  
						alert("监听事件已生效");    
						// var title = Cesium.defaultValue(feature.NAME,''); 
						// var description = Cesium.defaultValue(feature.NAME,''); 
						// title.innerText = title;
						// des.innerText = description;
				});
				var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
				handler.setInputAction(function (e) {
					// 首先移除之前添加标识实体
					viewer.entities.removeById('identify-area');
					// 获取点击位置笛卡尔坐标
					var position = scene.pickPosition(e.position);
					// 从笛卡尔坐标获取经纬度
					var cartographic = Cesium.Cartographic.fromCartesian(position);
					var longitude = Cesium.Math.toDegrees(cartographic.longitude);
					var latitude = Cesium.Math.toDegrees(cartographic.latitude);

					var queryPoint = { // 查询点对象
						x: longitude,
						y: latitude
                };

                queryByPoint(queryPoint);
				console.log(queryPoint);

           	 	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
				function queryByPoint(queryPoint) {
					var queryObj = {
						"getFeatureMode": "SPATIAL",
						"spatialQueryMode": "INTERSECT",
						"datasetNames": ['dayanta_1' + ":" + 'region'],
						"geometry": {
							id: 0,
							parts: [1],
							points: [queryPoint],
							type: "POINT"
						}
						};

						queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数

						$.ajax({
							type: "post",
							url: "http://localhost:8090/iserver/services/data-DaYanTa/rest/data/featureResults.rjson?returnContent=true",
							data: queryObjJSON,
							success: function (result) {
								var resultObj = JSON.parse(result);
								if (resultObj.featureCount > 0) {
									addClapFeature(resultObj.features[0]);
								}
								console.log(resultObj);
							},
							error: function (msg) {
								console.log(msg);
							}
						})
				}

				// 将数据服务查询到的要素添加到场景中高亮显示,表示选中效果。
				function addClapFeature(feature) {
					var lonLatArr = getLonLatArray(feature.geometry.points);
					viewer.entities.add({
						id: 'identify-area',
						name: '单体化标识面',
						polygon: {
							hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
							material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
						},
						clampToS3M: true // 贴在S3M模型表面
					});
				}

				// 得到[经度,纬度,经度,纬度...]形式的数组,用于构造面。
				function getLonLatArray(points) {
					var point3D = [];
					points.forEach(function (point) {
						point3D.push(point.x);
						point3D.push(point.y);
					});
					return point3D;
				}
			}
		</script>
	</head>
	<body>
		<div id="cesiumContainer" style="width:100%;height:100%"></div>
		<blockquote id="bubble" class="bubble">
			<h2 id="title"></h2>
			<p id="des" class="word"></p>
		</blockquote> 
	</body>
</html>

我看了下,udb数据坐标系问题,将数据转为4326坐标系就可以了,现在的是3857的

请问是将工作空间,udb数据集中的矢量面坐标系改为4326是吗?我修改后,重新加载界面还是查询不到,是需要将面重新加载到场景中吗,可是4326是平面坐标系,好像加不到场景中。前端代码需要有修改吗?

将矢量面的坐标系投影变换为4326的就能高亮显示出来了,但是有点问题,有的面有数据但是高亮显示不出来,就像图中,选的框内的建筑,有数据,但就是不高亮显示

单体化的也成功了,在矢量面转换投影后,然后重新矢量化,就成功了,不过在加载界面时有报错,不知道是哪里写错了

...