xkaiyu.github.io/index.html at main · xkaiyu/xkaiyu.github.io · 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
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mapa Global de Datos - Leaflet Local</title>
  <link rel="stylesheet" href="leaflet.css" />
  <!-- 引入 D3.js -->
  <script src="d3.v7.min.js"></script>
  <style>
    html, body, #map { height: 100%; margin: 0; padding: 0; background: #000; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="leaflet.js"></script>
  <script>
  const map = L.map('map', {
    zoomControl: true,
    preferCanvas: true
  }).setView([20, 0], 2);

  map.getContainer().style.backgroundColor = '#1e2d4e';

  // Datos (código ISO Alpha-3 → valor)
  const data = {
    "USA": 320000000,
    "CHN": 2800,
    "IND": 1800,
    "BRA": 950,
    "RUS": 880,
    "DEU": 720,
    "FRA": 680,
    "GBR": 650,
    "JPN": 620
  };

  // 颜色映射
  function getColor(value, min, max) {
    const scale = d3.scaleLinear()
      .domain([min, max])  // 输入数据的最小值和最大值
      .range(['#f8fcff', '#08306b']);  // 输出颜色范围，从浅蓝到深蓝

    return scale(value);
  }

  function style(feature) {
    const code = feature.properties.adm0_a3;
    const val = data[code] || 0;

    // 动态计算最大最小值
    const values = Object.values(data);
    const min = Math.min(...values);
    const max = Math.max(...values);

    return {
      fillColor: getColor(val, min, max),  // 动态获取颜色
      weight: 1,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: val ? 0.8 : 0.1
    };
  }

  function onEachFeature(feature, layer) {
    const code = feature.properties.adm0_a3;
    const name = feature.properties.name_es || 'Desconocido';
    const val = data[code] || 'Sin datos';

    layer.bindTooltip(`${name}<br>Valor: ${val}`, { sticky: true });

    layer.on({
      mouseover: e => {
        e.target.setStyle({ weight: 2, color: '#ffd700', fillOpacity: 0.9 });
        layer.bringToFront();
      },
      mouseout: e => geojsonLayer.resetStyle(e.target)
    });
  }

  let geojsonLayer;

  fetch('world.geojson')
    .then(res => {
      if (!res.ok) throw new Error('Error al cargar el archivo GeoJSON: ' + res.status);
      return res.json();
    })
    .then(geoData => {
      geojsonLayer = L.geoJSON(geoData, {
        style: style,
        onEachFeature: onEachFeature
      }).addTo(map);

      map.invalidateSize();
    })
    .catch(err => {
      console.error('Error:', err);
      alert('No se pudo cargar world.geojson. Verifica la ruta o el formato.');
    });
  </script>
</body>
</html>