[英]Openlayers circle Polygon on OpenStreetMaps layer
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. 如果我使用图像而不是OpenLayers.Geometry.Polygon.createRegularPolygon,代码正常工作。 I wasn't able to solve it. 我无法解决它。
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. 提前感谢任何提示。
OpenLayers.Geometry.Point constructor takes in x,y not lonlat obj. OpenLayers.Geometry.Point构造函数接受x,y而不是lonlat obj。 When you're creating the circle new OpenLayers.Geometry.Point( lonLat )
should be new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
当你创建圆圈时, 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);
If you want to have your circle and your point combined together into one object then use OpenLayers.Geometry.Collection . 如果你想将你的圆和你的点组合成一个对象,那么使用OpenLayers.Geometry.Collection 。 Using this method you can apply some controls like DragFeature which will operate on elements in the collection at once. 使用此方法,您可以应用一些控件,如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 ] );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.