Albert-elemap/world-geo.html at main · rcqed/Albert-elemap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>电子地图册</title>
    <style>
        /* 隐藏页面滚动条 */
        body {
            overflow: hidden;
        }
    </style>
</head>
<body>
	<div id="chart-container" style="width: 100vw; height: 100vh;"></div>

	<script type="text/javascript" src="./_js/echarts.min.js"></script>
	<script type="module">
		// load word geo json zh data
		import worldGeoJsonZh from './_js/world-geo-json-zh.js'

		var chartDom = document.getElementById("chart-container");

		// 使用Fetch API获取文件内容
		fetch('./videolink.md')
			.then(response => response.text())
			.then(text => {
				// 在这里处理从文件中获取的文本数据
				// 可以根据文件内容的格式进行解析
				// 假设文件内容是逗号分隔的国家名称和链接
				// 例如：国家1,链接1\n国家2,链接2\n...
				var lines = text.split('\n');
				var data = lines.map(line => {
					var parts = line.split(',');
					return { name: parts[0], link: parts[1] };
				});

				// 调用创建地图的函数，确保数据已准备好
				createMap(data);
			})
			.catch(error => {
				console.error('无法获取文件内容:', error);
			});

		function createMap(data) {
			// 在这里创建地图，并将data分配给地图数据
			var myChart = echarts.init(chartDom);
			echarts.registerMap('WorldZh', worldGeoJsonZh);

			var lightBlueItemStyle = {
				normal: {
					areaColor: 'lightblue',
				},
				emphasis: {
					areaColor: '#f79e78'
				}
			};

			var option = {
				series: [
					{
						name: 'Demo',
						type: 'map',
						roam: true,
						map: 'WorldZh',
						data: data.map(function (item) {
							return {
								name: item.name,
								value: 1,
								link: item.link,
								itemStyle: lightBlueItemStyle
							};
						}),
						itemStyle: {
							borderColor: 'white'
						},
						emphasis: {
							// 可以设置地图区域的高亮样式
						}
					}
				]
			};

			myChart.setOption(option);

			myChart.on('click', function (params) {
				if (params.data && params.data.link) {
					window.open(params.data.link, '_blank');
				}
			});
		}
	</script>
</body>
</html>