作者：taco
目录
在很多项目中，通常会出现需要我单独去定位到某一个构件（对象）的情况。然而在查找接口会发现。没有办法直接找到对象的中心点从而定位过去，通常都是以图层进行定位。那么针对这一情况应该如何操作进行定位呢？数据应该如何处理一下呢？
本篇文章将结合项目中实际情况介绍如何处理该类型数据。
一、模型数据制作定位属性
由于涉及到前端查询的问题，所以尽量保持图层名与缓存名称以及查询的表名称有关联关系，这里缓存与图层名保持一致。
接下来以【桥梁】数据进行示范。
1.获取每个构建的中心点
右键模型数据集【浏览属性表】，选择计算几何属性功能。
几何属性选择中心点坐标即可获取各个构建的中心点位置
2.右键桥梁其他数据集选择【属性】。
3.在【属性表】中创建字段【LayerName】、【ModelID】两个字段。
4.右键模型数据集【浏览属性表】=>【右键更新列】
属性字段【ModelID】更新以Smid为基础进行更新,便于前端代码控制定位或颜色高亮
属性字段【LayerName】更新以图层名成进行更新，便于后期获取图层信息或显示隐藏。
5.提取高度字段
导航栏中【三维数据】-【模型工具】-【属性提取】中可以提取模型的高度。此时提取模型的顶部高程即可。（如果认为顶部高程不符合要求，可以提取顶部和底部高程后求和取平均值）
6.另存为属性表数据集
由于模型数据集本身包含很多的geometry信息，会导致前端查询速度变慢，此处我们将模型数据集存储为不包含geometry的属性表格式。
Ctrl+A全选表并右键另存为一个新的数据集
将结果数据存储为属性表
7.合并属性表
将所有模型数据集按照1-6步骤处理后会得到多个属性表。此时我们需要合并一下便于查询。
创建一个新的属性表数据集为总数据集，使用【数据】-【追加行】功能进行追加，将处理好后的数据合并为一个表中。
二、iClient for Cesium定位代码
在实际项目应用中，会根据某一个关键值，或是唯一标识值的字段进行查询定位，代码思路主要是根据这个唯一标识进行SQL查询，返回对应的构件图层，位置信息进行定位。
1.这里定义workcode 为唯一标识，以该字段进行查询。
2.查询结果为包含该字段的features。首先提取出id。这里拿到的id为【ModelID】字段。用于定位。并提取出【LayerName】字段用于指定图层。
3.使用【centerx】【centery】【modelheight】三个字段用于模型定位。
这样我们就完成了模型定位的操作。
4.其他定位配置
俯仰角问题：
设置不同的飞行俯仰角参数。如需向下看则调整pitch为负值即可。
如需向上查看则调整为正值即可。
视角距离模型中心问题：
如果对模型中心点高度位置不满意的话，可以通过roll参数进行远近的微调。
三、完整示例代码
<!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>SQL查询</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
<style>
input[type=text] {
TEXT-ALIGN: center;
z-index: 3;
height: 18px;
background: none;
border: none;
padding: 5px 0;
-webkit-transition: 0.3s;
transition: 0.3s;
border-bottom: 2px solid #b8b2b2;
color: aliceblue;
}
</style>
</head>
<body class="loading">
<div id="cesiumContainer"></div>
<div id="toolbar" class="param-container tool-bar">
<label style="font: 400 13.3333px Arial;">SQL</label>
<input type="text" id="workid" value="D08B22X32">
<button type="button" id="search" class="button black">查询</button>
<br>
<select id="position" style="width: 100%">
<option value="1">定位点1</option>
<option value="2">定位点2</option>
<option value="3">定位点3</option>
<option value="4">点位点4</option>
</select>
</div>
<div id="bubble" class="bubble">
<div id="tools" style="text-align : right">
<span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
</div>
<div style="overflow-y:scroll;height:150px" id="tableContainer">
<table id="tab"></table>
</div>
</div>
<script>
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度
scene.debugShowFramesPerSecond = true;
scene.hdrEnabled = false;
scene.sun.show = true;
// 01设置环境光的强度-新处理CBD场景
scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
// 添加光源
var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 480);
//光源方向点
var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 430);
var dirLightOptions = {
targetPosition: targetPosition1,
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
intensity: 0.55
};
directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);
scene.addLightSource(directionalLight_1);
var widget = viewer.cesiumWidget;
var buildingLayer; //建筑图层
var IDs = [];
$("#search").click(function() {
doSqlQuery($("#workid").val());
});
$('#loadingbar').remove();
try {
//var promise = scene.open("http://localhost:8090/iserver/services/3D-scene-2/rest/realspace");
var p = scene.open("http://localhost:8090/iserver/services/3D-scene-2/rest/realspace");
Cesium.when(p, function(layers) {
viewer.flyTo(p);
}, function() {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
});
} catch (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
function doSqlQuery(code) {
var sqlStr = "WorkCode" + "=" + "'" + code + "'"
console.log(sqlStr)
console.log("===================================================================")
var sqlParameter = {
"datasetNames": ["定位:桥梁其他属性"],
getFeatureMode: "SQL",
queryParameter: {
attributeFilter: sqlStr
}
};
var url =
"http://localhost:8090/iserver/services/data-chaxun/rest/data/featureResults.rjson?returnContent=true";
var queryData = JSON.stringify(sqlParameter);
$.ajax({
type: "post",
url: url,
data: queryData,
success: function(result) {
var resultObj = JSON.parse(result);
let layers = viewer.scene.layers._layerQueue;
var fs = resultObj.features
console.log(fs);
var ids = [];
for (let i = 0; i < fs.length; i++) {
var idvalue = fs[i].fieldValues[0];
ids.push(idvalue)
}
//var layers = [];
console.log(ids);
let f = resultObj.features[0];
console.log(f);
let left = f.fieldValues[96];
let right = f.fieldValues[97];
let top = f.fieldValues[98];
let bottom = f.fieldValues[99];
let layername = f.fieldValues[94];
for (let j = 0; j < layers.length; j++) {
let name = layers[j].name;
layers[j].removeAllObjsColor();
if (name != layername) {
layers[j].style3D.fillForeColor.alpha = 0.1;
}
}
//console.log(layers)
var uselayer = viewer.scene.layers.find(layername)
var color = new Cesium.Color.fromCssColorString("rgba(239, 24, 81, 1)");
//for (let j = 0; j < viewer.scene.layers._layers)
uselayer.setObjsColor(ids, color)
//uselayer.setObjsVisible(ids, true)
console.log(uselayer)
let cx = f.fieldValues[92]
let cy = f.fieldValues[93]
let h = f.fieldValues[95]
var center = Cesium.Cartesian3.fromDegrees(parseFloat(cx), parseFloat(cy), parseFloat(
h)-20)
//var BoundingSphere = new Cesium.BoundingSphere(center, 50);
let head = Cesium.Math.toRadians(0.0);
let pitch = Cesium.Math.toRadians(-30.0);
let roll = 150
viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(center, 0), {
offset: new Cesium.HeadingPitchRange(head, pitch, roll),
//duration: 2,
});
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(parseFloat(cx), parseFloat(cy),
// parseFloat(h) + 50),
// // orientation: {
// // heading: 4.771817,
// // pitch: -0.190922,
// // roll: 0.0
// // },
// duration: 3,
// });
// if (resultObj.featureCount > 0) {
// //onQueryComplete(resultObj.features);
// }
},
error: function(msg) {
console.log(msg);
},
// complete: function () {
// console.log("complete");
// }
})
}
function processFailed(queryEventArgs) {
alert('查询失败！');
}
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
</script>
</body>
</html>
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
