Я хотел бы загрузить файл geoJSON (многоугольник) в мою карту листовки. Я видел примеры, где geoJSON встроен в код javascript, но я не могу найти примеров, показывающих, как это делается с внешним файлом.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="usStates.geojson" type="text/javascript"></script>
<style>
html, body, #map {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 100%"</div>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([38.57, -94.71], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);
var featureStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.2
};
L.geoJson(usStates).addTo(map);
</script>
</body>
Ответы:
Посмотрите в Leaflet-Ajax. Это упрощает все. Отдам голос за Неогеомата за упоминание.
Получите скрипт здесь ( github repo ) и добавьте его в свой заголовок:
Тогда это вопрос загрузки с именем файла.
Действительно прямое исправление, и это работает. Так что
источник
Вы можете использовать jquery Ajax для загрузки данных, а затем добавить их.
или Вы можете использовать плагин leaflet-ajax
источник
Вот мое минимальное решение Vanilla JS. Смотри, ма, нет необходимости в jquery для быстрого ajax-вызова файла.
источник
new
ключевое слово дляgeoJSON
фабричной функции, но получил ошибку CORS со строкой setRequestHeader, поэтому удалил ее, и она работала нормально (должна быть какая-то настройка на моем сервере).XML Parsing Error: not well-formed
ошибку вLine Number 1, Column 1:
. Ну, поскольку данные являются геойсоном, почему они пытаются проанализировать их как XML? Я не понимаю проблему, но я хотел бы импортировать мои данные без Ajax.В элементе head вы ссылаетесь на ваши файлы:
А потом в теле:
Вам не нужно «помещать» их в группу слоев ...
источник
<script src="usStates.geojson" type="text/javascript"></script>
и добавилL.geoJson(usStates).addTo(map);
в конец моего кода. любой идеи?после добавления
var usStates =
в начало моего файла geojson код работал.источник