I am aiming to use different fill colors and opacity values for various shapes (such as Triangle, Circle, Square, Hexagon, etc.).
Although I can draw the shapes, set different titles, and stroke colors with the code below, I'm struggling to define the fill color and opacity values.
I have consulted the documentation, which suggests using "fillColor" and "fillOpacity" properties, but they do not seem to work as expected.
function GetLonLatObj(lat, lon){
var lonLat = new OpenLayers.LonLat( lon ,lat )
.transform(
new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
);
return lonLat
}
var points = []
var fontColor = "blue";
var title = "Test";
var map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var zoom=16;
latLonPoint = GetLonLatObj("46.76", "7.606944444444444");
latLonPoint2 = GetLonLatObj("46.735", "7.543055555555555");
latLonPoint3 = GetLonLatObj("46.7169444", "7.569166666666667");
latLonPoint4 = GetLonLatObj("46.76", "7.606944444444444");
latPoint = latLonPoint.lat
lonPoint = latLonPoint.lon
latPoint2 = latLonPoint2.lat
lonPoint2 = latLonPoint2.lon
latPoint3 = latLonPoint3.lat
lonPoint3 = latLonPoint3.lon
latPoint4 = latLonPoint4.lat
lonPoint4 = latLonPoint4.lon
//var point = new OpenLayers.Geometry.Point(828260.4259880, 5933577.75538379);
point = new OpenLayers.Geometry.Point(lonPoint, latPoint);
point2 = new OpenLayers.Geometry.Point(lonPoint2, latPoint2);
point3 = new OpenLayers.Geometry.Point(lonPoint3, latPoint3);
point4 = new OpenLayers.Geometry.Point(lonPoint4, latPoint4);
points.push(point);
points.push(point2);
points.push(point3);
points.push(point4);
var selected_polygon_style = {
strokeWidth: "3",
strokeColor: fontColor,
fontColor: "red",
fontSize: "16px",
fontWeight: "bold",
fontColor: "black",
label: title
};
vectorLayer = new OpenLayers.Layer.Vector();
vectorLayer.style = selected_polygon_style;
//map.addLayers([vector]);
vectorLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points))]);
map.addLayers([vectorLayer]);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(latLonPoint));
map.setCenter (latLonPoint, zoom);<script src="https://buhli.dyndns.org:444/openlayers.js"></script>
<html>
<body>
<div id="mapdiv"></div>
</body>
</html>Could anyone offer assistance on how to achieve this?
Thank you very much and best regards