为什么不能将我的s3存储桶中存储的geojson与amcharts一起使用？

问题描述

我想创建一个类似于给定here的可点击地图。如果单击链接，则将带您到另一个页面。我想做类似的事情，但要使用意大利的geojson文件。因此，根据我之前制作的question，我决定使用amcharts。由于我是javascript和html的新手，所以我决定首先使用自己的GeoJSON文件来介绍一些相关示例。这是我要使用的代码

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv"></div>

<script>
var chart = am4core.create("chartdiv",am4maps.MapChart);
chart.geodataSource.url = "https://walruswondersitaly.s3.amazonaws.com/Regions.json"
chart.projection = new am4maps.projections.Miller();
var polygonSeries = chart.series.push(new am4maps.MappolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mappolygons.template.events.on("hit",function(ev) {
  chart.zoomToMapObject(ev.target);
});
var label = chart.chartContainer.createChild(am4core.Label);
</script>

以上代码改编自documentation

中给出的示例

但是，当我在codeopen上对其进行测试并在Wix中进行尝试时，它只是说“无法加载文件”。如您所见，GeoJSON文件作为对象存储在Amazon s3中。我确保将存储桶设置为“禁止所有公共访问”，并在我最初将其上传到存储桶时授予了读取访问权限。有人知道发生了什么吗？

解决方法

我使用了另一个来源，并且有效。我认为您的GeoJSON格式错误或有些奇怪。

var chart2 = am4core.create("chartdiv2",am4maps.MapChart);
chart2.geodataSource.url = 'https://gist.githubusercontent.com/elboman/5ee92356f49875da7337/raw/7008305a4b065a76a2c5103cd7698d990c98661a/italian-regions.geojson';
chart2.projection = new am4maps.projections.Miller();
var polygonSeries = chart2.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.events.on("hit",function(ev) {
  chart2.zoomToMapObject(ev.target);
});
var label2 = chart2.chartContainer.createChild(am4core.Label);
label2.text = "Italy";

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

#chartdiv,#chartdiv2 {
  width: 50%;
  height: 400px;
  float: left;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv2"></div>

使用您的JSON + id

var chart2 = am4core.create("chartdiv2",am4maps.MapChart);
chart2.geodataSource.url = 'https://raw.githubusercontent.com/Carlos123211/PeruGeoJson/master/italy.json';
chart2.projection = new am4maps.projections.Miller();
var polygonSeries = chart2.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.events.on("hit",function(ev) {
  chart2.zoomToMapObject(ev.target);
});
var label2 = chart2.chartContainer.createChild(am4core.Label);
label2.text = "Italy";

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv2"></div>