javascript OpenStreetMaps 图层上的 Openlayers 圆多边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9723559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Openlayers circle Polygon on OpenStreetMaps layer
提问by Lessfoe
I'm trying to create a circle with a defined center and put an icon marker on it. The code is working if I use images instead of OpenLayers.Geometry.Polygon.createRegularPolygon. I wasn't able to solve it.
我正在尝试创建一个具有定义中心的圆并在其上放置一个图标标记。如果我使用图像而不是 OpenLayers.Geometry.Polygon.createRegularPolygon，则代码有效。我无法解决它。
here you find my code:
在这里你可以找到我的代码：
<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>
Thanks in advance for any tips.
提前感谢您的任何提示。
回答by capdragon
OpenLayers.Geometry.Pointconstructor takes in x,y not lonlat obj. When you're creating the circle new OpenLayers.Geometry.Point( lonLat )should be new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
OpenLayers.Geometry.Point构造函数接受 x,y 而不是 lonlat obj。当你创建圆圈时new OpenLayers.Geometry.Point( lonLat )应该是new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
This should work better:
这应该工作得更好：
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);
回答by Rescommunes
If you want to have your circle and your point combined together into one object then use OpenLayers.Geometry.Collection. Using this method you can apply some controls like DragFeature which will operate on elements in the collection at once.
如果您想将圆和点组合成一个对象，请使用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 ] );
