fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title data-i18n="resources.title_interpolationAnalystByKriging"></title>
		<style type="text/css">
			body {
				margin: 0;
				overflow: hidden;
				background: #fff;
				width: 100%;
				height: 100%;
			}

			#map {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			#toolbar {
				position: absolute;
				top: 50px;
				right: 10px;
				text-align: center;
				z-index: 100;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div id="toolbar" class="panel panel-primary">
			<div class="panel-heading">
				<h5 class="panel-title text-center" data-i18n="resources.text_interpolationAnalystByKriging"></h5>
			</div>
			<div class="panel-body content">
				<input
					type="button"
					class="btn btn-default"
					data-i18n="[value]resources.text_simple"
					onclick="interpolationSimpleKriging()"
				/>
				<input
					type="button"
					class="btn btn-default"
					data-i18n="[value]resources.text_ordinary"
					onclick="interpolationKriging()"
				/>
				<input
					type="button"
					class="btn btn-default"
					data-i18n="[value]resources.text_extensive"
					onclick="interpolationUniversalKriging()"
				/>
				<input
					type="button"
					class="btn btn-default"
					data-i18n="[value]resources.text_input_value_clear"
					onclick="removeInterpolation()"
				/>
			</div>
		</div>
		<div id="map"></div>
		<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
		<script type="text/javascript" src="../../dist/classic/include-classic.js"></script>
		<script>
			var host = window.isLocal ? window.server : "https://iserver.supermap.io",
				url = host + '/iserver/services/map-temperature/rest/maps/全国温度变化图',
				url2 = host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst';
			var map, baseLayer, themeLayer;

			init();

			function init() {
				map = new SuperMap.Map('map', {
					controls: [
						new SuperMap.Control.ScaleLine(),
						new SuperMap.Control.Zoom(),
						new SuperMap.Control.Navigation({
							dragPanOptions: {
								enableKinetic: true,
							},
						}),
					],
					units: 'm',
				});
				map.addControl(new SuperMap.Control.LayerSwitcher(), new SuperMap.Pixel(42, 80));
				map.allOverlays = true;
				baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer(
					'全国温度变化图',
					url,
					{
						transparent: true,
						cacheEnabled: true,
					},
					{ maxResolution: 'auto' }
				);
				baseLayer.params.layersID = '[0,1,2]';
				baseLayer.events.on({ layerInitialized: addLayer });
			}

			function addLayer() {
				map.addLayer(baseLayer);
				map.setCenter(new SuperMap.LonLat(531762, 3895330), 0);
			}

			// var points = [
			// 	new SuperMap.Geometry.Point(111.4687675858, 353.85481148),
			// 	new SuperMap.Geometry.Point(111.4687675858, 408.1485649972),
			// 	new SuperMap.Geometry.Point(208.9814293754, 408.1485649972),
			// 	new SuperMap.Geometry.Point(208.9814293754, 353.85481148),
      //  ];
			var points = new SuperMap.Geometry.LinearRing([
				new SuperMap.Geometry.Point(0, 4010338),
				new SuperMap.Geometry.Point(1063524, 4010338),
				new SuperMap.Geometry.Point(1063524, 3150322),
				new SuperMap.Geometry.Point(0, 3150322),
			]);
			var region = new SuperMap.Geometry.Polygon([points]);
			var clipParam = new SuperMap.REST.ClipParameter({
				// clipRegion: new SuperMap.Geometry.Polygon(new SuperMap.Geometry.LinearRing(points)),
				clipRegion: region,
				isClipInRegion: true,
				isExactClip: true,
			});
			console.log(clipParam);
			//简单克吕金插值法
			function interpolationSimpleKriging() {
				widgets.alert.clearAlert();
				removeInterpolation();
				console.log(clipParam);
				var interpolationParams = new SuperMap.REST.InterpolationKrigingAnalystParameters({
					//用于做插值分析的数据源中数据集的名称
					dataset: 'SamplesP@Interpolation',
					//插值分析结果数据集的名称
					outputDatasetName: 'SimpleKriging_Result',
					//插值分析结果数据源的名称
					outputDatasourceName: 'Interpolation',
					//结果栅格数据集存储的像素格式
					pixelFormat: SuperMap.REST.PixelFormat.double,
					// 属性过滤条件
					//            filterQueryParameter: {
					//                attributeFilter: ""
					//            },
					//存储用于进行插值分析的字段名称
					clipParam: clipParam,
					zValueFieldName: 'AVG_TMP',
					//克吕金插值的类型
					type: 'SimpleKriging',
					//简单克吕金类型下，插值字段的平均值。
					mean: 11.6005,
					searchMode: 'KDTREE_FIXED_COUNT',
					bounds: new SuperMap.Bounds(
						-2640403.6321084504,
						1873792.1034850003,
						3247669.390292245,
						5921501.395578556
					),
				});
				var interpolationService = new SuperMap.REST.InterpolationAnalystService(url2, {
					eventListeners: {
						processCompleted: processCompleted,
						processFailed: processFailed,
          },
          isInTheSameDomain:true
				});
				interpolationService.processAsync(interpolationParams);
			}

			//普通克吕金插值法
			function interpolationKriging() {
				widgets.alert.clearAlert();
				removeInterpolation();
				var interpolationParams = new SuperMap.REST.InterpolationKrigingAnalystParameters({
					//用于做插值分析的数据源中数据集的名称
					dataset: 'SamplesP@Interpolation',
					//插值分析结果数据集的名称
					outputDatasetName: 'Kriging_Result',
					//插值分析结果数据源的名称
					outputDatasourceName: 'Interpolation',
					//结果栅格数据集存储的像素格式
					pixelFormat: SuperMap.REST.PixelFormat.double,
					// 属性过滤条件
					filterQueryParameter: {
						attributeFilter: '',
					},
					//存储用于进行插值分析的字段名称
					zValueFieldName: 'AVG_TMP',
					searchRadius: '0',
					//克吕金插值的类型
					type: 'KRIGING',
					clipParam: clipParam,
					searchMode: 'KDTREE_FIXED_COUNT',
					bounds: new SuperMap.Bounds(
						-2640403.6321084504,
						1873792.1034850003,
						3247669.390292245,
						5921501.395578556
					),
				});
				var interpolationService = new SuperMap.REST.InterpolationAnalystService(url2, {
					eventListeners: {
						processCompleted: processCompleted,
						processFailed: processFailed,
					},
				});
				interpolationService.processAsync(interpolationParams);
			}

			// 泛克吕金插值法
			function interpolationUniversalKriging() {
				widgets.alert.clearAlert();
				removeInterpolation();
				var interpolationParams = new SuperMap.REST.InterpolationKrigingAnalystParameters({
					//用于做插值分析的数据源中数据集的名称
					dataset: 'SamplesP@Interpolation',
					//插值分析结果数据集的名称
					outputDatasetName: 'UniversalKriging_Result',
					//插值分析结果数据源的名称
					outputDatasourceName: 'Interpolation',
					//结果栅格数据集存储的像素格式
					pixelFormat: SuperMap.REST.PixelFormat.double,
					// 属性过滤条件
					filterQueryParameter: {
						attributeFilter: '',
					},
					//存储用于进行插值分析的字段名称
					zValueFieldName: 'AVG_TMP',
					searchRadius: '0',
					//克吕金插值的类型
					type: 'UniversalKriging',
					//克吕金类型中旋转角度值
					clipParam: clipParam,
					angle: 0,
					//克吕金类型中块金效应值
					nugget: 0,
					//克吕金类型中自相关阈值，单位与原数据集单位相同
					range: 0,
					//克吕金类型中基台值
					sill: 0,
					//克吕金插值时的半变函数类型
					variogramMode: 'SPHERICAL',
					searchMode: 'KDTREE_FIXED_COUNT',
					bounds: new SuperMap.Bounds(
						-2640403.6321084504,
						1873792.1034850003,
						3247669.390292245,
						5921501.395578556
					),
				});
				var interpolationService = new SuperMap.REST.InterpolationAnalystService(url2, {
					eventListeners: {
						processCompleted: processCompleted,
						processFailed: processFailed,
					},
				});
				interpolationService.processAsync(interpolationParams);
			}

			//插值分析成功后，使用栅格分段专题图展示
			function processCompleted(InterpolationAnalystEventArgs) {
				var color1 = new SuperMap.REST.ServerColor(170, 240, 233),
					color2 = new SuperMap.REST.ServerColor(176, 244, 188),
					color3 = new SuperMap.REST.ServerColor(218, 251, 178),
					color4 = new SuperMap.REST.ServerColor(220, 236, 145),
					color5 = new SuperMap.REST.ServerColor(96, 198, 66),
					color6 = new SuperMap.REST.ServerColor(20, 142, 53),
					color7 = new SuperMap.REST.ServerColor(85, 144, 55),
					color8 = new SuperMap.REST.ServerColor(171, 168, 38),
					color9 = new SuperMap.REST.ServerColor(235, 165, 9),
					color10 = new SuperMap.REST.ServerColor(203, 89, 2),
					color11 = new SuperMap.REST.ServerColor(157, 25, 1),
					color12 = new SuperMap.REST.ServerColor(118, 15, 3),
					color13 = new SuperMap.REST.ServerColor(112, 32, 7),
					color14 = new SuperMap.REST.ServerColor(106, 45, 12),
					color15 = new SuperMap.REST.ServerColor(129, 80, 50),
					color16 = new SuperMap.REST.ServerColor(160, 154, 146),
					color17 = new SuperMap.REST.ServerColor(107, 47, 14),
					color18 = new SuperMap.REST.ServerColor(125, 75, 44),
					color19 = new SuperMap.REST.ServerColor(146, 110, 88),
					color20 = new SuperMap.REST.ServerColor(166, 153, 146),
					themeGridRangeIteme1 = new SuperMap.REST.ThemeGridRangeItem({
						start: -5,
						end: -3.4,
						color: color1,
					}),
					themeGridRangeIteme2 = new SuperMap.REST.ThemeGridRangeItem({
						start: -3.4,
						end: -1.8,
						color: color2,
					}),
					themeGridRangeIteme3 = new SuperMap.REST.ThemeGridRangeItem({
						start: -1.8,
						end: -0.2,
						color: color3,
					}),
					themeGridRangeIteme4 = new SuperMap.REST.ThemeGridRangeItem({
						start: -0.2,
						end: 1.4,
						color: color4,
					}),
					themeGridRangeIteme5 = new SuperMap.REST.ThemeGridRangeItem({
						start: 1.4,
						end: 3,
						color: color5,
					}),
					themeGridRangeIteme6 = new SuperMap.REST.ThemeGridRangeItem({
						start: 3,
						end: 4.6,
						color: color6,
					}),
					themeGridRangeIteme7 = new SuperMap.REST.ThemeGridRangeItem({
						start: 4.6,
						end: 6.2,
						color: color7,
					}),
					themeGridRangeIteme8 = new SuperMap.REST.ThemeGridRangeItem({
						start: 6.2,
						end: 7.8,
						color: color8,
					}),
					themeGridRangeIteme9 = new SuperMap.REST.ThemeGridRangeItem({
						start: 7.8,
						end: 9.4,
						color: color9,
					}),
					themeGridRangeIteme10 = new SuperMap.REST.ThemeGridRangeItem({
						start: 9.4,
						end: 11,
						color: color10,
					}),
					themeGridRangeIteme11 = new SuperMap.REST.ThemeGridRangeItem({
						start: 11,
						end: 12.6,
						color: color11,
					}),
					themeGridRangeIteme12 = new SuperMap.REST.ThemeGridRangeItem({
						start: 12.6,
						end: 14.2,
						color: color12,
					}),
					themeGridRangeIteme13 = new SuperMap.REST.ThemeGridRangeItem({
						start: 14.2,
						end: 15.8,
						color: color13,
					}),
					themeGridRangeIteme14 = new SuperMap.REST.ThemeGridRangeItem({
						start: 15.8,
						end: 17.4,
						color: color14,
					}),
					themeGridRangeIteme15 = new SuperMap.REST.ThemeGridRangeItem({
						start: 17.4,
						end: 19,
						color: color15,
					}),
					themeGridRangeIteme16 = new SuperMap.REST.ThemeGridRangeItem({
						start: 19,
						end: 20.6,
						color: color16,
					}),
					themeGridRangeIteme17 = new SuperMap.REST.ThemeGridRangeItem({
						start: 20.6,
						end: 22.2,
						color: color17,
					}),
					themeGridRangeIteme18 = new SuperMap.REST.ThemeGridRangeItem({
						start: 22.2,
						end: 23.8,
						color: color18,
					}),
					themeGridRangeIteme19 = new SuperMap.REST.ThemeGridRangeItem({
						start: 23.8,
						end: 25.4,
						color: color19,
					}),
					themeGridRangeIteme20 = new SuperMap.REST.ThemeGridRangeItem({
						start: 25.4,
						end: 27,
						color: color20,
					}),
					themeGridRange = new SuperMap.REST.ThemeGridRange({
						reverseColor: false,
						rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
						//栅格分段专题图子项数组
						items: [
							themeGridRangeIteme1,
							themeGridRangeIteme2,
							themeGridRangeIteme3,
							themeGridRangeIteme4,
							themeGridRangeIteme5,
							themeGridRangeIteme6,
							themeGridRangeIteme7,
							themeGridRangeIteme8,
							themeGridRangeIteme9,
							themeGridRangeIteme10,
							themeGridRangeIteme11,
							themeGridRangeIteme12,
							themeGridRangeIteme13,
							themeGridRangeIteme14,
							themeGridRangeIteme15,
							themeGridRangeIteme16,
							themeGridRangeIteme17,
							themeGridRangeIteme18,
							themeGridRangeIteme19,
							themeGridRangeIteme20,
						],
					}),
					themeParameters = new SuperMap.REST.ThemeParameters({
						//制作专题图的数据集数组
						datasetNames: [InterpolationAnalystEventArgs.result.dataset.split('@')[0]],
						// 制作专题图的数据集所在的数据源数组
						dataSourceNames: ['Interpolation'],
						joinItems: null,
						//专题图对象列表
						themes: [themeGridRange],
						types: ['REGION'],
					});
				var themeService = new SuperMap.REST.ThemeService(url, {
					eventListeners: {
						processCompleted: themeCompleted,
						processFailed: themeFailed,
					},
				});
				themeService.processAsync(themeParameters);
			}

			//服务端成功返回专题图结果时调用
			function themeCompleted(themeEventArgs) {
				if (themeEventArgs.result.resourceInfo.id) {
					themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer(
						'插值分析结果图',
						url,
						{
							cacheEnabled: true,
							transparent: true,
							layersID: themeEventArgs.result.resourceInfo.id,
						},
						{ maxResolution: 'auto' }
					);
					themeLayer.events.on({ layerInitialized: addThemelayer });
				}
			}

			//添加专题图至map
			function addThemelayer() {
				map.addLayer(themeLayer);
			}

			//插值分析失败后调用
			function processFailed(ServiceFailedEventArgs) {
				widgets.alert.showAlert(ServiceFailedEventArgs.error.errorMsg, false);
			}

			//服务端返回专题图结果失败时调用
			function themeFailed(serviceFailedEventArgs) {
				widgets.alert.showAlert(serviceFailedEventArgs.error.errorMsg, false);
			}

			//清除专题图图层
			function removeInterpolation() {
				widgets.alert.clearAlert();
				if (map.layers.length > 1) {
					map.removeLayer(themeLayer, true);
				}
			}
		</script>
	</body>
</html>