02_getGridCellInfos.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_getGridCellInfos"></title>
  9. <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  11. <style>
  12. .ol-popup {
  13. position: absolute;
  14. background-color: white;
  15. -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  16. filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  17. padding: 15px;
  18. border-radius: 10px;
  19. border: 1px solid #cccccc;
  20. bottom: 12px;
  21. left: -50px;
  22. min-width: 280px;
  23. }
  24. .ol-popup:after, .ol-popup:before {
  25. top: 100%;
  26. border: solid transparent;
  27. content: " ";
  28. height: 0;
  29. width: 0;
  30. position: absolute;
  31. pointer-events: none;
  32. }
  33. .ol-popup:after {
  34. border-top-color: white;
  35. border-width: 10px;
  36. left: 48px;
  37. margin-left: -10px;
  38. }
  39. .ol-popup:before {
  40. border-top-color: #cccccc;
  41. border-width: 11px;
  42. left: 48px;
  43. margin-left: -11px;
  44. }
  45. </style>
  46. </head>
  47. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
  48. <div id="map" style="width: 100%;height:100%"></div>
  49. <div id="popup" class="ol-popup">
  50. <div id="popup-content"></div>
  51. </div>
  52. <script type="text/javascript">
  53. var container = document.getElementById('popup');
  54. var content = document.getElementById('popup-content');
  55. var overlay = new ol.Overlay(({
  56. element: container,
  57. autoPan: true,
  58. autoPanAnimation: {
  59. duration: 250
  60. }
  61. }));
  62. var map, baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/世界地图_Day",
  63. url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
  64. map = new ol.Map({
  65. target: 'map',
  66. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  67. .extend([new ol.supermap.control.Logo()]),
  68. view: new ol.View({
  69. center: [0, 0],
  70. zoom: 3,
  71. projection: 'EPSG:4326',
  72. multiWorld: true
  73. }),
  74. overlays: [overlay]
  75. });
  76. var layer = new ol.layer.Tile({
  77. source: new ol.source.TileSuperMapRest({
  78. url: baseUrl
  79. }),
  80. projection: 'EPSG:4326'
  81. });
  82. map.addLayer(layer);
  83. map.on("click", function (evt) {
  84. var x = evt.coordinate[0];
  85. var y = evt.coordinate[1];
  86. if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
  87. return;
  88. }
  89. var getGridCellInfosParam = new SuperMap.GetGridCellInfosParameters({
  90. dataSourceName: "World",
  91. datasetName: "WorldEarth",
  92. X: x,
  93. Y: y
  94. });
  95. new ol.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam, function (serviceResult) {
  96. if (!serviceResult.result) {
  97. return;
  98. }
  99. var result = serviceResult.result;
  100. var innerHTML = resources.text_gridQueryResult + "<br>" + "column: " + result.column + "<br>";
  101. innerHTML += "row: " + result.row + "<br>";
  102. innerHTML += "value: " + result.value + "<br>";
  103. content.innerHTML = innerHTML;
  104. overlay.setPosition([evt.coordinate[0], evt.coordinate[1]]);
  105. });
  106. });
  107. </script>
  108. </body>
  109. </html>