我要
提问
智能客服
首页 / 浏览问题 / 三维GIS / 问题详情
三维场景 鼠标监听不起作用 pickEvent.addEventListener
Amanda_k...
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日
是倾斜摄影的，数据怎么发给您？
Amanda_k...
1EXP 2020年02月03日
数据私信发给您了
Amanda_k...
1EXP 2020年02月03日
需要部分倾斜和udb数据，可以私信发我百度网盘链接，倾斜摄影发一点就可以
那哲尘
2,701EXP 2020年02月03日

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

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

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

那哲尘
2,701EXP 2020年02月03日
尝试过单体化，显示单体化成功后，还是不能点击进行查询，需要将矢量面导入才可以，可能是单体化没有成功。如果采用第二中方法，请问是如何找到的矢量面，我在前端，layers中只有一个config,看不到矢量面的layer
Amanda_k...
1EXP 2020年02月03日

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

Amanda_k...
1EXP 2020年02月03日

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

    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

动态单体化示例

那哲尘
2,701EXP 2020年02月03日

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

<!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>

Amanda_k...
1EXP 2020年02月03日

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

那哲尘
2,701EXP 2020年02月03日

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

Amanda_k...
1EXP 2020年02月04日

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

Amanda_k...
1EXP 2020年02月04日

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

Amanda_k...
1EXP 2020年02月04日

智能推荐

热门文章
查看更多>
关注我们
超图软件官网 SuperMap Online 地图慧 帮助中心 备案信息 技术资源中心
...