Question

与https://www.amcharts.com/demos/#javascript-maps一样，可以使用AmCharts JS库绘制许多精美的地理图表。

但是，我想知道是否可以创建自定义地图。例如，我想创建一个包含所有用颜色编码的国家/地区的全球地图，但要将美国和加拿大显示为一个单独的国家/地区，而在它们之间没有任何中间边界。所有其他国家应保持不变。

真的很感谢上面指示的任何指针。

谢谢

Answer 1

使用amCharts v4，我们已切换到using GeoJSON for our maps。

虽然我确定有way to merge geographical polygons正在使用mapshaper，但我还没有尝试过，并且已经习惯使用免费软件QGIS。 / p>

如果您有兴趣，已经有a tutorial out there on merging polygons。无论如何，我将在此处提供一个快速，具体的摘要。

下载并安装QGIS，然后继续获取最新版本的amCharts v4 worldLow.json（或worldHigh.json，如果需要更多详细信息），在这种情况下，我使用了worldLow.json ：

https://github.com/amcharts/amcharts4-geodata/blob/master/dist/script/json/worldLow.json

原始文件：

https://raw.githubusercontent.com/amcharts/amcharts4-geodata/master/dist/script/json/worldLow.json

复制.json文件或以其他方式重命名该文件，将在以下步骤中将其覆盖。
打开QGIS并开始一个新项目
菜单：图层->添加矢量图层->源->矢量数据集：选择以上文件->添加
通过以下方式启用图层编辑：单击铅笔图标，菜单：图层->切换编辑，或者在左下方的“图层”面板中右键单击图层，然后在上下文菜单中选择“切换编辑”
菜单：编辑->选择->选择功能
选择美国和加拿大的多边形。
菜单：编辑->合并所选功能（在底部附近）

保存您的项目，保存图层编辑，现在您的json文件将被更新。

它应该看起来像这样：

https://gist.github.com/notacouch/485b8525a360c15690f1ab23cbf04940

现在要在您的地图中引用它，您可以通过以下方式进行引用：

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.geodataSource.url = "https://gist.githubusercontent.com/notacouch/485b8525a360c15690f1ab23cbf04940/raw/e6742c279571ae02166027817351a4250b1bea69/worldLow--canadia.json";

此外，您可以使用默认的ColorSet例如每个国家/地区来生成新颜色

// Have amCharts generate a new color for each mapPolygon once they're available
//
// Learn more about Event Listeners:
// {@link https://www.amcharts.com/docs/v4/concepts/event-listeners/}
polygonSeries.events.on("datavalidated", function() {
  polygonSeries.mapPolygons.each(function(polygon, index) {
    // Learn more about ColorSets:
    // {@link https://www.amcharts.com/docs/v4/concepts/colors/#Color_sets}
    polygon.fill = chart.colors.getIndex(index);
  });
});

// Create hover state and set alternative fill color
//
// Learn more about States:
// {@link https://www.amcharts.com/docs/v4/concepts/states/}
var hs = polygonTemplate.states.create("hover");

// Darken the polygon's current color
//
// Learn more about Adapters:
// {@link https://www.amcharts.com/docs/v4/concepts/adapters/}
hs.adapter.add("fill", function(fill) {
  return fill.brighten(-0.2);
});

这是一个演示，其中包含所有内容：

https://codepen.io/team/amcharts/pen/abd95bebcfb65a74d9472043d63351fc

这可能是不可取的，您也可以通过data binding或heat map进行着色。

一般而言，要在v4中自定义地图，建议您参考Creating custom maps上的指南。在mapshaper，QGIS和所有与地图相关的文件之间，肯定会有一种方法来获得您想要的自定义，并且可能也可以在很短的时间内完成。

希望这会有所帮助。

如何使用AmCharts创建自定义地图

1 个答案: