為什么我不能將存儲在我的 s3 存儲桶中的這個 geojson 與 amcharts 一起使用？

Question

我想創建一個類似於此處給出的可點擊 map。 如果您單擊該鏈接，它會將您帶到另一個頁面。 我想做類似的事情，但我有一個意大利的 geojson 文件。 因此，繼我之前提出的問題之后，我決定使用 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>

上面的代碼改編自文檔中給出的示例

但是當我在 codeopen 上測試它並在 Wix 中嘗試它時，它只是說“無法加載文件”。 如您所見，GeoJSON 文件在 amazon s3 中存儲為 object。 我確保將存儲桶設置為“阻止所有公共訪問”，並且在我最初將存儲桶上傳到存儲桶時向公眾提供了讀取訪問權限。 有誰知道發生了什么？

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>