0

我在地图上有一些国家在点击时会显示一些链接。它们存储为对象数组中的对象，如下所示。

let groupData = [
      {
        "color": chart.colors.getIndex(0),
        "data": [
          {
            "country": "Austria",
            "id": "AT", // With MapPolygonSeries.useGeodata = true, it will try and match this id, then apply the other properties as custom data
            "link": ["https://www.example1.com"] 
          }, {
            "country": "France",
            "id": "FR",
            "link": ["https://www.example2.com", "https://www.example3.com", "https://www.example4.com"] 
          }
        ]
      }
    ];

目前，当我单击国家时，我从对象数组中定义的最后一个对象（国家）获取链接。在这种情况下，法国。

"country": "France",
            "id": "FR",
            "link": ["https://www.example2.com", "https://www.example3.com", "https://www.example4.com"]

如何让每个国家/地区仅显示为其定义的链接？1 个 AT 链接和 3 个 FR 链接？

为了更好地理解，请检查片段。

非常感谢！

am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    let chart = am4core.create("map", am4maps.MapChart);

    // Responsiveness enabled
    chart.responsive.enabled = true;

    // Set map definition
    chart.geodata = am4geodata_worldHigh;
    
    // Set projection
    chart.projection = new am4maps.projections.Miller();
    
    // Zoom control
    chart.zoomControl = new am4maps.ZoomControl();
    
    let homeButton = new am4core.Button();
    homeButton.events.on("hit", function() {
      chart.goHome();
    });
    
    homeButton.icon = new am4core.Sprite();
    homeButton.padding(7, 5, 7, 5);
    homeButton.width = 30;
    homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
    homeButton.marginBottom = 10;
    homeButton.parent = chart.zoomControl;
    homeButton.insertBefore(chart.zoomControl.plusButton);
    
    // Center on the groups by default
    chart.homeZoomLevel = 3.5;
    chart.homeGeoPoint = { longitude: 10, latitude: 54 };  

    let groupData = [
      {
        "color": chart.colors.getIndex(0),
        "data": [
          {
            "country": "Austria",
            "id": "AT",
            "link": ["https://www.example1.com"] 
          }, {
            "country": "France",
            "id": "FR",
            "link": ["https://www.example2.com", "https://www.example3.com", "https://www.example4.com"] 
          }
        ]
      }
    ];
    


    // This array will be populated with country IDs to exclude from the world series
    let excludedCountries = ["AQ"];
    
    // Create a series for each group, and populate the above array
    groupData.forEach(function(group) {
      let series = chart.series.push(new am4maps.MapPolygonSeries());
      series.name = group.name;
      series.useGeodata = true;
      let includedCountries = [];

      group.data.forEach(function(country) {
        includedCountries.push(country.id);
        excludedCountries.push(country.id);

        let polygonTemplate = series.mapPolygons.template;
        polygonTemplate.tooltipHTML = '<b>{country}</b>';

          polygonTemplate.events.on("hit", function(ev) {
            chart.closeAllPopups();

            
            // Display country specific links

            chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + country.link.map(url =>
              '<br><a href="' + encodeURI(url) + '">Country specific links ' + '</a>').join(""));
              
              console.log(country);
              console.log(country.link);
          });
      });

      series.include = includedCountries;
    
      series.fill = am4core.color(group.color);
      series.setStateOnChildren = true;
      series.calculateVisualCenter = true;
      series.tooltip.label.interactionsEnabled = false; //disable tooltip click
      series.tooltip.keepTargetHover = true;
    

      // Country shape properties & behaviors
      let mapPolygonTemplate = series.mapPolygons.template;
      mapPolygonTemplate.fill = am4core.color("orange");
      mapPolygonTemplate.fillOpacity = 0.8;
      mapPolygonTemplate.nonScalingStroke = true;
      mapPolygonTemplate.tooltipPosition = "fixed";
    
      mapPolygonTemplate.events.on("over", function(event) {
        series.mapPolygons.each(function(mapPolygon) {
          mapPolygon.isHover = false;
        })
        event.target.isHover = false;
        event.target.isHover = true;
      })
    
      mapPolygonTemplate.events.on("out", function(event) {
        series.mapPolygons.each(function(mapPolygon) {
          mapPolygon.isHover = false;
        })
        
      })
    
      // States  
      let hoverState = mapPolygonTemplate.states.create("hover");
      hoverState.properties.fill = am4core.color("#FFCC00");
    
      series.data = JSON.parse(JSON.stringify(group.data));
    
    });
    
    // The rest of the world.
    let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
    let worldSeriesName = "world";
    worldSeries.name = worldSeriesName;
    worldSeries.useGeodata = true;
    worldSeries.exclude = excludedCountries;
    worldSeries.fillOpacity = 0.5;
    worldSeries.hiddenInLegend = true;
    worldSeries.mapPolygons.template.nonScalingStroke = true;


});
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  #map {
    width: 100%;
    height: 600px;
    overflow: hidden;
  }

  #map a,
  b {
    cursor: pointer;
    color:  #003399;
    text-align: center;
  }

  #map a:hover {
    color: #023432;
  }

  .ampopup-content {
    /* width: 40%; */
    text-align: center;
  }

  .ampopup-header {
    background-color: #003399 !important;
  }

  .ampopup-close {
    filter: invert(1);
  }

  .ampopup-inside {
    background-color: rgb(255, 255, 255);
  }

  .ampopup-inside a {
    color: #28a86c !important;
  }

  .ampopup-inside a:hover {
    color: #023432 !important;
  }

  .ampopup-curtain {
    display: block !important;
    background-color: rgba(7, 22, 51, 0.7) !important;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EU agencies map</title>
    <link rel="stylesheet" href="css/site.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Scripts for loading AmCharts Map -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="map"></div>
            </div>
        </div>
    </div>
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

4

1 回答 1

0

问题出在循环中。我不得不从循环中取出以下几行：

group.data.forEach(function(country) {
        includedCountries.push(country.id);
        excludedCountries.push(country.id);
});

let polygonTemplate = series.mapPolygons.template;
        polygonTemplate.tooltipHTML = '<b>{country}</b>';

          polygonTemplate.events.on("hit", function(ev) {
            chart.closeAllPopups();

            chart.openPopup("<strong>" + ev.target.dataItem.dataContext.country + "</strong>" + country.link.map(url => '<br><a href="' + encodeURI(url) + '">Country specific links ' + '</a>').join(""));
              
          });
于 2021-02-04T10:09:11.393 回答