SuperMap iClient3D for WebGL教程-S3MTilesLayer查询

S3MTileslayer是SuperMap iClient3D for WebGL用于加载各类多源数据生成的s3m缓存的图层，是在开发过程中必然会使用到的图层，这节课程就来讲解一个基础功能，查询。
S3MTileslayer有已经封装好的查询，通过设置setQueryParameter和添加pickEvent事件来实现查询。

//设置属性查询参数
                layer.setQueryParameter({
                    url: 'http://www.supermapol.com/realspace/services/data-jinjiang/rest/data',
                    dataSourceName: 'jinjiang',
                    dataSetName: 'test',
                    keyWord: 'SmID'
                });
        //注册鼠标点击事件
        viewer.pickEvent.addEventListener(function(feature){
            var title = Cesium.defaultValue(feature.NAME,'');
            var description = Cesium.defaultValue(feature.DES,'');
            title.innerText = title;
            des.innerText = description;
            myimg.src = "./images/" + title + ".jpg";
        });

先说这种使用方式的优点：简单易用，有明确的接口说明。但这样的应用方式也有很大的弊端：（1）查询条件过于苛刻，必须是数据服务，keyword必须是SMID（2）必须同时设置查询条件和pickEvent事件才能触发查询。
在很多应用中，查询的属性表并不是通过数据服务来发布的，这个时候又怎么来实现点选查询功能呢？
这里将实现步骤分为三步：
1、扩展鼠标事件
2、获取选中对象，构建查询参数
3、执行查询，解析结果
一、扩展鼠标事件
这里扩展鼠标左键单击事件，也可根据需求扩展成右键、鼠标移动等。

let selecthandler = new Cesium.ScreenSpaceEventHandler(scene.canvas );
 selecthandler.setInputAction(e => {
    //点击回调事件
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

二、获取选中对象
在s3mTileslayer的方法中是通过getSelection来获取选中对象的smid，在点击的回调事件中加入获取选中对象smid的方法

scene.pick(e.position);
let selectedLayer = scene.layers._selectedLayer;
let id = selectedLayer.getSelection()[0];

为防止对象选中较慢，获取选中对象之前通过scene.pick再次选中对象
三、执行查询
这里构建一个最简单的方式，通过smid直接获取对象的方式来查询对象。这里通过axios执行get请求

that.$http .get(dataconfig.dataurl + id + ".json").then(result => {
    let data=result.data
}）

到这里就完成了一个最简单的自定义查询，下面来看完整代码

let selecthandler = new Cesium.ScreenSpaceEventHandler(scene.canvas );
 selecthandler.setInputAction(e => {
    //点击回调事件
    scene.pick(e.position);
    let selectedLayer = scene.layers._selectedLayer;
    let id = selectedLayer.getSelection()[0];
    that.$http .get(dataconfig.dataurl + id + ".json").then(result => {
        let data=result.data
    }）
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

至于更复杂的查询方式，都可以根据这种模式来实现。
这节课程就到这里，下节课程再见。欢迎留言、转发、评论。

最后编辑于：2019.07.26 14:23:46