Карты Amcharts4 с пользовательскими данными geo json показывают только одну функцию (географический регион) из многих? - PullRequest
Новая
       25

Карты Amcharts4 с пользовательскими данными geo json показывают только одну функцию (географический регион) из многих?

0 голосов
/ 09 июля 2020

Я пытался создать карту с пользовательскими картами amcharts4, используя этот учебник. Он отлично работает, когда я использовал карту из библиотеки amcharts geo json. Но когда я добавляю другую карту, например , эту карту . Он показывает только последнюю функцию из набора функций geo json. Я попытался добавить id, как описано здесь, в этой проблеме , но это дало мне тот же результат. Может ли кто-нибудь помочь мне выполнить эту работу?

вот ручка кода, демонстрирующая проблему: https://codepen.io/sankhax/pen/YzwLdJy

Заранее спасибо.

1 Ответ

2 голосов
/ 09 июля 2020

В вашем Geo JSON по-прежнему отсутствует свойство id, которое должно быть уникальным для каждой функции в вашем JSON массиве features; в руководстве указано, что он должен находиться на верхнем уровне объекта функции, но наличие id в объекте properties также работает, как вы можете видеть на другой карте в коде. Значение, хранящееся в electoralDistrictCode из ваших данных о свойствах, является хорошим кандидатом для id: 

[{
    "type": "Feature",
    "id": "MON",
    "properties": {
        "electoralDistrictCode": "MON",
        "electoralDistrict": "Monaragala",
        // ...
    },
    "geometry": {/* ... */}
},{
    "type": "Feature",
    "id": "ANU",
    "properties": {
        "electoralDistrictCode": "ANU",
        "electoralDistrict": "Anuradhapura",
        // ...
    },
    "geometry": {/* ... */}
},
// ...
]

Как только вы добавите это в свой JSON, ваша карта будет правильно отображаться в AmCharts v4. Демо ниже, используя ручной AJAX запрос на изменение JSON для работы с библиотекой: 

var map = am4core.create("chartdiv", am4maps.MapChart);
// indonesia geojson
fetch(
  "https://raw.githubusercontent.com/GayanSandaruwan/elections/master/electoral_with_results.geojson"
)
  .then(function(resp) {
    if (resp.ok) {
      return resp.json();
    }
    throw new Error("Unable to fetch json data");
  })
  .then(function(data) {
    //add the missing id property before assigning it to the map
    data.features.forEach(function (feature) {
      feature.id = feature.properties.electoralDistrictCode;
    });
    map.geodata = data;
  });
map.projection = new am4maps.projections.Miller();
var polygonSeries = new am4maps.MapPolygonSeries();
polygonSeries.useGeodata = true;
map.series.push(polygonSeries);
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
...