OpenLayers 2 - 将填充和不透明度设置为多边形样式答案

【问题标题】：OpenLayers 2 - Set fill and opacity to Polygon StyleOpenLayers 2 - 将填充和不透明度设置为多边形样式
【发布时间】：2020-10-21 16:16:54
【问题描述】：

我的目标是为不同的形状（三角形、圆形、方形、六边形等）使用不同的填充颜色和不透明度值。

使用下面的代码，我可以绘制形状、设置不同的标题和笔触颜色。但我无法设置填充颜色和不透明度值。

我检查了文档，看起来我可以使用“fillColor”和“fillOpacity”来实现这一点，但它不起作用。

  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>

有人可以帮我吗？

非常感谢您的问候

【问题讨论】：

能不能多放点代码，比如item.Points
我已经调整过了，希望没问题
最好做个sn-p。
您到底需要什么？整个剧本我不能给你。有很多功能与我的问题无关。我试着把相关的sn-ps放在这里并解释一下。如果不清楚，我可以尝试重新重写。
写问题时有一个“sn-p”选项。你可以做一个可复制的例子，更容易回答。

标签： javascript html css openlayers

【解决方案1】：

问题在于后续命令中的 LineString。

vectorLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points))]);

我可以用它来修复它，因为我用 LinearRing 代替了它。

LinearRing 是一个特殊的 LineString，它是封闭的。 LineString 可以但不能关闭。

【讨论】：