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

Question

我想创建一个可点击的地图，类似于给定的 here. If you click on the link it takes you to another page. I want to do a similar thing but with a geojson file I have for Italy. So following on from a previous 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 中尝试时，它只是说 'Unable to load file'。如您所见，GeoJSON 文件作为对象存储在 amazon s3 中。我确保将存储桶设置为 'block all public access off' 并在我最初将其上传到存储桶时授予 public 读取权限。有谁知道是怎么回事吗？

Answer 1

我使用了另一个来源并且有效。很奇怪，我认为您的 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>

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

Why can't I use this geojson stored on my s3 bucket with amcharts?

javascript

amazon-s3

geojson

amcharts

amcharts4