fuyuhang
/
Project_yhfu
зеркало из http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_componentsMapV_Vue"></title>
		<script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
		<script
			include="iclient-mapboxgl-vue,mapbox-gl-enhance,proj4,mapv"
			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="addPopup">
				<sm-mapv-layer :data="lineDataSet" :options="lineMapvOptions"></sm-mapv-layer>
				<sm-mapv-layer :data="ponitDataSet" :options="pointMapvOptions"></sm-mapv-layer>
			</sm-web-map>
		</div>
		<script>
			$.get('../data/wuhan-car', function(rs) {
				// 构造数据
				var data = [];
				var timeData = [];
				rs = rs.split('\n');
				var maxLength = 0;
				for (var i = 0; i < rs.length; i++) {
					var item = rs[i].split(',');

					var coordinates = [];
					if (item.length > maxLength) {
						maxLength = item.length;
					}
					for (j = 0; j < item.length; j += 2) {
						if (item.length === 1) {
							continue;
						}
						coordinates.push(proj4('EPSG:3857', 'EPSG:4326', [parseInt(item[j]), parseInt(item[j + 1])]));
						timeData.push({
							geometry: {
								type: 'Point',
								coordinates: proj4('EPSG:3857', 'EPSG:4326', [
									parseInt(item[j]),
									parseInt(item[j + 1]),
								]),
							},
							count: 1,
							time: j,
						});
					}

					data.push({
						geometry: {
							type: 'LineString',
							coordinates: coordinates,
						},
					});
				}
				// 构造 dataset 和 mapvOptions
				var lineDataSet = new mapv.DataSet(data);

				var lineMapvOptions = {
					strokeStyle: 'rgba(53,57,255,0.5)',
					coordType: 'bd09mc',
					shadowColor: 'rgba(53,57,255,0.2)',
					shadowBlur: 3,
					lineWidth: 3.0,
					draw: 'simple',
				};

				var ponitDataSet = new mapv.DataSet(timeData);

				var pointMapvOptions = {
					fillStyle: 'rgba(255, 250, 250, 0.2)',
					coordType: 'bd09mc',
					globalCompositeOperation: 'lighter',
					size: 1.5,
					animation: {
						stepsRange: {
							start: 0,
							end: 100,
						},
						trails: 3,
						duration: 5,
					},
					draw: 'simple',
				};

				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 {
							lineDataSet: lineDataSet,
							lineMapvOptions: lineMapvOptions,
							ponitDataSet: ponitDataSet,
							pointMapvOptions: pointMapvOptions,
							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: [114.321317, 30.398428],
								zoom: 10,
							},
						};
					},
					methods: {
						addPopup(e) {
							var map = e.map;
							new mapboxgl.Popup({ closeOnClick: false })
								.setLngLat(map.getCenter())
								.setHTML(resources.text_iClient)
								.addTo(map);
						},
					},
				});
			});
		</script>
	</body>
</html>