javascript - 为什么我不能将存储在我的 s3 存储桶中的这个 geojson 与 amcharts 一起使用?
问题描述
我想创建一个类似于此处给出的可点击地图。如果您单击该链接,它会将您带到另一个页面。我想做类似的事情,但我有一个意大利的 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 中。我确保将存储桶设置为“阻止所有公共访问”,并且在我最初将存储桶上传到存储桶时向公众提供了读取访问权限。有谁知道发生了什么?
解决方案
我使用了另一个来源,它起作用了。奇怪的是,我认为您的 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>
推荐阅读
- firebase - 列表中出现未知的额外项目(firebase)
- hibernate - 在多个应用程序中使用 Hibernate 的单个全文索引实例
- batch-file - 如何将表达式的结果存储到 Windows 批处理脚本中的变量中?
- sql - 如何在 T-sql 中的另一个表上选择具有最后一个相关记录的表的记录
- arm - 代码执行利用 Cortex M4
- ios - 点击时如何突出显示人体解剖结构的不同部分
- c# - Assembly.LoadAssembly、MEF 和 MAF:它们如何管理不同的框架程序集以及如何不锁定加载的程序集?
- error-handling - Angular GlobalErrorHandler 和 HttpErrorResponse - 解析器抛出格式错误的 HttpErrorResponse
- c# - CLR GC 线程行为:SafeFileHandle 意外完成
- git - git:提交/推送的更好方式