2012-03-15 9 views
6

Sto provando a creare un cerchio con un centro definito e mettere un indicatore di icona su di esso. Il codice funziona se utilizzo immagini anziché OpenLayers.Geometry.Polygon.createRegularPolygon. Non ero in grado di risolverlo.Openlayers circle Polygon sul layer OpenStreetMaps

qui trovate il mio codice:

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

Grazie in anticipo per eventuali suggerimenti.

risposta

18

OpenLayers.Geometry.Point Il costruttore accetta x, y non lonlat obj. Quando si crea il cerchio new OpenLayers.Geometry.Point(lonLat) dovrebbe essere new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

questo dovrebbe funzionare meglio:

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

Grazie mille! Funziona! – Lessfoe

+1

@Lessfoe Eccellente. Non dimenticarti di darmi credito alzando il voto e accettando la risposta cliccando sul segno di spunta accanto alla mia risposta. Grazie! – capdragon

5

Se si desidera avere il vostro cerchio e il vostro punto di combinati insieme in un unico oggetto quindi utilizzare OpenLayers.Geometry.Collection . Usando questo metodo puoi applicare alcuni controlli come DragFeature che funzioneranno su elementi della collezione contemporaneamente.

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

signore, sei un genio! – jperelli