首页 / 浏览问题 / WebGIS / 问题详情
照着视频写属性查询弹窗没反应
8EXP 2024年03月18日
<!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/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js" data-main="js/main"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
    <blockquote id="bubble" class="bubble">
        <img id="myimg" src="./images/OfficeBuilding.jpg" width="50%" height="auto">
        <h2 id="title"></h2>
    </blockquote>

    <script type="text/javascript">
        function onload(Cesium) {
            
            //初始化viewer部件
            var viewer = new Cesium.Viewer('cesiumContainer');
            var url = "http://localhost:8090/iserver/services/3D-WorkSpace/rest/realspace/datas/Xiaoying/config";
            var scene = viewer.scene;
            var canvas = scene.canvas;
            var widget = viewer.cesiumWidget;

            try {
                //添加S3M图层服务
                var promise = scene.addS3MTilesLayerByScp(url, {
                    name: 'WorkSpace'
                });
                Cesium.when(promise, function (layers) {
                    if (!scene.pickPositionSupported) {
                        alert('不支持深度拾取,属性查询功能无法使用!');
                    }
                    //设置相机视角
                    scene.camera.setView({
                        destination: Cesium.Cartesian3.fromDegrees(113.715, 34.8, 5000)
                    });

                    // 设置查询参数
                    layer.setQueryParameter({
                        url: 'http://localhost:8090/iserver/services/data-WorkSpace/rest/data',
                        dataSourceName: 'Zhengzhou',
                        dataSetName: 'NewRegion',
                        KeyWord: 'SmID'
                    }),
                        function (e) {
                            if (widget._showRenderLoopErrors) {
                                var title = '渲染时发生错误,已停止渲染。';
                                widget.showErrorPanel(title, undefined, e);
                            }
                        }
                });
            }
            catch (e) {
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误,已停止渲染。';
                    widget.showErrorPanel(title, undefined, e);
                }
            }
            //设置自定义信息窗
            var infoboxContainer = document.getElementById("bubble");
            viewer.customInfobox = infoboxContainer;

            //显示查询结果
            var ti = document.getElementById("bubble");
            viewer.pickEvent.addEventLisstener(function (feature) {
                var title = Cesium.defaultBalue(feature.NAME, '')
                ti.innerText = title
            });

        }
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>

上面是我照着这个SuperMap技术资源中心|为您提供全面的在线技术服务里面视频写的,不知道哪里出了问题

点击模型会有颜色变化,但是没有弹窗

1个回答

您好!需要根据F12控制台中的报错来判断。比如addEventLisstener您就拼写错误,正确应为addEventListener

此外,属性查询的话,建议参考这个示例属性查询 (supermap.com.cn)http://support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#S3MTiles

希望可以帮助到您!

1,452EXP 2024年03月19日
改了以后还是一样的效果,是不是视频教程跟不上代码更新啊
我用我编辑的代码加载示例“jinjiang”这个S3M图层服务,能够加载,但是点击也没有反应。html所在位置是supermap iclient for cesium——example——webgl下面。

http://edu.supermap.com/#/lessonInfo?id=3c8ca309be344ec2978260aa4b3b14ad

您参考一下这个917的Cesium示例demo解读呢

...