All geek questions in one place

Openlayers Polygon Circular Layer on OpenStreetMaps Layer

I am trying to create a circle with a specific center and place an icon on it. The code works if I use images instead of OpenLayers.Geometry.Polygon.createRegularPolygon. I could not solve it.

here you will 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 advice.

+6
source share
2 answers

The OpenLayers.Geometry.Point constructor accepts x, y not a lonlat obj. When you create a circle new OpenLayers.Geometry.Point( lonLat ) should be new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

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);
+18
source

If you want your circle and your point to be combined together into one object, use OpenLayers.Geometry.Collection . Using this method, you can apply some controls, such as DragFeature, that will work with elements in the collection immediately.

 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 ] );
+5
source

Source: https://habr.com/ru/post/910820/

More articles:


All Articles