API参考http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.html
一、使用场景
在给定的模型里面，选定其中某个模型返回其属性进行展示，以官方例子中的樱花树为例，选择场景中的某一事物，需要返回他的属性信息。
二、数据处理及发布
1、管网下载樱花树数据，用桌面打开，可以查看默认的场景信息。
2、给数据集添加缓存，操作如下
（1）选定数据集，右键生成缓存，缓存类型如果有OSGB，选择OSGB格式，文件类型选择s3m，选择缓存存放目录
生成目录如下
注：每个数据集添加的缓存文件加都会带有一个.scp文件，该文件是用来将缓存添加到图层中来
（3）添加缓存到图层
打开场景，在图层管理器中，右键选择“普通图层”，添加“三维切片缓存图层”，选择每个数据集对应的缓存文件.scp，打开即可，如果多个数据集，重复以上步骤即可。
（4）将模型数据表另存为属性表（官方支持说是为了数据服务中查询效率）
选择数据集，浏览属性表，全选打开的表记录，鼠标右键，另存为数据集，保存为属性表即可
（5）保存新的工作空间，Iserver发布，发布选择三维服务，如果有数据查询，再加上数据服务就可以了。
三、webgl开发
1、加载影像图层，超图已经做好了，直接上代码即可
根据项目喜好，添加即可
2、设置气泡位置（非必须，可以换成自己的弹窗，或者alert）
3、添加缓存图层（s3m）
图中的相机参数第一可以通过桌面获取，或者在Iserver中webgl浏览时打印出相机的对象console.log(promise.camera)
4、添加图层点击事件
查询点击的面或者范围的的图层ID(数据集中的SMID)进行sql查询，查出具体的面的 其他属性，空间和sql的结合。
5、sql查询
和二维查询的方式一样，调用官方的api进行查询，需要注意的是datasetNames: [“Cherry:” + “yhsdata”] 里面的数据集最好使用属性表形式，如果采用空间查询，需要将属性表转成线、面的等矢量表，可以进行相交，包含等查询。
6、查询成功，属性展示
相关截图
相关代码
<!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">
<script src="./js/supermap/SuperMap.Include.js"></script>
<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="./js/require.min.js" data-main="js/main"></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>
<!-- 气泡HTML -->
<div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;">
<div id="tools" style="text-align : right">
<span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
<span class="fui-export" id="bubblePosition" style="color: darkgrey; padding:5px" title="停靠"></span>
<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>
<div id='toolbar' class="param-container tool-bar">
<p>提示：</p>
<span>点击查看属性</span>
</div>
<script type="text/javascript">
/*示范代码说明：
*分层分户信息查询
*
*主要涉及接口：
*setQueryParameter
*setPolygonoffset
*
* 示范代码：
*/
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL,
key: URL_CONFIG.BING_MAP_KEY
}));
var scene = viewer.scene;
var widget = viewer.cesiumWidget;
scene.globe.show = true;
/* 气泡相关 1/4 start */
var scenePosition = null; // 记录在场景中点击的笛卡尔坐标点
var dock = false; // 是否停靠
var infoboxContainer = document.getElementById("bubble");
var table = document.getElementById("tab"); // 气泡内的表格
$("#bubblePosition").click(function() { // 停靠状态切换
dock = !dock;
if ($("#bubblePosition").hasClass("fui-export")) {
$("#bubble").removeClass("bubble").addClass("float");
$("#bubblePosition").removeClass("fui-export").addClass("fui-bubble");
$("#bubblePosition")[0].title = "悬浮";
$("#bubble").css({
'left': '82%',
'bottom': '45%'
});
$("#tableContainer").css({
'height': '350px'
});
} else if ($("#bubblePosition").hasClass("fui-bubble")) {
$("#bubble").removeClass("float").addClass("bubble");
$("#bubblePosition").removeClass("fui-bubble").addClass("fui-export");
$("#bubblePosition")[0].title = "停靠";
$("#tableContainer").css({
'height': '150px'
});
}
});
$("#close").click(function() { // 关闭气泡
$("#bubble").hide();
});
scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置
if (scenePosition && !dock) {
var canvasHeight = scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
infoboxContainer.style.visibility = "visible";
}
});
/* 气泡相关 1/4 end */
var camera = scene.camera;
var lastHouseEntity = null; // 最后一次显示的高亮面
// 添加三维切片缓存图层
var promise = scene.addS3MTilesLayerByScp(URL_CONFIG.CHERRY_SEASON_MODEL, {
name: 'oblique photography'
});
promise.then(function(obliqueLayers) {
scene.camera.setView({
destination: new Cesium.Cartesian3.fromDegrees(114.290619, 30.61308, 47.9552),
orientation: {
heading: 0.34395448573153864,
pitch: -0.0538346996932666,
roll: 6.2831853071795685
}
});
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(e) {
// 获取点击位置笛卡尔坐标
var position = scene.pickPosition(e.position);
if (!position) {
position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
}
scenePosition = position; // 气泡相关 2/4
var s3mLayer = scene.layers.find("oblique photography");
var id = s3mLayer.getSelection();
console.log(id);
// 设置查询条件。Z在本例数据中代表户型面的底部高程，CENGG为层高，SmSdriW为最西边的经度，SmSdriE为最东边的经度，SmSdriS为最南边的纬度，SmSdriN为最北边的纬度
doSqlQuery('SMID=' + id + '');
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 去除加载动画
$('#loadingbar').remove();
});
function onQueryComplete(queryEventArgs) {
console.log(queryEventArgs);
var count = queryEventArgs.originResult.featureCount; // 选中信息对象
if (count > 0) {
var bottomHeight = Number(queryEventArgs.originResult.features[0].fieldValues[queryEventArgs.originResult.features[
0].fieldNames.indexOf('BOTTOM')]); // 底部高程
var extrudeHeight = Number(queryEventArgs.originResult.features[0].fieldValues[queryEventArgs.originResult.features[
0].fieldNames.indexOf('LSG')]); // 层高（拉伸高度）
Cesium.GroundPrimitive.bottomAltitude = bottomHeight; // 矢量面贴对象的底部高程
Cesium.GroundPrimitive.extrudeHeight = extrudeHeight; // 矢量面贴对象的拉伸高度
/* 气泡相关 4/4 start */
$("#bubble").show();
for (i = table.rows.length - 1; i > -1; i--) {
table.deleteRow(i);
}
for (var index in queryEventArgs.originResult.features[0].fieldNames) {
var newRow = table.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
cell1.innerHTML = queryEventArgs.originResult.features[0].fieldNames[index];
cell2.innerHTML = queryEventArgs.originResult.features[0].fieldValues[index];
}
return;
}
/* 气泡相关 4/4 end */
}
/**
* 执行SQL查询
* @param SQL SQL查询条件
*/
function doSqlQuery(SQL) {
var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
getFeatureParam = new SuperMap.REST.FilterParameter({
attributeFilter: SQL
});
getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
queryParameter: getFeatureParam,
toIndex: -1,
datasetNames: ["Cherry:" + "yhsdata"] // 本例中“户型面”为数据源名称，“专题户型面2D”为楼层面相应的数据集名称
});
var url = URL_CONFIG.CHERRY_SEASON_DATA; // 数据服务地址
getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, {
eventListeners: {
"processCompleted": onQueryComplete, // 查询成功时的回调函数
"processFailed": processFailed // 查询失败时的回调函数
}
});
getFeatureBySQLService.processAsync(getFeatureBySQLParams);
}
function processFailed(queryEventArgs) {
alert('查询失败！');
console.log(queryEventArgs);
}
}
</script>
</body>
</html>
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
