scenes to be used
When we use WebGL to query the surface data service, we will find that the complete surface data can be queried and the front end can be drawn normally, but when encountering some special surface objects, such as the surface data of the island hole polygon as shown in the figure below, abnormal situations will occur .
reason
It is the point object queried in the data service of iServer, in addition to the polygon boundary node data of the guide hole, and the node data of the inner island hole, we cannot directly construct it like ordinary surface objects.
1. View data service
Let's first understand the structure returned by the guide hole polygon in the data service:
Figure 1 is an ordinary surface object; Figure 2 is an island hole polygon.
Here, we will find that in the returned structure feature, in addition to the points node array, there is also a partTopo and parts attributes.
partTopo: represents the topology of the object, 1 represents the island, -1 represents the hole;
parts: t is the number of nodes contained in the corresponding sub-object.
Through the analysis of the above parameters, we can use the data in parts to group points after identifying island holes through partTopo . Take the above figure as an example, through the partTopo and part parameters, it can be determined that the first 7 points in points are the nodes of the island, and 7 to 7+9 are the nodes of the hole object.
Through the analysis of the data structure, we can build the guide hole object in WebGL. The specific implementation code is as follows:
<!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>矢量面</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-select.min.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<script>
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: false
});
//查询成功后，对节点进行重新弄分组，然后构建对象，添加到entity;
function onQueryComplete(features) {
console.log("features", features);
var feature = features[0];
var point3ds = [];
var pointholes = [];
var partTopoInfor = [];
var partTopo = feature.geometry.partTopo;
var parts = feature.geometry.parts
console.log("feature.geometry", feature.geometry);
if (partTopo.length > 0) {
for (var i = 0; i < partTopo.length; i++) {
partTopoInfor.push({
partTopoValue: partTopo[i],
partsValue: parts[i]
});
}
}
var j = 0;
console.log("partTopoInfor", partTopoInfor);
for (var i = 0; i < partTopoInfor.length; i++) {
console.log("partTopoValue", partTopoInfor[i].partTopoValue)
if (partTopoInfor[i].partTopoValue === 1) {
for (j; j < partTopoInfor[i].partsValue; j++) {
point3ds.push(feature.geometry.points[j].x, feature.geometry.points[j].y);
}
} else {
var holes = j;
console.log("j", j);
console.log("holescount", holes + partTopoInfor[i].partsValue);
for (j; j < holes + partTopoInfor[i].partsValue; j++) {
pointholes.push(feature.geometry.points[j].x, feature.geometry.points[j].y);
}
}
}
console.log("point3ds", point3ds);
console.log("pointholes", pointholes);
if (partTopo.length > 1) {
console.log("partTopo>1");
viewer.entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(point3ds),
holes: [{
positions: Cesium.Cartesian3.fromDegreesArray(pointholes),
}],
},
material: new Cesium.Color(255 / 255, 0 / 255, 255 / 255, 0.6)
},
// clampToGround: true
});
} else {
console.log("partTopo<1");
viewer.entities.add({
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray(point3ds)
},
material: new Cesium.Color(255 / 255, 0 / 255, 255 / 255, 0.6)
},
// clampToGround: true
});
}
}
//根据数据服务去查询获取到对应的对象；
//smid = 4为导洞多边形，smid为2的时候为普通的面对象；
// doSqlQuery("smid = 4");
doSqlQuery("smid = 2");
function doSqlQuery(sqlStr) {
var sqlParameter = {
"datasetNames": ["导洞多边形:New_Region"],
getFeatureMode: "SQL",
queryParameter: {
attributeFilter: sqlStr
}
};
var url =
"http://localhost:8090/iserver/services/data-Data/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);
console.log("resultObj", resultObj);
if (resultObj.featureCount > 0) {
onQueryComplete(resultObj.features);
}
},
error: function(msg) {
console.log(msg);
},
})
}
$('#loadingbar').remove();
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
</script>
</body>
</html>
Among them, the data service http://localhost:8090/iserver/services/data-Data/rest/data/featureResults.rjson?returnContent=true is a data service published by itself, where you can make data in advance through the desktop.
iDesktop faithfully builds the island hole polygon method:
1. Create a new surface dataset, double-click to add it to the map;
2. The layer setting bit can be edited, and then draw an ordinary polygonal surface object (the island object outside),
3. Then use the [Screen Cutting] function of the object editor to dig a hole in the middle of the surface drawn in the previous step. After completion, delete the surface object in the middle.
