#javascript #amazon-s3 #geojson #amcharts #amcharts4
#javascript #amazon-s3 #geojson #amcharts #amcharts4
Вопрос:
Я хочу создать интерактивную карту, подобную приведенной здесь. Если вы нажмете на ссылку, вы перейдете на другую страницу. Я хочу сделать аналогичную вещь, но с файлом 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. Я убедился, что в корзине было установлено значение «блокировать весь общедоступный доступ», и доступ на чтение был предоставлен общедоступному, когда я первоначально загрузил его в корзину. Кто-нибудь знает, что происходит?
Комментарии:
1. является ли ваш s3bucket общедоступным и к нему прикреплены соответствующие политики cors?
2. Поскольку он неправильно структурирован, если это GeoJSON, в нем отсутствует идентификатор, который должен быть уникальным.
3. @DanielA. Белый Когда я создавал корзину s3, я снял флажок «Блокировать весь общедоступный доступ». Это то, что вы имели в виду?
4. вы также должны включить cors: docs.aws.amazon.com/AmazonS3/latest/user-guide /…
5. @Carlos1232 Но этот файл GeoJSON создан из файла формы, который я преобразовал в GeoJSON с помощью QGIS. Я могу открыть результирующий файл GeoJSON после того, как он был создан с помощью QGIS, поэтому он, должно быть, сохранил его должным образом?
Ответ №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> Комментарии:
1. Да, это определенно работает, но, похоже, в GeoJSON нет той детализации, которая мне нужна. В любом случае GeoJSON отлично открывается с помощью QGIS, которая является очень популярной пространственной программой с открытым исходным кодом, поэтому я предполагаю, что с самим файлом GeoJSON все в порядке. Если вы хотите, вы можете сами просмотреть этот файл GeoJSON, чтобы проверить. Ссылка приведена в коде в моем вопросе (она общедоступна).
2. Как вы думаете, это может быть проблема с разрешениями, как у @DanielA. Предложил Уайт?
3. Похоже, что это проблема (проблема CORS). Кроме того, ваш json слишком велик, просто для добавления этих деталей попробуйте поискать другой, если это возможно; Я также добавил gitrepo с правильным JSON (без идентификаторов).
4. на самом деле мне удалось найти инструмент, который создает гораздо меньшую версию того, что находится в этой корзине s3. Не могли бы вы связать меня с вашим репозиторием, который вы создали? В противном случае я могу просто использовать тот, который вы использовали в своем ответе.
5. Это репозиторий italy.json