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

這應該更好地工作：

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 2012-03-16 09:22:24

@Lessfoe優秀。不要忘記通過點擊我答案旁邊的複選標記，通過提高投票和接受答案來給我信用。謝謝！ – capdragon 2012-03-16 13:16:09

如果你想擁有你的圈子和你的觀點結合成一個對象，然後用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 ]);

來源

2012-08-29 20:08:02 Rescommunes

你先生，是一個真正的！ – jperelli 2012-10-15 03:51:33

Openlayers在OpenStreetMaps圖層上圈多邊形

回答

相關問題