从谷歌地图导出geoJSON数据

Question

从谷歌地图导出geoJSON数据

javascriptgoogle-maps-api-3exportgeojson

6

有没有内置支持或任何库可以从 google.maps.Data 层或 google.maps.Data.Feature 或 google.maps.Data.Geometry，甚至使用 Marker、Polyline 和 Polygon 导出 geoJSON 数据。例如，我有这样的代码：

 var point=new google.maps.Data.Point(m.getPosition());
 activeFeature.setGeometry(point);
 console.log(activeFeature.getGeometry());
 equiLayer.add(activeFeature);

我想将这些数据导出到服务器上，格式为geojson。就像leaflet中的toGeoJson方法一样？

- vamsiampolu

https://developers.google.com/live/shows/7750088-8001 在13:27处。 - aa333

@aa333 我没有像视频中的开发者那样的JS / JSON数据源，数据是在地图上创建然后导出的。 - vamsiampolu

3

如果这是您的Google Maps Javascript API V3地图（从您的问题中不太清楚），它没有原生支持将其导出为GeoJSON，但编写代码实现此操作不应该很困难。 - geocodezip

3个回答

2

你好，我想分享一下我是如何将谷歌地图上的geojson数据导出到html文本框中的。

以下是我的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>

这是我的 JavaScript。

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

map.data类的函数togeojson将获取地图上的所有数据并返回一个对象。为了在我的文本区域中显示该对象，我需要使用JSON.stringify(data)将该对象转换为字符串。

希望这可以帮助你！

- onlyme

2

这些方法都对我不起作用。我想出了一种导出自定义多边形的方法，对其他形状也可能有用。

以下是关键的导出函数：

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

这是一个完整的示例：

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() }
    })
}

然后使用在控制台上打印的JSON文件，并将其导入。

bermudaTriangle.setPath(JSON.parse(myJson))

- Sharpiro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

一段范例函数：

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(t){
          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[t]));
            }
            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;
}

该函数创建一个带有数据的对象。你可以传递一个回调函数作为参数，该回调函数将使用该对象作为参数进行执行。

示例调用：

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

演示：http://jsfiddle.net/doktormolle/5F88D/

注意：演示还存储圆形，但 GeoJSON 不支持圆形。作为解决方法，它将圆形存储为具有半径属性的点。

当带有半径属性的点被加载到数据层中时，演示会隐藏标记并根据几何和半径属性创建一个圆形。

<edit>：现在可以使用内置方法进行 GeoJSON 导出：google.maps.Data.toGeoJson()

请参见 在 Google Maps 外保存地图实例 的示例。