Openlayers OpenStreetMapsレイヤーのポリゴンに円を描く

私は定義された中心を持つ円を作成し、それにアイコンマーカーを置こうとしています。 OpenLayers.Geometry.Polygon.createRegularPolygonの代わりにイメージを使用すると、コードが動作しています。私はそれを解決することができませんでした。任意のヒントを事前にOpenlayers OpenStreetMapsレイヤーのポリゴンに円を描く

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

ありがとう：

は、ここであなたは私のコードを見つけます。

出典

2012-03-15 Lessfoe

OpenLayers.Geometry.Pointコンストラクタは、x、yをlonlat objに取り込みます。あなたがサークルを作成している場合はnew OpenLayers.Geometry.Point(lonLat)new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

これは、より良い動作するはずする必要があります：あなたはあなたのサークルと1つのオブジェクトに一緒に組み合わせ、あなたのポイントを持つようにしたい場合は、OpenLayers.Geometry.Collectionを使用

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

出典

2012-03-15 18:37:16 capdragon

ありがとうございます！できます！ – Lessfoe

@Lessfoe優れています。私の答えの横にあるチェックマークをクリックすることで、投票して回答を受け入れることで、私に信用を与えることを忘れないでください。ありがとう！ – capdragon

。このメソッドを使用すると、コレクション内の要素を一度に操作する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 ]);

出典

2012-08-29 20:08:02 Rescommunes

あなたは賢明です！ – jperelli

Openlayers OpenStreetMapsレイヤーのポリゴンに円を描く

答えて

関連する問題