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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title data-i18n="resources.title_componentsGraphThemeLayer_Vue"></title>
		<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
		<script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
		<script type="text/javascript" src="../data/chinaConsumptionLevel.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 server-url='https://iportal.supermap.io/iportal' map-id="1329428269">
				<sm-graph-theme-layer
					:options="graphThemeLayerOptions"
					layer-name="pieThemeLayer"
					:data="graphFeatures"
					charts-type="Pie"
					@load="addLayerSucceeded"
				></sm-graph-theme-layer>
			</sm-web-map>
		</div>
		<script>
			var features, chartsSettingForPieOrRing, themeLayerOptions, popup;
			var feas = [];
			for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
				// 省居民消费水平（单位：元）信息
				var provinceInfo = chinaConsumptionLevel[i];
				var fea = {
					type: 'feature',
					geometry: {
						type: 'Point',
						coordinates: [provinceInfo[1], provinceInfo[2]],
					},
					properties: {
						NAME: provinceInfo[0],
						CON2009: provinceInfo[3],
						CON2010: provinceInfo[4],
						CON2011: provinceInfo[5],
						CON2012: provinceInfo[6],
						CON2013: provinceInfo[7],
					},
				};

				feas.push(fea);
			}

			features = {
				type: 'FeatureCollection',
				features: feas,
			};

			chartsSettingForPie = {
				width: 240,
				height: 100,
				codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
				sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的（表示字段值的图形）样式
				sectorStyleByFields: [
					{ fillColor: '#FFB980' },
					{ fillColor: '#5AB1EF' },
					{ fillColor: '#B6A2DE' },
					{ fillColor: '#2EC7C9' },
					{ fillColor: '#D87A80' },
				],
				sectorHoverStyle: { fillOpacity: 1 },
				xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
				axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
				axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
				backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
				backgroundRadius: [5, 5, 5, 5], // 背景框圆角参数
			};

			// 设置 graphThemeLayer option 参数
			themeLayerOptions = {
				attributions: ' ',
				themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
				opacity: 0.9,
				chartsSetting: chartsSettingForPie,
			};

			// 添加弹窗
			function showInfo(themeLayer, map) {
				themeLayer.on('mousemove', function(e) {
					if (popup) {
						popup.remove();
					}
					if (e.target && e.target.refDataID && e.target.dataInfo) {
						// 获取图形对应的数据 (feature)
						var fea = themeLayer.getFeatureById(e.target.refDataID);
						var info = e.target.dataInfo;

						// 弹窗内容
						var contentHTML = "<div style='color: #000; background-color: #fff'>";
						contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
						contentHTML += "<hr style='margin: 3px'>";

						switch (info.field) {
							case 'CON2009':
								contentHTML += resources.text_consumptionLevel1 + '09' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
								break;
							case 'CON2010':
								contentHTML += resources.text_consumptionLevel1 + '10' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
								break;
							case 'CON2011':
								contentHTML += resources.text_consumptionLevel1 + '11' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
								break;
							case 'CON2012':
								contentHTML += resources.text_consumptionLevel1 + '12' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
								break;
							case 'CON2013':
								contentHTML += resources.text_consumptionLevel1 + '13' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
								break;
							default:
								contentHTML += 'No Data';
						}
						contentHTML += '</div>';

						var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
						popup = new mapboxgl.Popup({ closeOnClick: false })
							.setLngLat([tempPoint.lng, tempPoint.lat])
							.setHTML(contentHTML)
							.addTo(map);
						return;
					}
					if (popup) {
						popup.remove();
					}
				});
			}
			new Vue({
				el: '#main',
				data() {
					return {
						graphThemeLayerOptions: themeLayerOptions,
						graphFeatures: features,
						addLayerSucceeded: showInfo,
					};
				},
			});
		</script>
	</body>
</html>