2016-09-11 4 views
0

In Polygonform benötigt wird, um den Ausgangspunkt am Ende zu wiederholen, in GeoJSON folgende Array zu erhalten:Google DrawingAPI Polygon Array javascript

{ 
    "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] 
     ] 
    ] 
} 

In meinem Code ich wiederhole es nicht und bekommen von meinem Karte:

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

Können Sie mich bitte beraten, wie kann ich am Ende der Array den ersten Wert wieder arr [0] hinzufügen?

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; 

Der gesamte Code sieht unten wie:

<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> 
+0

Push eine Kopie des ersten auf das Ende des Arrays von Koordinaten koordinieren. – geocodezip

+0

Bitte geben Sie eine [mcve] an, die Ihr Problem veranschaulicht. Was ist 'this.mm _()'? – geocodezip

+0

hi @geocodezip Ich habe den ganzen Code eingegeben. –

Antwort

1

So etwas wie das?

arr.push(arr[0]); 
0

So fand ich endlich den Weg, wie dieses Problem zu lösen ist. Da ich bemerkt habe, dass es einen sehr populären Bug gibt (Polygon muss geschlossen werden - die erste Lok muss am Ende wiederholt werden), entschied ich mich, den Fix hier zu teilen. Sie müssen die Zeile hinzufügen:

r.push(this.p_(path[0])); 

Funktion L_:

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])); 
    } 
     r.push(this.p_(path[0])); 
    return r; 
    } 
}, 
Verwandte Themen