2012-03-15 7 views
6

Próbuję utworzyć okrąg ze zdefiniowanym środkiem i umieścić na nim znacznik ikony. Kod działa, jeśli używam obrazów zamiast OpenLayers.Geometry.Polygon.createRegularPolygon. Nie byłem w stanie go rozwiązać.Otwieracze kółka Wielokąt na warstwie OpenStreetMaps

tu znaleźć mój kod:

<html> 
<head> 
<title>OpenLayers Example</title> 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
</head> 
<body> 

<div id="mapdiv"></div> 
<script> 

map = new OpenLayers.Map("mapdiv"); 
map.addLayer(new OpenLayers.Layer.OSM()); 

epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection 
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator) 

var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286).transform(epsg4326,  projectTo); 

var zoom=6; 
map.setCenter (lonLat, zoom); 

var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(
       new OpenLayers.Geometry.Point(lonLat), 
       1, 
       30 
      ); 

var featurecircle = new OpenLayers.Feature.Vector(mycircle); 


var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); 

// Define markers as "features" of the vector layer: 
vectorLayer.addFeatures(featurecircle); 

var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-0.1244324, 51.5006728 ).transform(epsg4326, projectTo), 
     {description:'info'} , 
     {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21,  graphicXOffset:-12, graphicYOffset:-25 } 
    );  
vectorLayer.addFeatures(feature); 


map.addLayer(vectorLayer); 


</script> 
</body> 
</html> 

Dzięki z góry za wszelkie wskazówki.

Odpowiedz

18

OpenLayers.Geometry.Point Konstruktor przyjmuje x, y not lonlat obj. Podczas tworzenia kręgu new OpenLayers.Geometry.Point(lonLat) powinny być new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

to powinno działać lepiej:

map = new OpenLayers.Map("mapdiv"); 
map.addLayer(new OpenLayers.Layer.OSM()); 
epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection 
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator) 

var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286).transform(epsg4326, projectTo); 

var zoom = 6; 
map.setCenter(lonLat, zoom); 

var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); 

var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat); 


var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon 
(
    point, 
    50000, 
    40, 
    0 
); 

var featurecircle = new OpenLayers.Feature.Vector(mycircle); 

var featurePoint = new OpenLayers.Feature.Vector(
    point, 
    { description: 'info' }, 
    { externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset: -12, graphicYOffset: -25 } 
); 
vectorLayer.addFeatures([featurePoint, featurecircle]); 

map.addLayer(vectorLayer); 
+0

Wielkie dzięki! to działa! – Lessfoe

+1

@Lessfoe Excellent. Nie zapomnij o przyznaniu mi kredytu poprzez głosowanie upowe i zaakceptowanie odpowiedzi klikając na Znacznik wyboru obok mojej odpowiedzi. Dzięki! – capdragon

5

Jeśli chcesz mieć swój okrąg i punkt ze sobą połączone w jeden obiekt, a następnie użyć OpenLayers.Geometry.Collection . Za pomocą tej metody można zastosować niektóre elementy sterujące, takie jak DragFeature, które będą działać jednocześnie na elementach kolekcji.

var defaultStyle = new OpenLayers.Style({ 
    externalGraphic:'${icon}', 
    graphicHeight: 25, 
    graphicWidth: 21,  
    graphicXOffset:-12, 
    graphicYOffset:-25 
}); 
var styleMap = new OpenLayers.StyleMap({'default': defaultStyle }); 
var vectorLayer = new OpenLayers.Layer.Vector("Overlay",{styleMap: styleMap }); 

var aPoint = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat); 
var aCircle = OpenLayers.Geometry.Polygon.createRegularPolygon(aPoint, 50000, 40, 0); 

var aCirclePoint = new OpenLayers.Geometry.Collection([ aCircle, aPoint ]); 
var aCirclePoint_feature = new OpenLayers.Feature.Vector(aCirclePoint); 
aCirclePoint_feature.attributes = { icon:'/img/marker.png' } 

vectorLayer.addFeatures([ aCirclePoint_feature ]);  
+0

jesteś panu, jesteś genialny! – jperelli

Powiązane problemy