javascript - Google Drawing API 多边形数组 javascript

Question

在多边形形状中，需要在末尾重复起点，才能得到GeoJSON以下数组:

{
    "type": "Polygon",
    "coordinates": [
        [
            [15.99609375, 62.0215281910076],
            [-9.140625, 51.1793429792893],
            [12.12890625, 37.0200982013681],
            [44.12109375, 37.7185903255882],
            [49.5703125, 59.5343180010956],
            [15.99609375, 62.0215281910076]
        ]
    ]
}

在我的代码中，我不重复它并从我的 map 中获取:

{
    "type": "Polygon",
    "coordinates": [
        [
            [15.99609375, 62.0215281910076],
            [-9.140625, 51.1793429792893],
            [12.12890625, 37.0200982013681],
            [44.12109375, 37.7185903255882],
            [49.5703125, 59.5343180010956]
        ]
    ]
}

请您告诉我，如何在数组末尾再次添加第一个值 arr[0] ？

    for(var i = 0; i < arr.length; i++)
    {
      shape=arr[i];

          tmp=new goo.Polygon({paths:this.mm_(shape.geometry)});
          break;

     tmp.setValues({map:map,id:shape.id})
     shapes.push(tmp);

    }
  return shapes;

整个代码如下所示:

<script type='text/javascript'>//<![CDATA[

  function initialize()
  {
      var goo             = google.maps,
          map_in          = new goo.Map(document.getElementById('map_in'),
                                        { zoom: 6,
                                          center: new goo.LatLng(52.344, 18.048)
                                        }),

          shapes          = [],
          selected_shape  = null,
          // drawman         = new goo.drawing.DrawingManager({map:map_in}),

          drawman = new google.maps.drawing.DrawingManager({
          map: map_in,
                drawingMode: goo.drawing.OverlayType.POLYGON,
                    drawingControl: true,
                    drawingControlOptions: {
                        position: goo.ControlPosition.TOP_CENTER,
                      drawingModes: [goo.drawing.OverlayType.POLYGON]
                  }
          })

          byId            = function(s){return document.getElementById(s)},
          clearSelection  = function(){
                              if(selected_shape){
                                selected_shape.set((selected_shape.type
                                                    ===
                                                    google.maps.drawing.OverlayType.MARKER
                                                   )?'draggable':'editable',false);
                                selected_shape = null;
                              }
                            },
          setSelection    = function(shape){
                              clearSelection();
                              selected_shape=shape;

                                selected_shape.set((selected_shape.type
                                                    ===
                                                    google.maps.drawing.OverlayType.MARKER
                                                   )?'draggable':'editable',true);

                            },
          clearShapes     = function(){
                              for(var i=0;i<shapes.length;++i){
                                shapes[i].setMap(null);
                              }
                              shapes=[];
                            };
      // map_in.bindTo('center',map_out,'center');
      // map_in.bindTo('zoom',map_out,'zoom');

      goo.event.addListener(drawman, 'overlaycomplete', function(e) {
          var shape   = e.overlay;
          shape.type  = e.type;
          goo.event.addListener(shape, 'click', function() {
            setSelection(this);
          });
          setSelection(shape);
          shapes.push(shape);
        });

      goo.event.addListener(map_in, 'click',clearSelection);
      goo.event.addDomListener(byId('clear_shapes'), 'click', clearShapes);
      goo.event.addListener(drawman, 'overlaycomplete', function(){
        var data=IO.IN(shapes,false);byId('data').innerHTML=JSON.stringify(data[0]);});
  }

  var IO={
    //returns array with storable google.maps.Overlay-definitions
    IN:function(arr,//array with google.maps.Overlays
                encoded//boolean indicating whether pathes should be stored encoded
                ){
        var shapes     = [],
            goo=google.maps,
            shape,tmp;

        for(var i = 0; i < arr.length; i++)
        {
          shape=arr[i];
          tmp={type:this.t_(shape.type),id:shape.id||null};

          switch(tmp.type){
             case 'POLYGON':
                tmp.coordinates=this.m_(shape.getPaths(),encoded);
               break;
         }
         shapes.push(tmp);
      }
      return shapes;
    },
    //returns array with google.maps.Overlays
    OUT:function(arr,//array containg the stored shape-definitions
                 map//map where to draw the shapes
                 ){
        var shapes     = [],
            goo=google.maps,
            map=map||null,
            shape,tmp;

        for(var i = 0; i < arr.length; i++)
        {
          shape=arr[i];

              tmp=new goo.Polygon({paths:this.mm_(shape.geometry)});
              break;

         tmp.setValues({map:map,id:shape.id})

         shapes.push(tmp);

        }
      return shapes;
    },
    l_:function(path,e){
      path=(path.getArray)?path.getArray():path;
      if(e){
        return google.maps.geometry.encoding.encodePath(path);
      }else{
        var r=[];
        for(var i=0;i<path.length;++i){
          r.push(this.p_(path[i]));
        }
        return r;
      }
    },
    ll_:function(path){
      if(typeof path==='string'){
        return google.maps.geometry.encoding.decodePath(path);
      }
      else{
        var r=[];
        for(var i=0;i<path.length;++i){
          r.push(this.pp_.apply(this,path[i]));
        }
        return r;
      }
    },

    m_:function(paths,e){
      var r=[];
      paths=(paths.getArray)?paths.getArray():paths;
      for(var i=0;i<paths.length;++i){
          r.push(this.l_(paths[i],e));
        }
       return r;
    },
    mm_:function(paths){
      var r=[];
      for(var i=0;i<paths.length;++i){
          r.push(this.ll_.call(this,paths[i]));

        }
       return r;
    },
    p_:function(latLng){
      return([latLng.lng(),latLng.lat()]);
    },
    pp_:function(lat,lng){
      return new google.maps.LatLng(lng,lat);
    },
    b_:function(bounds){
      return([this.p_(bounds.getSouthWest()),
              this.p_(bounds.getNorthEast())]);
    },
    bb_:function(sw,ne){
      return new google.maps.LatLngBounds(this.pp_.apply(this,sw),
                                          this.pp_.apply(this,ne));
    },
    t_:function(s){
      var t=['CIRCLE','MARKER','RECTANGLE','POLYLINE','POLYGON'];
      for(var i=0;i<t.length;++i){
         if(s===google.maps.drawing.OverlayType[t[i]]){
           return t[i];
         }
      }
    }

  }
  google.maps.event.addDomListener(window, 'load', initialize);
  //]]>

  </script>

Answer 1

类似这样的吗？

arr.push(arr[0]);