Открывающие слои обводят полигоном слой OpenStreetMaps - PullRequest
Новая
       10

Открывающие слои обводят полигоном слой OpenStreetMaps

6 голосов
/ 15 марта 2012

Я пытаюсь создать круг с определенным центром и поставить на него маркер значка. Код работает, если я использую изображения вместо OpenLayers.Geometry.Polygon.createRegularPolygon. Я не смог решить это.

здесь вы найдете мой код: 

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

Заранее спасибо за любые советы.

Ответы [ 2 ]

18 голосов
/ 15 марта 2012

Конструктор OpenLayers.Geometry.Point принимает значения x, y не lonlat obj. При создании круга new OpenLayers.Geometry.Point( lonLat ) должно быть new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

Это должно работать лучше: 

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);
5 голосов
/ 30 августа 2012

Если вы хотите объединить ваш круг и точку в один объект, используйте OpenLayers.Geometry.Collection .Используя этот метод, вы можете применить некоторые элементы управления, такие как DragFeature, которые будут одновременно работать с элементами в коллекции.

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 ] );
...