¿Cargando un archivo GeoJSON externo en el mapa del folleto?

Question

¿Cargando un archivo GeoJSON externo en el mapa del folleto?

Preguntado el 12 de Agosto, 2013: Cuando se hizo la pregunta
134099 visitas: Cuantas visitas ha tenido la pregunta
4 Respuestas: Cuantas respuestas ha tenido la pregunta
Resuelta: Estado actual de la pregunta

Me gustaría cargar un archivo geoJSON (polígono) en mi mapa de folletos. He visto ejemplos en los que geoJSON está incrustado en el código javascript, pero no puedo encontrar ningún ejemplo que muestre cómo se hace con un archivo externo.

 <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 &copy; <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>

Preguntado el 12 de Agosto, 2013 por geoffc

Answer 1

4 Respuestas

Answer 2

32voto

Brad8118 Puntos 1285

Puede usar jquery Ajax para cargar datos y luego agregarlos.

 var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

o puede usar el complemento leaflet-ajax

Respondido el 30 de Mayo, 2014 por Brad8118 (1285 Puntos )

Answer 3

21voto

xElx Puntos 21

Aquí está mi solución mínima de vainilla js. Mire ma, no se necesita jquery para una llamada rápida ajax a un archivo.

 let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.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 6 de Agosto, 2017 por xElx (21 Puntos )

Answer 4

16voto

user7116 Puntos 166

En el elemento head, hace referencia a sus archivos:

     <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

Y luego en el cuerpo:

 <body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

No tienes que "ponerlos" en un grupo de capas ...

Respondido el 12 de Agosto, 2013 por user7116 (166 Puntos )

Answer 5

15voto

geoffc Puntos 106

después de agregar var usStates = a la parte superior de mi archivo geojson, el código funcionó.

Respondido el 15 de Agosto, 2013 por geoffc (106 Puntos )

¿Cargando un archivo GeoJSON externo en el mapa del folleto?

Respuestas

Preguntas Destacadas

Etiquetas mas usadas

i-Ciencias.com

Powered by:

¿Cargando un archivo GeoJSON externo en el mapa del folleto?

Respuestas

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

i-Ciencias.com

Powered by: