Saltar al contenido

Exportar datos geoJSON de Google Maps

Solución:

Una función de muestra:

google.maps.Map.prototype.getGeoJson=function(callback){
  var geo={"type": "FeatureCollection","features": []},
      fx=function(g,t){

        var that  =[],
            arr,
            f     = {
                      MultiLineString :'LineString',
                      LineString      :'Point',
                      MultiPolygon    :'Polygon',
                      Polygon         :'LinearRing',
                      LinearRing      :'Point',
                      MultiPoint      :'Point'
                    };

        switch
          case 'Point':
            g=(g.get)?g.get():g;
            return([g.lng(),g.lat()]);
            break;
          default:
            arr= g.getArray();
            for(var i=0;i<arr.length;++i){
              that.push(fx(arr[i],f
            }
            if( t=='LinearRing' 
                  &&
                that[0]!==that[that.length-1]){
              that.push([that[0][0],that[0][1]]);
            }
            return that;
        }
      };

  this.data.forEach(function(feature){
   var _feature     = {type:'Feature',properties:{}}
       _id          = feature.getId(),
       _geometry    = feature.getGeometry(),
       _type        =_geometry.getType(),
       _coordinates = fx(_geometry,_type);

       _feature.geometry={type:_type,coordinates:_coordinates};
       if(typeof _id==='string'){
        _feature.id=_id;
       }

       geo.features.push(_feature);
       feature.forEachProperty(function(v,k){
          _feature.properties[k]=v;
       });
  }); 
  if(typeof callback==='function'){
    callback(geo);
  }     
  return geo;
}

La función crea un objeto con los datos. Puede pasar una devolución de llamada como argumento que se ejecutará con el objeto como argumento.

Llamada de muestra:

//map is the google.maps.Map-instance
map.getGeoJson(function(o){console.log(o)});

Manifestación: http://jsfiddle.net/doktormolle/5F88D/

Nota: la demostración también almacena círculos, pero los círculos no son compatibles con GeoJSON. Como solución alternativa, almacena círculos como un PUNTO con una propiedad de radio.

Cuando se carga un PUNTO con una propiedad de radio en la capa de datos, la demostración oculta el marcador y crea un círculo basado en la geometría y la propiedad de radio en su lugar.


<edit>: ahora hay un método integrado disponible para geoJSON-export: google.maps.Data.toGeoJson()

Ver Guardar instancia de mapa fuera de Google Maps para un ejemplo

Hola, me gustaría compartir lo que hice para exportar datos geojson de mapas de Google a un área de texto html.

Esta era mi vista html

     <article id="article3" style="">
        <div style="margin: 2px 0px 2px 0px;">
            <button onclick= "exportData()">Save</button>
        </div>
        <textarea id="geojson-input" placeholder="..." class="" style="height: 97%; width: 100%"></textarea>
    </article>

Este era mi javascript

     map.data.toGeoJson(function (data) {
                document.querySelector('#geojson-input').innerHTML = JSON.stringify(data);
            });

La función togeojson, que es una función de la clase map.data, obtendrá todos los datos de los mapas y devolverá el objeto. Para mostrar ese objeto en mi área de texto, tuve que convertir ese objeto en una cadena usando JSON.stringify (data);

¡Espera que eso ayude!

Ninguno de estos funcionó para mí. Descubrí una forma de exportar polígonos personalizados que también pueden ser útiles para otras formas.

Aquí está la función de exportación clave:

function getPathArray(polygon) {
    return polygon.getPath().getArray().map(p => {
        return { lat: p.lat(), lng: p.lng() }
    })
}

Aquí tienes un ejemplo completo:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: { lat: 25.774, lng: -70.190 }, // bermuda triangle
    });

    const bermudaTriangle = new google.maps.Polygon({
        paths: [
            { lat: 25.774, lng: -80.190 },
            { lat: 18.466, lng: -66.118 },
            { lat: 32.321, lng: -64.757 },
        ],
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        editable: true,
        draggable: false
    });
    bermudaTriangle.setMap(map);

    bermudaTriangle.getPaths().forEach(function (path, index) {
        google.maps.event.addListener(path, 'insert_at', function () {
            var data = getPathArray(bermudaTriangle)
            console.log(JSON.stringify(data))
        })

        google.maps.event.addListener(path, 'remove_at', function () {
            var data = getPathArray(bermudaTriangle)
            console.log(JSON.stringify(data))
        })

        google.maps.event.addListener(path, 'set_at', function () {
            var data = getPathArray(bermudaTriangle)
            console.log(JSON.stringify(data))
        })
    })

    google.maps.event.addListener(bermudaTriangle, 'dragend', function () {
        console.log("dragged")
    })
}

function getPathArray(polygon) {
    return polygon.getPath().getArray().map(p => {
        return { lat: p.lat(), lng: p.lng() }
    })
}

Luego use el json que se imprime en la consola e impórtelo

bermudaTriangle.setPath(JSON.parse(myJson))
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *