Question

向下钻取地图示例具有index.html文件，该文件引用了三个相关的javascript文件。

index.js
continentsLow.js
worldLow.js

现在，各种引用都指向允许array of areas的url and target to be specified的定义。

但是，哪个JavaScript文件会承担此负载并不清楚。

在我看来，index.js文件的相关部分是：

// Countries
var countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
var countries = countriesSeries.mapPolygons;
countriesSeries.visible = false; // start off as hidden
countriesSeries.exclude = ["AQ"];
countriesSeries.geodata = am4geodata_worldLow;
countriesSeries.useGeodata = true;
// Hide each country so we can fade them in
countriesSeries.events.once("inited", function() {
  hideCountries();
});

worldLow文件似乎更合适，因为它定义了国家/地区多边形

am4internal_webpackJsonp(["fcaa"],{ATzU:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});window.am4geodata_worldLow={type:"FeatureCollection",
features:[{type:"Feature",geometry:{type:"Polygon",coordinates:[[[179.2223,-8.554],[179.2023,-8.4653],[179.2312,-8.5048],[179.2223,-8.554]]]},properties:{name:"Tuvalu",id:"TV"},id:"TV"},
{type:"Feature",geometry:{type:"Polygon",coordinates:[[[3.4624,-54.4471],[3.3461,-54.4511],[3.3669,-54.3997],[3.4814,-54.4001],[3.4624,-54.4471]]]},properties:{name:"Bouvet Island",id:"BV"},id:"BV"},
{type:"Feature",geometry:{type:"Polygon",coordinates:[[[-5.3345,36.1623],[-5.3382,36.1122],[-5.3562,36.1264],[-5.3551,36.1455],[-5.3345,36.1623]]]},[...]

当我尝试在此数组中添加url属性时，它失败了。

执行此操作的正确方法是什么？

Answer 1

您引用的链接全部针对amCharts的v3，而您的代码针对v4。

这是在线v4深入地图演示：https://www.amcharts.com/demos/drill-down-map/（我将以此为基础来编写下面的代码）。

尚不清楚您的问题是什么，我假设您正在尝试使国家/地区可以点击链接。 url property of a MapPolygon是进行这些更改的正确位置。

您可以直接分配它，也可以通过binding property fields to data分配它。

要直接分配它，您可以等到该系列加载完毕后，例如通过其"inited" event，然后使用系列的getPolygonById()方法通过其ISO2 ID来获取国家/地区。因此，例如如果您希望加拿大点击进入Google：

countriesSeries.events.on("inited", function() {
  var canada  = countriesSeries.getPolygonById('CA');
  canada.url = "https://www.google.com/search/?q=canada";
});

要将url的{{1}}属性绑定到您提供给该系列的数据中可能出现的字段，请将系列的template的MapPolygon设置为数据对象中匹配字段的名称（假设在这种情况下，我们也将使用propertyFields.url），例如：

"url"

现在只需pass data to the series，例如如果您希望美国点击进入google.com，则将一个对象为countrySeries.mapPolygons.template.propertyFields.url = "url";为id且"US"为"url"的对象传递给数组：

"http://google.com"

这是一个演示：

https://codepen.io/team/amcharts/pen/6b8bffc714a966304a8f29d6939ee064

可点击的amcharts细分地图国家/地区

1 个答案: