Newer
Older
KaiFengPC / cesiumGISmap.html
@zhangdeliang zhangdeliang on 13 Dec 5 KB update
  1. <html lang="en">
  2.  
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  8. <title>三维管网</title>
  9. <link href="./cesium/Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
  10. <script type="text/javascript" src="./cesium/Build/SuperMap3D/SuperMap3D.js"></script>
  11. <script type="text/javascript" src="./cesium/web/libs/jquery/jquery.min.js"></script>
  12. <script type="text/javascript" src="./cesium/examples/webgl/js/supermap/SuperMap.Include.js"></script>
  13. <style>
  14. html,
  15. body,
  16. #Container {
  17. width: 100%;
  18. height: 100%;
  19. margin: 0;
  20. padding: 0;
  21. overflow: hidden;
  22. }
  23. </style>
  24. </head>
  25.  
  26. <body>
  27. <div id="Container"></div>
  28. <!-- 气泡HTML -->
  29.  
  30. <script type="text/javascript">
  31. var isInit = false
  32.  
  33. function onload(SuperMap3D) {
  34. //初始化viewer部件
  35. window.viewer = new SuperMap3D.Viewer('Container', {
  36. infoBox: false,
  37. navigation: false,
  38. terrainProvider: new SuperMap3D.SuperMapTerrainProvider({
  39. url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
  40. requestWaterMask: true,
  41. requestVertexNormals: true,
  42. isSct: false
  43. }),
  44. });
  45.  
  46. var scene = viewer.scene;
  47. var camera = scene.camera;
  48. viewer._Widget._creditContainer.style.display = "none";
  49. scene.lightSource.ambientLightColor = new SuperMap3D.Color(0.65, 0.65, 0.65, 1);
  50. viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapTileServiceImageryProvider({
  51. url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=3b8b6381848942b1e6bf37296e534130',
  52. layer: 'img',
  53. style: 'default',
  54. format: 'image/jpeg',
  55. tileMatrixSetID: 'mercator',
  56. maximumLevel: 18
  57. }))
  58. // viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapServiceImageryProvider({
  59. // url: 'http://218.64.81.37:8082/map2d/jiShui/wms',
  60. // layers: 'wurenji_5cm',
  61. // parameters: {
  62. // service: "wms",
  63. // format: "image/png",
  64. // transparent: true,
  65. // srs: "epsg:4326",
  66. // height: 512,
  67. // width: 512
  68. // }
  69. // }))
  70. var promise = scene.open('https://{s}.wh-nf.cn:8090/iserver/services/3D-pipeData/rest/realspace',
  71. undefined, {
  72. subdomains: ['supermap0', 'supermap1', 'supermap2', 'supermap3'],
  73. autoSetView: true
  74. });
  75.  
  76. viewer.camera.flyTo({
  77. destination: SuperMap3D.Cartesian3.fromDegrees(114.34250, 34.78526, 1200.0),
  78. orientation: {
  79. pitch: SuperMap3D.Math.toRadians(-35.0),
  80. }
  81. });
  82. var handler = new SuperMap3D.ScreenSpaceEventHandler(scene.canvas);
  83. handler.setInputAction(function (e) {
  84. // 获取点击位置笛卡尔坐标
  85. scene.pickAsync(e.position).then((data) => {
  86. if (data) {
  87. console.log(data)
  88. var getLayerId = data.id
  89. // 屏幕坐标转世界坐标——关键点
  90. var ellipsoid = viewer.scene.globe.ellipsoid;
  91. var cartesian = viewer.camera.pickEllipsoid(e.position, ellipsoid);
  92. //将笛卡尔坐标转换为地理坐标
  93. var cartographic = SuperMap3D.Cartographic.fromCartesian(cartesian);
  94. //将弧度转为度的十进制度表示
  95. window.lon = SuperMap3D.Math.toDegrees(cartographic.longitude);
  96. window.lat = SuperMap3D.Math.toDegrees(cartographic.latitude);
  97. var point2 = {
  98. longitude: window.lon,
  99. latitude: window.lat
  100. };
  101. doSqlQuery([getLayerId])
  102. }
  103. })
  104. }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);
  105.  
  106.  
  107. }
  108. //管网查询
  109. function doSqlQuery(id) {
  110. var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
  111. // getFeatureParam = new SuperMap.REST.FilterParameter({
  112. // attributeFilter: id
  113. // });
  114. getFeatureBySQLParams = new SuperMap.REST.GetFeaturesByIDsParameters({
  115. IDs: id,
  116. toIndex: -1,
  117. datasetNames: ["kfData:ysline1_1", "kfData:第一二批WS_Point_1", "kfData:hsLine1_1",
  118. "kfData:wsLine1_1", "kfData:第一二批YS_Point_1", "kfData:第一二批YW_Point_1"
  119. ]
  120. });
  121. var url =
  122. 'https://supermap0.wh-nf.cn:8090/iserver/services/data-pipeData/rest/data/'; // 数据服务地址
  123. getFeatureBySQLService = new SuperMap.REST.GetFeaturesByIDsService(url, {
  124. eventListeners: {
  125. "processCompleted": onQueryComplete, // 查询成功时的回调函数
  126. "processFailed": processFailed // 查询失败时的回调函数
  127. }
  128. });
  129. getFeatureBySQLService.processAsync(getFeatureBySQLParams);
  130. }
  131.  
  132. function onQueryComplete(queryEventArgs) {
  133. var selectedFeature = queryEventArgs.originResult.features[0]; //
  134. console.log('拿到管网数据selectedFeature---', selectedFeature)
  135. }
  136.  
  137.  
  138. function processFailed(queryEventArgs) {
  139. console.log(queryEventArgs);
  140. }
  141. if (typeof SuperMap3D !== 'undefined') {
  142. window.startupCalled = true;
  143. onload(SuperMap3D);
  144. }
  145. </script>
  146.  
  147.  
  148. </body>
  149.  
  150. </html>