amcharts4 使用多边形属性获取地图元素到 link 到 URL

Question

以下（在调用 core.js, maps.js, animated.js 和上下文 countryLow.js 文件时呈现带有区域（或子行政区）多边形的地图：

var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_franceLow;
chart.projection = new am4maps.projections.Miller();

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.applyOnClones = true;
polygonSeries.fill = am4core.color("#a791b4");
polygonSeries.fillOpacity = 0.8; 
polygonSeries.strokeOpacity = 0.3;

var regionTemplate = polygonSeries.mapPolygons.template;
regionTemplate.tooltipText = "{name}";
regionTemplate.properties.fillOpacity = 0.8; 
regionTemplate.propertyFields.fill = "color";
regionTemplate.propertyFields.url = "url";
regionTemplate.columns.template.url = "http://localhost:3000/go/cities?region_id={properties.id()}"

在显示工具提示时，如何在将多边形的 ID 值作为参数传递给 URL 时让多边形可点击？

Answer 1

您可以使用适配器修改原始 url，例如：

regionTemplate.url = "http://www.amcharts.com/";
regionTemplate.adapter.add("url", (url, target)=>{
   return url + "?id=" + target.dataItem.dataContext.id;
})

Answer 2

只需在 Javascript 而不是 typescript 中编写 zeroin 代码，您就不会出现错误；

regionTemplate.url = "http://www.amcharts.com/";
regionTemplate.adapter.add("url", function(url, target) { return url + "?id=" + target.dataItem.dataContext.id; }):

Answer 3

You can use placeholders in URLs. 例如：

regionTemplate.url = "http://localhost:3000/go/cities?region_id={id.urlEncode()}"

演示：

https://codepen.io/team/amcharts/pen/30dc8cb2bcdef6a2d5f11d41db1e58a1

amcharts4 使用多边形属性获取地图元素到 link 到 URL

amcharts4 getting map elements to link to URL using polygon property

javascript

amcharts

amcharts4

amcharts4 使用多边形 属性 获取地图元素到 link 到 URL

amcharts4 getting map elements to link to URL using polygon property

javascript

amcharts

amcharts4

amcharts4 使用多边形属性获取地图元素到 link 到 URL