SummaryRegionJobService.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_SummaryRegionJobService"></title>
  9. <style>
  10. .mb-popup {
  11. position: absolute;
  12. top: 10px;
  13. right: 10px;
  14. }
  15. </style>
  16. </head>
  17. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  18. <div id="map" style="width: 100%;height:100%"></div>
  19. <div id="popup" class="mb-popup" data-i18n="[style]resources.style_width420px">
  20. <div class="panel panel-default">
  21. <div class="panel-heading">
  22. <h3 class="panel-title" data-i18n="resources.title_SummaryRegionJobService"></h3>
  23. </div>
  24. <div class="panel-body">
  25. <div class="input-group">
  26. <span class="input-group-addon"><span data-i18n="resources.text_inputData"></span><span data-i18n="[title]resources.text_requiredField"
  27. style="color: red;"> * </span>     </span>
  28. <input id="datasetName" type="text" class="form-control" value="samples_processing_newyorkZone_R" />
  29. </div>
  30. <p>
  31. <div class="input-group">
  32. <span class="input-group-addon"><span data-i18n="resources.text_summaryType"></span><span
  33. data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>     </span>
  34. <div>
  35. <select class="form-control" id="type" name="clientType">
  36. <option value="SUMMARYMESH" data-i18n="resources.text_summaryMesh" selected="selected"></option>
  37. <option value="SUMMARYREGION" data-i18n="resources.text_summaryRegion"></option>
  38. </select>
  39. </div>
  40. </div>
  41. <p>
  42. <div id="meshTypeS" class="input-group">
  43. <span class="input-group-addon"><span data-i18n="resources.text_meshSurfaceType"></span><span
  44. data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>  </span>
  45. <select class="form-control" id="meshType" name="clientType">
  46. <option value="0" data-i18n="resources.text_4grid" selected="selected"></option>
  47. <option value="1" data-i18n="resources.text_6grid"></option>
  48. </select>
  49. </div>
  50. <p>
  51. <div id="regionDatasetS" class="input-group">
  52. <span class="input-group-addon" data-i18n="resources.text_summaryDataset"><span
  53. data-i18n="[title]resources.text_requiredField" style="color: red;"> * </span>  </span>
  54. <input id="regionDataset" type="text" class="form-control" value="samples_processing_newyorkZone_R" />
  55. </div>
  56. <p>
  57. <div class="input-group">
  58. <span class="input-group-addon" data-i18n="resources.text_analysisRange"></span>
  59. <input id="query" type="text" class="form-control" value="-74.050,40.650,-73.850,40.850" />
  60. </div>
  61. <p>
  62. <p>
  63. <div class="input-group">
  64. <span class="input-group-addon" data-i18n="resources.text_statisticStandardField"></span>
  65. <span class="form-control">
  66. <input id="standardSummaryFields" type="checkbox">
  67. </span>
  68. <span class="input-group-addon" data-i18n="resources.text_statisticWeightField"></span>
  69. <span class="form-control">
  70. <input id="weightedSummaryFields" type="checkbox">
  71. </span>
  72. </div>
  73. <p>
  74. <div id="standardS" style="display: none">
  75. <div class="input-group">
  76. <span class="input-group-addon"><span data-i18n="resources.text_statisticAttrFieldMode"></span><span
  77. data-i18n="[title]resources.text_requiredField" style="color: red;">
  78. * </span> </span>
  79. <input id="standardStatisticModes" type="text" class="form-control"
  80. value="max" />
  81. </div>
  82. <p>
  83. <div class="input-group">
  84. <span class="input-group-addon"><span data-i18n="resources.text_AttrFieldName"></span><span
  85. data-i18n="[title]resources.text_requiredField" style="color: red;">
  86. * </span>    </span>
  87. <input id="standardFields" type="text" class="form-control"
  88. value="LocationID" />
  89. </div>
  90. <p>
  91. </div>
  92. <div id="weightS" style="display: none">
  93. <div class="input-group">
  94. <span class="input-group-addon"><span data-i18n="resources.text_statisticWeightFieldMode"></span><span
  95. data-i18n="[title]resources.text_requiredField" style="color: red;">
  96. * </span> </span>
  97. <input id="weightedStatisticModes" type="text" class="form-control"
  98. value="max" />
  99. </div>
  100. <p>
  101. <div class="input-group">
  102. <span class="input-group-addon"><span data-i18n="resources.text_weightFieldName"></span><span
  103. data-i18n="[title]resources.text_requiredField" style="color: red;">
  104. * </span>    </span>
  105. <input id="weightedFields" type="text" class="form-control"
  106. value="LocationID" />
  107. </div>
  108. <p>
  109. </div>
  110. <div id="resolutionS" class="input-group">
  111. <span class="input-group-addon" data-i18n="resources.text_gridSize"></span>
  112. <input id="resolution" type="text" class="form-control" value="100" />
  113. </div>
  114. <p>
  115. <div id="meshSizeUnitS" class="input-group">
  116. <span class="input-group-addon" data-i18n="resources.text_gridSizeUnit"></span>
  117. <select class="form-control" id="meshSizeUnit" name="clientType">
  118. <option value="Meter" selected="selected">Meter</option>
  119. <option value="Kilometer">Kilometer</option>
  120. <option value="Yard">Yard</option>
  121. <option value="Foot">Foot</option>
  122. <option value="Mile">Mile</option>
  123. </select>
  124. </div>
  125. <p>
  126. <div class="input-group">
  127. <span class="input-group-addon" data-i18n="resources.text_lengthAndArea"></span>
  128. <span class="form-control">
  129. <input id="sumShape" type="checkbox" checked>
  130. </span>
  131. </div>
  132. <p>
  133. <div align="right">
  134. <input type="button" id='btn' class="btn btn-primary"
  135. data-i18n="[value]resources.btn_summary" />
  136. </div>
  137. </div>
  138. </div>
  139. <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
  140. <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  141. <script>
  142. var map,
  143. baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
  144. "/iserver/services/map-world/rest/maps/World",
  145. mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
  146. processingsUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") +
  147. "/iserver/services/distributedanalyst/rest/v1/jobs";
  148. var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  149. " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  150. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  151. map = new mapboxgl.Map({
  152. container: 'map',
  153. style: {
  154. "version": 8,
  155. "sources": {
  156. "raster-tiles": {
  157. "attribution": attribution,
  158. "type": "raster",
  159. "tiles": [mapUrl],
  160. "tileSize": 256
  161. }
  162. },
  163. "layers": [{
  164. "id": "simple-tiles",
  165. "type": "raster",
  166. "source": "raster-tiles",
  167. }]
  168. },
  169. center: [-73.95, 40.75],
  170. zoom: 10
  171. });
  172. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  173. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  174. $("#standardSummaryFields").change(function (e) {
  175. if (e.target.checked) {
  176. $("#standardS").show();
  177. return;
  178. }
  179. $("#standardS").hide();
  180. });
  181. $("#weightedSummaryFields").change(function (e) {
  182. if (e.target.checked) {
  183. $("#weightS").show();
  184. return;
  185. }
  186. $("#weightS").hide();
  187. });
  188. $("#type").change(function (e) {
  189. if (e.target.selectedIndex === 0) {
  190. $("#meshTypeS").show();
  191. $("#resolutionS").show();
  192. $("#meshSizeUnitS").show();
  193. $("#regionDatasetS").hide();
  194. return;
  195. }
  196. $("#meshTypeS").hide();
  197. $("#resolutionS").hide();
  198. $("#meshSizeUnitS").hide();
  199. $("#regionDatasetS").show();
  200. });
  201. SuperMap.SecurityManager.registerToken(processingsUrl, window.exampleToken);
  202. var processingService = new mapboxgl.supermap.ProcessingService(processingsUrl, {
  203. withCredentials: window.isLocal
  204. });
  205. function getQuery() {
  206. if ($('#query').val() === "") {
  207. return "";
  208. }
  209. var query = [];
  210. $('#query').val().split(',').map(function (el) {
  211. query.push(parseFloat(el));
  212. });
  213. var sw = new mapboxgl.LngLat(query[0], query[1]);
  214. var ne = new mapboxgl.LngLat(query[2], query[3]);
  215. return new mapboxgl.LngLatBounds(sw, ne);
  216. }
  217. $('#btn').on('click', function () {
  218. if ($('#msg_container')[0]) {
  219. $('#msg_container').remove();
  220. }
  221. widgets.loader.showLoader();
  222. if (map.getLayer("summaryLayer")) {
  223. map.removeLayer("summaryLayer");
  224. map.removeSource("summarySource");
  225. }
  226. var summaryRegionJobParameter = new SuperMap.SummaryRegionJobParameter({
  227. datasetName: $('#datasetName').val(),
  228. regionDataset: $('#regionDataset').val(),
  229. type: $('#type option:selected').attr('value'),
  230. meshType: $('#meshType option:selected').attr('value'),
  231. query: getQuery(),
  232. standardSummaryFields: $('#standardSummaryFields').get(0).checked,
  233. weightedSummaryFields: $('#weightedSummaryFields').get(0).checked,
  234. standardStatisticModes: $('#standardStatisticModes').val(),
  235. standardFields: $('#standardFields').val(),
  236. weightedStatisticModes: $('#weightedStatisticModes').val(),
  237. weightedFields: $('#weightedFields').val(),
  238. resolution: $('#resolution').val(),
  239. meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
  240. sumShape: $('#sumShape').get(0).checked
  241. });
  242. processingService.addSummaryRegionJob(summaryRegionJobParameter, function (serviceResult) {
  243. if (serviceResult.error) {
  244. widgets.loader.removeLoader();
  245. var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
  246. widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
  247. return;
  248. }
  249. serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
  250. if (info.serviceType === 'RESTMAP') {
  251. SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(
  252. function (response) {
  253. return response.json();
  254. }).then(function (result) {
  255. var mapUrl = result[0].path +
  256. "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
  257. map.addSource("summarySource", {
  258. "type": "raster",
  259. "tiles": [mapUrl],
  260. "tileSize": 256
  261. });
  262. map.addLayer({
  263. "id": "summaryLayer",
  264. "type": "raster",
  265. "source": "summarySource",
  266. "minzoom": 0,
  267. "maxzoom": 22
  268. });
  269. widgets.loader.removeLoader();
  270. });
  271. }
  272. });
  273. });
  274. });
  275. </script>
  276. </body>
  277. </html>