如何使用 AmCharts 創建自定義地圖

Question

Geographical Maps 上有很多漂亮的圖表，可以使用 AmCharts JS 庫繪制，如https://www.amcharts.com/demos/#javascript-maps

但是，我想知道是否可以創建自定義地圖。 例如，我想創建一張包含所有顏色編碼國家/地區的全球地圖，但希望將美國和加拿大顯示為一個單獨的國家/地區，它們之間沒有任何中間邊界。 所有其他國家應保持不變。

非常感謝上述方向的任何指示。

謝謝，

Answer 1

使用 amCharts v4，我們已經改用GeoJSON 來制作地圖。

雖然我確信有某種方法可以使用mapshaper合並地理多邊形，但我自己還沒有嘗試過，並且已經習慣使用免費軟件QGIS 。

如果您有興趣，已經有關於合並多邊形的教程。 無論如何，我將在這里給出一個快速、具體的綱要。

下載並安裝 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並開始一個新項目
• 菜單：圖層 -> 添加矢量圖層 -> 源 -> 矢量數據集：選擇上面的文件 -> 添加
• 通過以下任一方式啟用圖層編輯：單擊鉛筆圖標，菜單：圖層 -> 切換編輯，或在左下角的圖層面板中右鍵單擊圖層並在上下文菜單中選擇切換編輯
• 菜單：編輯 -> 選擇 -> 選擇特征
• 選擇美國和加拿大多邊形。
• 菜單：Edit -> Merge selected features（靠近底部）

保存您的項目，保存圖層編輯，現在您的 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

這可能是不可取的，您還可以通過數據綁定或熱圖進行着色。

要在 v4 中自定義地圖，我建議查看我們的創建自定義地圖指南。 在 mapshaper、QGIS 和所有與地圖相關的文件之間，肯定有一種方法可以在短時間內獲得您想要的定制。

希望這可以幫助。