问题描述
我在地图上有一些国家/地区在点击时会显示一些链接。它们作为对象存储在对象数组中,如下所示。
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","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,16 L10,10 L6,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),"link": ["https://www.example1.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>
解决方法
问题出在循环中。我不得不从循环中取出以下几行:
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(""));
});