<!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', 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>
