analysis_interpolationAnalystByDensity.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  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_interpolationAnalystByDen"></title>
  9. <style type="text/css">
  10. body {
  11. margin: 0;
  12. overflow: hidden;
  13. background: #fff;
  14. width: 100%;
  15. height: 100%
  16. }
  17. #map {
  18. position: absolute;
  19. width: 100%;
  20. height: 100%;
  21. }
  22. #toolbar {
  23. position: absolute;
  24. top: 50px;
  25. right: 10px;
  26. text-align: center;
  27. z-index: 100;
  28. border-radius: 4px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="toolbar" class="panel panel-primary">
  34. <div class='panel-heading'>
  35. <h5 class='panel-title text-center' data-i18n="resources.text_interpolationAnalystByDen"></h5></div>
  36. <div class='panel-body content'>
  37. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_density" onclick="interpolationDensity()"/>&nbsp; &nbsp;
  38. <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="removeInterpolation()"/>
  39. </div>
  40. </div>
  41. <div id="map"></div>
  42. <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
  43. <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
  44. <script>
  45. var host = window.isLocal ? window.server : "https://iserver.supermap.io",
  46. url = host + "/iserver/services/map-temperature/rest/maps/全国温度变化图",
  47. url2 = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
  48. var map, baseLayer, themeLayer;
  49. init();
  50. function init() {
  51. map = new SuperMap.Map("map", {
  52. controls: [
  53. new SuperMap.Control.ScaleLine(),
  54. new SuperMap.Control.Zoom(),
  55. new SuperMap.Control.Navigation({
  56. dragPanOptions: {
  57. enableKinetic: true
  58. }
  59. })], units: "m"
  60. });
  61. map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
  62. map.allOverlays = true;
  63. baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("全国温度变化图", url, {
  64. transparent: true,
  65. cacheEnabled: true
  66. }, {maxResolution: "auto"});
  67. baseLayer.params.layersID = "[0,1,2]";
  68. baseLayer.events.on({"layerInitialized": addLayer});
  69. }
  70. function addLayer() {
  71. map.addLayer(baseLayer);
  72. map.setCenter(new SuperMap.LonLat(531762, 3895330), 0);
  73. }
  74. //点密度插值分析
  75. function interpolationDensity() {
  76. widgets.alert.clearAlert();
  77. removeInterpolation();
  78. var interpolationParams = new SuperMap.REST.InterpolationDensityAnalystParameters({
  79. //用于做插值分析的数据源中数据集的名称
  80. dataset: "SamplesP@Interpolation",
  81. //插值分析结果数据集的名称
  82. outputDatasetName: "Density_Result",
  83. //插值分析结果数据源的名称
  84. outputDatasourceName: "Interpolation",
  85. //结果栅格数据集存储的像素格式
  86. pixelFormat: SuperMap.REST.PixelFormat.DOUBLE,
  87. //插值结果栅格数据集的分辨率
  88. resolution: 9000,
  89. // 属性过滤条件
  90. // filterQueryParameter: {
  91. // attributeFilter: ""
  92. // },
  93. //存储用于进行插值分析的字段名称
  94. zValueFieldName: "AVG_TMP",
  95. //结果栅格数据集的范围
  96. bounds: new SuperMap.Bounds(-2640403.6321084504, 1873792.1034850003, 3247669.390292245, 5921501.395578556)
  97. });
  98. var interpolationService = new SuperMap.REST.InterpolationAnalystService(url2, {
  99. eventListeners: {
  100. "processCompleted": processCompleted,
  101. "processFailed": processFailed
  102. }
  103. });
  104. interpolationService.processAsync(interpolationParams);
  105. }
  106. //插值分析成功后,使用栅格分段专题图展示
  107. function processCompleted(InterpolationAnalystEventArgs) {
  108. var color1 = new SuperMap.REST.ServerColor(170, 240, 233),
  109. color2 = new SuperMap.REST.ServerColor(176, 244, 188),
  110. color3 = new SuperMap.REST.ServerColor(218, 251, 178),
  111. color4 = new SuperMap.REST.ServerColor(220, 236, 145),
  112. color5 = new SuperMap.REST.ServerColor(96, 198, 66),
  113. color6 = new SuperMap.REST.ServerColor(20, 142, 53),
  114. color7 = new SuperMap.REST.ServerColor(85, 144, 55),
  115. color8 = new SuperMap.REST.ServerColor(171, 168, 38),
  116. color9 = new SuperMap.REST.ServerColor(235, 165, 9),
  117. color10 = new SuperMap.REST.ServerColor(203, 89, 2),
  118. color11 = new SuperMap.REST.ServerColor(157, 25, 1),
  119. color12 = new SuperMap.REST.ServerColor(118, 15, 3),
  120. color13 = new SuperMap.REST.ServerColor(112, 32, 7),
  121. color14 = new SuperMap.REST.ServerColor(106, 45, 12),
  122. color15 = new SuperMap.REST.ServerColor(129, 80, 50),
  123. color16 = new SuperMap.REST.ServerColor(160, 154, 146),
  124. color17 = new SuperMap.REST.ServerColor(107, 47, 14),
  125. color18 = new SuperMap.REST.ServerColor(125, 75, 44),
  126. color19 = new SuperMap.REST.ServerColor(146, 110, 88),
  127. color20 = new SuperMap.REST.ServerColor(166, 153, 146),
  128. themeGridRangeIteme1 = new SuperMap.REST.ThemeGridRangeItem({
  129. start: -5,
  130. end: -3.4,
  131. color: color1
  132. }),
  133. themeGridRangeIteme2 = new SuperMap.REST.ThemeGridRangeItem({
  134. start: -3.4,
  135. end: -1.8,
  136. color: color2
  137. }),
  138. themeGridRangeIteme3 = new SuperMap.REST.ThemeGridRangeItem({
  139. start: -1.8,
  140. end: -0.2,
  141. color: color3
  142. }),
  143. themeGridRangeIteme4 = new SuperMap.REST.ThemeGridRangeItem({
  144. start: -0.2,
  145. end: 1.4,
  146. color: color4
  147. }),
  148. themeGridRangeIteme5 = new SuperMap.REST.ThemeGridRangeItem({
  149. start: 1.4,
  150. end: 3,
  151. color: color5
  152. }),
  153. themeGridRangeIteme6 = new SuperMap.REST.ThemeGridRangeItem({
  154. start: 3,
  155. end: 4.6,
  156. color: color6
  157. }),
  158. themeGridRangeIteme7 = new SuperMap.REST.ThemeGridRangeItem({
  159. start: 4.6,
  160. end: 6.2,
  161. color: color7
  162. }),
  163. themeGridRangeIteme8 = new SuperMap.REST.ThemeGridRangeItem({
  164. start: 6.2,
  165. end: 7.8,
  166. color: color8
  167. }),
  168. themeGridRangeIteme9 = new SuperMap.REST.ThemeGridRangeItem({
  169. start: 7.8,
  170. end: 9.4,
  171. color: color9
  172. }),
  173. themeGridRangeIteme10 = new SuperMap.REST.ThemeGridRangeItem({
  174. start: 9.4,
  175. end: 11,
  176. color: color10
  177. }),
  178. themeGridRangeIteme11 = new SuperMap.REST.ThemeGridRangeItem({
  179. start: 11,
  180. end: 12.6,
  181. color: color11
  182. }),
  183. themeGridRangeIteme12 = new SuperMap.REST.ThemeGridRangeItem({
  184. start: 12.6,
  185. end: 14.2,
  186. color: color12
  187. }),
  188. themeGridRangeIteme13 = new SuperMap.REST.ThemeGridRangeItem({
  189. start: 14.2,
  190. end: 35.8,
  191. color: color13
  192. }),
  193. themeGridRangeIteme14 = new SuperMap.REST.ThemeGridRangeItem({
  194. start: 35.8,
  195. end: 57.4,
  196. color: color14
  197. }),
  198. themeGridRangeIteme15 = new SuperMap.REST.ThemeGridRangeItem({
  199. start: 57.4,
  200. end: 79,
  201. color: color15
  202. }),
  203. themeGridRangeIteme16 = new SuperMap.REST.ThemeGridRangeItem({
  204. start: 79,
  205. end: 90.6,
  206. color: color16
  207. }),
  208. themeGridRangeIteme17 = new SuperMap.REST.ThemeGridRangeItem({
  209. start: 90.6,
  210. end: 112.2,
  211. color: color17
  212. }),
  213. themeGridRangeIteme18 = new SuperMap.REST.ThemeGridRangeItem({
  214. start: 112.2,
  215. end: 123.8,
  216. color: color18
  217. }),
  218. themeGridRangeIteme19 = new SuperMap.REST.ThemeGridRangeItem({
  219. start: 123.8,
  220. end: 125.4,
  221. color: color19
  222. }),
  223. themeGridRangeIteme20 = new SuperMap.REST.ThemeGridRangeItem({
  224. start: 125.4,
  225. end: 135,
  226. color: color20
  227. }),
  228. themeGridRange = new SuperMap.REST.ThemeGridRange({
  229. reverseColor: false,
  230. rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
  231. //栅格分段专题图子项数组
  232. items: [themeGridRangeIteme1,
  233. themeGridRangeIteme2,
  234. themeGridRangeIteme3,
  235. themeGridRangeIteme4,
  236. themeGridRangeIteme5,
  237. themeGridRangeIteme6,
  238. themeGridRangeIteme7,
  239. themeGridRangeIteme8,
  240. themeGridRangeIteme9,
  241. themeGridRangeIteme10,
  242. themeGridRangeIteme11,
  243. themeGridRangeIteme12,
  244. themeGridRangeIteme13,
  245. themeGridRangeIteme14,
  246. themeGridRangeIteme15,
  247. themeGridRangeIteme16,
  248. themeGridRangeIteme17,
  249. themeGridRangeIteme18,
  250. themeGridRangeIteme19,
  251. themeGridRangeIteme20
  252. ]
  253. }),
  254. themeParameters = new SuperMap.REST.ThemeParameters({
  255. //制作专题图的数据集数组
  256. datasetNames: [InterpolationAnalystEventArgs.result.dataset.split('@')[0]],
  257. // 制作专题图的数据集所在的数据源数组
  258. dataSourceNames: ["Interpolation"],
  259. joinItems: null,
  260. //专题图对象列表
  261. themes: [themeGridRange],
  262. types: ['REGION']
  263. });
  264. var themeService = new SuperMap.REST.ThemeService(url, {
  265. eventListeners: {
  266. "processCompleted": themeCompleted,
  267. "processFailed": themeFailed
  268. }
  269. });
  270. themeService.processAsync(themeParameters);
  271. }
  272. //服务端成功返回专题图结果时调用
  273. function themeCompleted(themeEventArgs) {
  274. if (themeEventArgs.result.resourceInfo.id) {
  275. themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("插值分析结果图", url, {
  276. cacheEnabled: true,
  277. transparent: true,
  278. layersID: themeEventArgs.result.resourceInfo.id
  279. }, {"maxResolution": "auto"});
  280. themeLayer.events.on({"layerInitialized": addThemelayer});
  281. }
  282. }
  283. //添加专题图至map
  284. function addThemelayer() {
  285. map.addLayer(themeLayer);
  286. }
  287. //插值分析失败后调用
  288. function processFailed(ServiceFailedEventArgs) {
  289. widgets.alert.showAlert(ServiceFailedEventArgs.error.errorMsg,false);
  290. }
  291. //服务端返回专题图结果失败时调用
  292. function themeFailed(serviceFailedEventArgs) {
  293. widgets.alert.showAlert(serviceFailedEventArgs.error.errorMsg,false);
  294. }
  295. //清除专题图图层
  296. function removeInterpolation() {
  297. widgets.alert.clearAlert();
  298. if (map.layers.length > 1) {
  299. map.removeLayer(themeLayer, true);
  300. }
  301. }
  302. </script>
  303. </body>
  304. </html>