来自geojson的Amchart地图，只显示一个矩形答案

【问题标题】：Amchart map from geojson, just show a rectangle来自geojson的Amchart地图，只显示一个矩形
【发布时间】：2020-06-15 02:27:25
【问题描述】：

我的输出

这是我的输出，只是一个矩形，当我在geojson.io 或mapshapper 尝试它时不像地图，而且我的浏览器控制台中没有错误..

我的 Geojson

我已经在 features 对象中使用了“id”，这是我的示例 geoJson：

{type: "FeatureCollection", features: Array(14)}
features: Array(14)

0:
geometry: {type: "Polygon", coordinates: Array(1)}
properties:{
id: 332112
kabupaten: "DEMAK"
kecamatan: "Bonang"
provinsi: "JAWA TENGAH"
__proto__: Object
type: "Feature"
__proto__: Object
}

1: {type: "Feature", geometry: {…}, properties: {…}}
2: {type: "Feature", geometry: {…}, properties: {…}}

AmChart 代码

我的 vue js 代码加载 amcharts 地图

import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
import robots from "./assets/demak"

export default {
  mounted() {
    let map = am4core.create("chartdiv", am4maps.MapChart)

    map.geodata = robots

    console.log(robots);


    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true

    var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.tooltipText = "{KABUPATEN}";
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

// Add zoom control
map.zoomControl = new am4maps.ZoomControl();

  },
  beforeDestroy() {
    if (this.map) {
      this.map.dispose()
    }
  }
}

【问题讨论】：

您的浏览器控制台中报告了任何错误吗？
我的浏览器控制台没有错误..

标签： javascript vue.js dictionary geojson amcharts

【解决方案1】：

问题是 mapshaper 正在以逆时针方向重新排列您的地图坐标，而 Amharts 假设它是顺时针方向排列的。
您可以阅读解释并尝试使用 python 代码将其重新排列在：
https://www.wemcouncil.org/wp/how-to-make-mapshaper-output-compatible-with-amcharts4-using-python
它适用于我的情况。

【讨论】：