Importar un archivo GeoJSON local a Leaflet

Question

Importar un archivo GeoJSON local a Leaflet

Preguntado el 11 de Diciembre, 2018: Cuando se hizo la pregunta
14252 visitas: Cuantas visitas ha tenido la pregunta
3 Respuestas: Cuantas respuestas ha tenido la pregunta
Resuelta: Estado actual de la pregunta

Sólo usé un folleto. Desde la página de demostración de geoJSON He visto que si quieres incluir datos tienes que usar

<script src="data/us-states.geojson"></script>

y si abres los archivos se ve como

var ustates = {
"type": "FeatureCollection",
......
[]
};

y si quieres llamarlos utiliza

var data = [ustates] ;

¿Hay otra forma de llamar a los datos? El archivo geojson que tengo no tiene ninguna variable inicial y se ve así:

{
"type": "FeatureCollection",
......
[]
}

Tengo un montón de datos y tengo que abrir 1 por 1 para añadir variables en los datos geojson así que me refiero a si puedo llamar a los datos como

var ustates = <?php include "data/us-states.geojson"; ?>
var data = [ustates];

Preguntado el 11 de Diciembre, 2018 por fuzz

Answer 1

3 Respuestas

Answer 2

7voto

user3788581 Puntos 11

Utilizamos esta función en nuestro proyecto (los créditos van a Roberto MF ):

function fetchJSON(url) {
  return fetch(url)
    .then(function(response) {
      return response.json();
    });
}

Utiliza el API de obtención de datos para descargar el archivo. Puede utilizar simplemente su ruta data/us-states.geojson como url . Ejemplo con sus datos:

var data = fetchJSON('data/us-states.geojson')
            .then(function(data) { return data })

Tenga en cuenta que esto no funciona por defecto en Internet Explorer, pero puede rellenarlo añadiendo estas líneas a su HTML <head> :

<script src="https://bowercdn.net/c/es6-promise-3.2.2/es6-promise.min.js" integrity="sha384-GF7IR8yT5028AbfHnSJSxX0Y1D+sicFNHXDyV1Hzcf4EISXdjP8uW0Q/0yFIHpTD" crossorigin="anonymous"></script>
<script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>

Respondido el 11 de Diciembre, 2018 por user3788581 (11 Puntos )

Answer 3

5voto

Steve Gray Puntos 156

He utilizado JQuery para leer un archivo GeoJSON. Primero hay que añadir JQUery a la página, luego defino la capa, añado los datos a la capa y finalmente el mapa.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

var url = 'BaseBallFinal.json'; 
 //var bbTeam = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
  var bbTeam = L.geoJSON(null, {
        onEachFeature: forEachFeature, 
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
  });

// Get GeoJSON data and create features.
$.getJSON(url, function(data) {
        bbTeam.addData(data);
});

bbTeam.addTo(map);

Este es mi ejemplo de trabajo: http://www.gistechsolutions.com/leaflet/DEMO/Simple/indexMap1.html

Y otros: http://www.gistechsolutions.com/leaflet/DEMO/

Respondido el 20 de Diciembre, 2018 por Steve Gray (156 Puntos )

Answer 4

3voto

xElx Puntos 21

De forma muy similar a la respuesta anterior, utilizamos XHR para obtener el archivo y cargar los datos en Leaflet.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data/us-states.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();

Respondido el 11 de Diciembre, 2018 por xElx (21 Puntos )

Importar un archivo GeoJSON local a Leaflet

Respuestas

Preguntas Destacadas

Etiquetas mas usadas

i-Ciencias.com

Powered by:

Importar un archivo GeoJSON local a Leaflet

Respuestas

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

i-Ciencias.com

Powered by: