Ich möchte Polygon hinzufügen und Entfernung in Openlayer2 berechnen

Question

Ich habe ein Beispiel für openlayer2, in dem ich Linien- und Kreiskarte zeichnen kann und ich kann Abstand berechnen. Jetzt möchte ich Polygon hinzufügen und Abstand berechnen. Da ich neu bin so bin ich so viel Fehler .Original Code bekommen ist hier

https://bitbucket.org/geographika/openlayers/overview

Kann jemand bitte helfen?

/* 
 
* APIMethod: createGeodesicPolygon 
 
* Create a regular polygon around a radius. Useful for creating circles 
 
* and the like. 
 
* 
 
* Parameters: 
 
* origin - {<OpenLayers.Geometry.Point>} center of polygon. 
 
* radius - {Float} distance to vertex, in map units. 
 
* sides - {Integer} Number of sides. 20 approximates a circle. 
 
* rotation - {Float} original angle of rotation, in degrees. 
 
* projection - {<OpenLayers.Projection>} the map's projection 
 
*/ 
 
OpenLayers.Geometry.Polygon.createGeodesicPolygon = function(origin, radius, sides, rotation, projection){ 
 

 
    if (projection.getCode() !== "EPSG:4326") { 
 
     origin.transform(projection, new OpenLayers.Projection("EPSG:4326")); 
 
    } 
 
    var latlon = new OpenLayers.LonLat(origin.x, origin.y); 
 
    
 
    var angle; 
 
    var new_lonlat, geom_point; 
 
    var points = []; 
 
    
 
    for (var i = 0; i < sides; i++) { 
 
     angle = (i * 360/sides) + rotation; 
 
     new_lonlat = OpenLayers.Util.destinationVincenty(latlon, angle, radius); 
 
     new_lonlat.transform(new OpenLayers.Projection("EPSG:4326"), projection); 
 
     geom_point = new OpenLayers.Geometry.Point(new_lonlat.lon, new_lonlat.lat); 
 
     points.push(geom_point); 
 
    } 
 
    var ring = new OpenLayers.Geometry.LinearRing(points); 
 
    return new OpenLayers.Geometry.Polygon([ring]); 
 
}; 
 

 
function handleMeasurements(event){ 
 
    var geometry = event.geometry, units = event.units, order = event.order; 
 
    var measure = event.measure, out = "", winname = 'measWin'; 
 
    var win = Ext.WindowMgr.get(winname); 
 
    
 
    if (order == 1) { 
 
     out += "Line Length: " + measure.toFixed(2) + " " + units; 
 
    } 
 
    else { 
 
     out += "Shape Area: " + measure.toFixed(2) + " " + units + "<sup>2</" + "sup>"; 
 
    } 
 
    
 
    if (!win) { 
 
     win = new Ext.Window({ 
 
      id: winname, 
 
      autoHeight: true, 
 
      width: 200, 
 
      resizable: true, 
 
      title: 'Measure Tool', 
 
      items: [{ 
 
       xtype: 'panel', 
 
       html: out, 
 
       bodyStyle: 'padding:5px;font-size:11px;background-color:#ffffff;' 
 
      }] 
 
     }); 
 
     
 
     //get the map DIV id 
 
     win.show(); 
 
     var mapId = event.object.map.div.id; 
 
     win.alignTo(Ext.getDom(mapId), 'bl-bl', [6, -80]); 
 
    } 
 
    else { 
 
     win.items.items[0].body.update(out); 
 
     if (!win.visible) { 
 
      win.show(); 
 
     } 
 
    } 
 
} 
 

 
function showWin(map, vectorLayer){ 
 

 
    var winname = "radii"; 
 
    var win = new Ext.Window({ 
 
     id: winname, 
 
     //height: 200, 
 
     width: 200, 
 
     constrain: true, 
 
     collapsible: true, 
 
     layout: 'fit', 
 
     title: 'Circle Options', 
 
     items: [{ 
 
      xtype: 'combo', 
 
      allowBlank: false, 
 
      name: 'Radius', 
 
      forceSelection: true, //limit vals to list 
 
      editable: false, //prevent text being entered 
 
      fieldLabel: 'Radius', 
 
      emptyText: 'Select a Radius...', 
 
      store: new Ext.data.SimpleStore({ 
 
       fields: ['radius', 'value'], 
 
       data: [["5 km", "5000"], ["10 km", "10000"], ["20 km", "20000"], ["50 km", "50000"], ["100 km", "100000"], ["200 km", "200000"]] 
 
      }), 
 
      displayField: 'radius', 
 
      valueField: 'value', 
 
      selectOnFocus: true, 
 
      mode: 'local', 
 
      triggerAction: 'all', 
 
      listeners: { 
 
       select: function(combo, record, index){ 
 
        var radius = record.data.value; 
 
        var feature = vectorLayer.features[vectorLayer.features.length - 1]; 
 
        if (feature) { 
 
         var centroid = feature.geometry.getCentroid(); 
 
         var projection = map.getProjectionObject(); 
 
         
 
         var sides = 40; 
 
         var new_geom = OpenLayers.Geometry.Polygon.createGeodesicPolygon(centroid, radius, sides, 45, projection); 
 
         
 
         var new_feature = new OpenLayers.Feature.Vector(new_geom); 
 
         vectorLayer.addFeatures([new_feature]); 
 
        } 
 
       } 
 
      } 
 
     }] 
 
    }); 
 
    win.show(); 
 
    var mapId = map.div.id; 
 
    win.alignTo(Ext.getDom(mapId), 'tr-tr', [-150, 6]); 
 
} 
 

 
function startApp(){ 
 
    var map = new OpenLayers.Map('map'); 
 
    var vectorLayer = new OpenLayers.Layer.Vector(); 
 
    
 
    map.addLayer(vectorLayer); 
 
    
 
    var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap", "http://tile.openstreetmap.org/${z}/${x}/${y}.png", { 
 
     'sphericalMercator': true 
 
    }); 
 
    
 
    
 
    
 
    
 
    var pointControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point, { 
 
     'displayClass': 'olControlDrawFeaturePoint', 
 
     handlerOptions: { 
 
      persist: true 
 
     } 
 
    }); 
 
    
 
    
 
    var measureControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, { 
 
     'displayClass': 'olControlDrawFeaturePath', 
 
     persist: true, 
 
     geodesic: true, 
 
     title: 'Line Measure: draw a line to see distances on the map', 
 
     handlerOptions: { 
 
      persist: true 
 
     } 
 
    }); 
 
    
 
    measureControl.events.on({ 
 
     "measure": handleMeasurements, 
 
     "measurepartial": handleMeasurements 
 
    }); 
 
    
 
    var panelControls = [new OpenLayers.Control.Navigation(), pointControl, measureControl]; 
 
    
 
    var toolbar = new OpenLayers.Control.Panel({ 
 
     displayClass: 'olControlEditingToolbar', 
 
     defaultControl: panelControls[0] 
 
    }); 
 
    
 
    toolbar.addControls(panelControls); 
 
    map.addControl(toolbar); 
 
    map.addLayer(osmLayer); 
 
    map.setCenter(new OpenLayers.LonLat(-959997.02, 6921270.79), 9); 
 
    
 
    showWin(map, vectorLayer); 
 
} 
 

 
startApp();

<html style="width:100%; height:100%"> 
 
    <head> 
 
    \t <title>Geodesic Polygon Demo</title> 
 
\t \t <!-- by Seth Girvin, http://geographika.co.uk --> 
 
     <script type="text/javascript" src="http://proj4js.org/lib/proj4js.js"> 
 
     </script> 
 
     <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"> 
 
     </script> 
 
     <script type="text/javascript" src="GeodesicPolygon.js"> 
 
     </script> 
 
     <script type="text/javascript" src="GeodesicTools.js"> 
 
     </script> 
 
     <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"> 
 
     </script> 
 
     <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"> 
 
     </script> 
 
     <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> 
 
     <script type="text/javascript"> 
 
     </script> 
 
    </head> 
 
    <body style="width:100%; height:100%"> 
 
     <div style="width:100%; height:100%" id="map"> 
 
     </div> 
 
    </body> 
 
</html>

Answer 1

Ich bin nicht ganz sicher, welche Fehler du meinst, aber ein Problem war nicht ein height sowohl auf html und body Einstellung. Dies ist ein häufiges Problem bei OpenLayers. Da die Karte in eine div mit height: 100%; gelegt wird, wenn die Elemente, die die Karte enthalten, keine feste Höhe haben, sind es 100% der Nullpixel. Sie können entweder eine feste Höhe verwenden oder alle übergeordneten Elemente bis zu html haben eine Höhe von 100%.