【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>
博客地址: http://www.cnblogs.com/defineconst/
博客版权: 本文以学习、研究和分享为主,欢迎转载和各类爬虫,但必须在文章页面明显位置给出原文链接。 如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
博客版权: 本文以学习、研究和分享为主,欢迎转载和各类爬虫,但必须在文章页面明显位置给出原文链接。 如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
2019-06-06 【PHP】系统部署