fuyuhang
/
Project_yhfu
réplica de http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_componentsDeckGL_Vue"></title>
		<script type="text/javascript" include="vue,jquery,papaparse,widgets" src="../js/include-web.js"></script>
		<script include="deck,iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
		<style>
			#main {
				margin: 0 auto;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
		<div id="main">
			<sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
				<sm-deckgl-layer layer-type="hexagon-layer" :options="deckglOptions"></sm-deckgl-layer>
			</sm-web-map>
		</div>
		<script>
			widgets.loader.showLoader('data loading...');
			var _this = this,
				popup;
			$.get('../data/deck.gl/strees_data.csv', function(csvstr) {
				widgets.loader.removeLoader();
				// 构造数据
				var features = Papa.parse(csvstr, { skipEmptyLines: true, header: true });
				var deckglOptions = {
					data: features.data,
					props: {
						extruded: true,
						radius: 55,
						autoHighlight: true,
						upperPercentile: 99,
						coverage: 0.8,
						elevationScale: 400,
						colorRange: [
							[43, 30, 61, 255],
							[56, 60, 101, 255],
							[62, 95, 126, 255],
							[73, 131, 138, 255],
							[94, 162, 141, 255],
							[130, 187, 146, 255],
							[174, 206, 161, 255],
							[214, 222, 191, 255],
						],
						opacity: 0.8,
						// lightSettings 光照配置参数，配置三维光照效果，
						lightSettings: {
							lightsPosition: [-122.5, 37.7, 3000, -122.2, 37.9, 3000], // 指定为`[x，y，z]`的光在平面阵列中的位置
							ambientRatio: 0.2, //光照的环境比例
							diffuseRatio: 0.5, //光的漫反射率
							specularRatio: 0.3, //光的镜面反射率
							lightsStrength: [1.0, 0.0, 2.0, 0.0], //平面阵列中指定为“[x，y]`的灯的强度。 长度应该是`2 x numberOfLights`
							numberOfLights: 4, //光照值
						},
						//如需了解其他配置详情，请查看 DeckglLayer api
						onHover: function(feature) {
							if (!popup) {
								popup = new mapboxgl.Popup({
									anchor: 'bottom',
									closeButton: false,
									offset: {
										bottom: [0, -10],
									},
								});
							}
							if (!feature.object) {
								popup.remove();
								return;
							}
							//+" "+feature.lngLat
							popup.setHTML('Point Count： ' + feature.object.points.length);
							popup.setLngLat(_this.map.unproject([feature.x, feature.y]));
							popup.addTo(_this.map);
						},
					},
					callback: {
						getPosition: function(feature) {
							if (!feature.latitude || !feature.longitude) {
								return [0, 0];
							}
							return [Number(feature.longitude), Number(feature.latitude)];
						},
					},
				};
				new Vue({
					el: '#main',
					data() {
						var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
						var attribution =
							"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
							" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
							" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
						return {
							deckglOptions: deckglOptions,
							mapOptions: {
								container: 'map', // container id
								style: {
									version: 8,
									sources: {
										'raster-tiles': {
											attribution: attribution,
											type: 'raster',
											tiles: [
												host +
													'/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
											],
											tileSize: 256,
										},
									},
									layers: [
										{
											id: 'simple-tiles',
											type: 'raster',
											source: 'raster-tiles',
											minzoom: 0,
											maxzoom: 22,
										},
									],
								},
								center: [-122.430844, 37.772276],
								zoom: 12,
								pitch: 60,
								bearing: 36,
							},
						};
					},
					methods: {
						mapIsLoaded(e) {
							_this.map = e.map;
						},
					},
				});
			});
		</script>
	</body>
</html>