SuperMap WebGL技术点

1.图层加载

1.工作空间下单图层加载
注:url地址格式：http://127.0.0.1:8010/iserver/services/3Dtemp/rest/realspace/datas/name/config

var promise = viewer.scene.addS3MTilesLayerByScp(url,{name:name});
promise.then(function (map) {
    // 可在此处设置场景属性，添加属性查询等功能
},function (e) {
     console.error(e);
});

2.加载整个工作空间图层
注:url地址格式：http://127.0.0.1:8010/iserver/services/3Dtemp/rest/realspace

var promise = scene.open(url);
Cesium.when(promise, function (layers) {
	// 回调函数返工作空间下所有图层，需要遍历设定属性等操作
}, function (e) {
    if (widget._showRenderLoopErrors) {
        var title = '渲染时发生错误，已停止渲染。';
        widget.showErrorPanel(title, undefined, e);
    }
});

2.属性查询

注：url地址格式http://127.0.0.1:8010/iserver/services/3Dtemp/rest/data

var promise = viewer.scene.addS3MTilesLayerByScp(url,{name:name});
promise.then(function (map) {
    // 设置属性查询参数
     map.setQueryParameter({
         url: dataUrl,
         // 数据源名称
         dataSourceName: 'dataSourceName',
         // 数据集名称
         dataSetName: 'dataSetName',
         // 主键一般为SmID
         keyWord: 'SmID'
     });
},function (e) {
     console.error(e);
});

// 触发属性查询
viewer.pickEvent.addEventListener(function(feature){
	// feature属性查询返回数据
});

3.设置视角

1.无飞入过程

 viewer.scene.camera.setView({
 	/**投影坐标**/ 
 	//destination : new Cesium.Cartesian3(21258.2,-12412,601.644),
 	/**经纬度坐标**/
    destination : new Cesium.Cartesian3.fromDegrees(117.105002,36.827319,601.644),
    orientation : {
        heading : 0.067228,
        pitch : -0.268335,
        roll: 0.000274842
    }
});

2.有飞入过程

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(116.9863,36.756556,248935),
    orientation:{
        heading : 6.24248,
        pitch :  -1.56982,
        roll : 0
    },
    // 时间：秒
    duration:6,
    // 飞行完成执行方法
    complete:function () {
       
    }
});

4.添加气泡，多用于属性查询

.bubble {
    text-align:center;
    position: absolute;
    padding: 15px;
    margin: 0;
    background: #fff;
    max-width : 1080px;
    max-height: 960px;
}
.bubble float{
    right: 2%;
    top: 2%;
}
.bubble:after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50px;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #fff;
    display: block;
    width: 0;
}

<blockquote id="bubble" class="bubble">
    <div id="hotel" style="min-width:400px;height:400px"></div>
</blockquote>

var infoboxContainer = document.getElementById("bubble");
viewer.customInfobox = infoboxContainer;