【GIS】SuperMap-Web3D-Sql查询示例

复制代码
<!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>SQL Query</title>
        <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="./css/pretty.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/config.js"></script>
        <script src="./js/supermap/SuperMap.Include.js"></script>
        <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
        <style>
            input[type=text]{
            TEXT-ALIGN: center;
            z-index: 3;
            height: 18px;
            background: none;
            border: none;
            padding: 5px 0;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            border-bottom: 2px solid #b8b2b2;
            color: aliceblue;
        }
    </style>
    </head>
    <body class="loading">
        <div id="cesiumContainer"></div>
        <div id="toolbar" class="param-container tool-bar">
            <label style="font: 400 13.3333px Arial;">SQL</label><input type="text" id="SQL" value="1==1">
            <button type="button" id="search" class="button black">查询</button><br>

        </div>
        <div id="bubble" class="bubble">
            <div id="tools" style="text-align : right">
                <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>
        <script>
            window.flyToCenter = function(cameraPosition) {
                var pitch = Cesium.Math.toRadians(cameraPosition.tilt);
                console.log("pitch", pitch)
                scene.camera.flyTo({
                    //将经度、纬度、高度的坐标转换为笛卡尔坐标
                    destination: new Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude,
                        cameraPosition.altitude),
                    orientation: {
                        heading: cameraPosition.heading,
                        pitch: pitch,
                        roll: 0
                    }
                });
            }
            var viewer, scene, widget;
            var IDs = [];

            function onload(Cesium) {
                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
                }));
                scene = viewer.scene;
                widget = viewer.cesiumWidget;

                viewer.scene.fxaa = false;

                scene.globe.enableLighting = false;


                // 相机类
                camera = scene.camera;
                // 关闭深度检测
                scene.globe.depthTestAgainstTerrain = false;
                $('#loadingbar').remove();
                try {
                    console.log(URL_CONFIG.SCENE_CBD);
                    var promise = scene.open("http://XXXX/iserver/services/3D-XXXX/rest/realspace");
                    Cesium.when(promise, function(layers) {
                        //设置相机位置、视角，便于观察场景
                        
                        setTimeout(function() {
                            var secondCameraPosition = {
                                "altitude": 12000,
                                "heading": 0,
                                "latitude": 129.480,
                                "tilt": -42.45,
                                "longitude": 190.999
                            };
                            window.flyToCenter(secondCameraPosition);
                        }, 1000);
                        var camera = scene.camera;
                        $("#search").click(function() {
                            doSqlQuery($("#SQL").val());
                        });
                    }, function() {
                        var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                        widget.showErrorPanel(title, undefined, e);
                    });
                } catch (e) {
                    if (widget._showRenderLoopErrors) {
                        var title = '渲染时发生错误，已停止渲染。';
                        widget.showErrorPanel(title, undefined, e);
                    }
                }

                function onQueryComplete(queryEventArgs) {
                    var selectedFeatures = queryEventArgs.originResult.features;
                    viewer.entities.removeAll();
                    var buildingLayer = scene.layers.find("BBBB@AAAA");
                    for (var i = 0; i < selectedFeatures.length; i++) {
                        var value = selectedFeatures[i].fieldValues["0"];
                        var feature = selectedFeatures[i];
                        var des;
                        for (var j = 0; j < feature.fieldNames.length; j++) {
                            var index = j.toString();
                            if (j == 0) {
                                des = '<table class="cesium-infoBox-defaultTable"><tbody>' + '<tr><th>' + selectedFeatures[i].fieldNames[
                                    "0"] + '</th><td>' + selectedFeatures[i].fieldValues["0"] + '</td></tr>';
                            } else if (j == feature.fieldNames.length - 1) {
                                des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] +
                                    '</td></tr>' + "</tbody></table>";
                            } else {
                                des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] +
                                    '</td></tr>';
                            }
                        }
                        console.log(des);
                        //parseFloat(feature.geometry.position.z))
                        viewer.entities.add({
                            position: Cesium.Cartesian3.fromDegrees(
                                parseFloat(feature.geometry.position.x),
                                parseFloat(feature.geometry.position.y),
                                200),
                            billboard: {
                                image: 'images/location4.png',
                                width: 30,
                                height: 40,
                                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                            },
                            name: feature.fieldValues["0"],
                            description: des
                        });
                        IDs.push(parseInt(value));
                        buildingLayer.setObjsColor([value], Cesium.Color.fromRandom({
                            alpha: 0.8
                        }));
                    }

                    if (IDs.length > 0) {
                        console.log(IDs);
                        buildingLayer.setSelection(IDs);
                    }
                }

                function doSqlQuery(SQL) {
                    var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
                    getFeatureParam = new SuperMap.REST.FilterParameter({
                        attributeFilter: SQL
                    });
                    getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
                        queryParameter: getFeatureParam,
                        toIndex: -1,
                        datasetNames: ["AAAA:BBBB"]
                    });
                    var url = 'http://XXXX/iserver/services/data-XXXX/rest/data';
                    getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, {
                        eventListeners: {
                            "processCompleted": onQueryComplete,
                            "processFailed": processFailed
                        }
                    });
                    getFeatureBySQLService.processAsync(getFeatureBySQLParams);
                }

                function processFailed(queryEventArgs) {
                    console.log(queryEventArgs)
                    alert('查询失败！');
                }

            }
        </script>
    </body>
</html>
复制代码

 

posted @   咸鱼翻身  阅读(496)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天：
2019-06-06 【PHP】系统部署
点击右上角即可分享
微信分享提示