如何使用不同的颜色在同一层中设置每个功能的样式-OpenLayers 2

如何使用不同的颜色在同一层中设置每个功能的样式-OpenLayers 2,openlayers,Openlayers,下面给出的代码片段简要介绍了我如何向向量层添加功能 vectors = new OpenLayers.Layer.Vector("Vector Layer"); drawControls = { Point1: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point), Point2: new OpenLayers.Control.DrawFeature(v

下面给出的代码片段简要介绍了我如何向向量层添加功能

vectors = new OpenLayers.Layer.Vector("Vector Layer");

drawControls = {                    
    Point1: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point),
    Point2: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point),
    Polygon1: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon),
    Polygon2: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon) 
}

for( var key in drawControls ) {
    map.addControl(drawControls[key]);
}
如何用不同的颜色设计每个功能

我知道我可以使用下面给出的代码将向量层作为一个整体进行样式设置:

var defStyle_layer = { 
    strokeColor: "blue",
    fillColor: "blue"
};

var layer_style= OpenLayers.Util.applyDefaults(defStyle_layer, OpenLayers.Feature.Vector.style["default"]);

var layer_sm= new OpenLayers.StyleMap({
    'default': layer_style
}); 

vectors = new OpenLayers.Layer.Vector("Vector Layer", {stylemap:layer_sm })
我需要帮助在同一矢量层中分别设置每个特征的样式。
我之所以需要将所有这些功能放在同一层中,是因为我想使用“撤消”选项,我相信下面的代码片段达到了您想要的效果

可以在样式定义中使用
${…}
插值来引用要素属性。通过这种方式,可以基于每个要素定义样式。当然,您也可以为要素定义其他属性,然后定义样式规则以映射到这些属性,前提是在要素本身中定义颜色值会在您的案例中将数据和表示过度混合在一起

sketchcomplete
-事件允许您连接到新功能的创建并更改其内容(在本例中,为功能指定新属性)


必须在创建时设置每个要素的样式。以下是您选择使用的构造函数:

    var newFeature = new OpenLayers.Feature.Vector(geometry, attributes, style);
    layer.addFeature(newFeature);
  • 几何图形-要素所代表的几何图形
  • 属性-功能的可选属性
  • 样式-您的自定义样式

  • 希望有帮助

    我找到了我发布的问题的解决方案:下面是代码片段:

    <script src="lib/OpenLayers.js"></script>
    <script src="lib/GeometricNet/UndoRedo.js"></script>
    .......
    .......
    Rest of the code
    .......
    .......
    var defStyle_point1 = {strokeColor: "Darkblue", strokeOpacity: "0.5", strokeWidth:3,  cursor: "pointer", fillColor: "Darkblue"};
    var point1_style = OpenLayers.Util.applyDefaults(defStyle_point1,OpenLayers.Feature.Vector.style["default"]);
    var point1_sm = new OpenLayers.StyleMap({
                        'default': point1_style
                        }); 
    
    var defStyle_polygon1 = {strokeColor: "Red", strokeOpacity: "0.5", strokeWidth: 3, cursor: "pointer", fillColor: "Red"};
    var polygon1_style = OpenLayers.Util.applyDefaults(defStyle_polygon1, Openlayers.Feature.Vector.style["default"]);
    var polygon1_sm = new OpenLayers.StyleMap({
                        'default': polygon1_style
                        }); 
    
    
    point1_layer= new OpenLayers.Layer.Vector("Point1 Layer",{styleMap: point1_sm});
    polygon1_layer= new OpenLayers.Layer.Vector("Polygon1 Layer",{styleMap: polygon1_sm});
    
    drawControls = {                    
                    Point1: new OpenLayers.Control.DrawFeature(point1_layer, OpenLayers.Handler.Point),
                    Polygon1: new OpenLayers.Control.DrawFeature(polygon1_layer,OpenLayers.Handler.Polygon),
                   }
    
    for( var key in drawControls ) {
                map.addControl(drawControls[key]);
    }
    
    undoRedo = new UndoRedo([point1_layer,polygon1_layer]);
    
    
    .......
    .......
    代码的其余部分
    .......
    .......
    var defStyle_point1={strokeColor:“暗蓝色”,strokeOpacity:“0.5”,strokeWidth:3,cursor:“指针”,fillColor:“暗蓝色”};
    var point1_style=OpenLayers.Util.applyDefaults(defStyle_point1,OpenLayers.Feature.Vector.style[“default”]);
    var point1_sm=新的OpenLayers.StyleMap({
    “默认”:点1_样式
    }); 
    var defStyle_polygon1={strokeColor:“红色”,strokeCopacity:“0.5”,strokeWidth:3,光标:“指针”,fillColor:“红色”};
    var polygon1_style=OpenLayers.Util.applyDefaults(defStyle_polygon1,OpenLayers.Feature.Vector.style[“default”]);
    var polygon1_sm=新的OpenLayers.StyleMap({
    “默认”:polygon1_样式
    }); 
    point1_layer=新的OpenLayers.layer.Vector(“point1 layer”,{styleMap:point1_sm});
    polygon1_layer=新的OpenLayers.layer.Vector(“polygon1层”{styleMap:polygon1_sm});
    drawControls={
    点1:新的OpenLayers.Control.DrawFeature(点1_层,OpenLayers.Handler.Point),
    Polygon1:新的OpenLayers.Control.DrawFeature(Polygon1_层,OpenLayers.Handler.Polygon),
    }
    for(绘图控件中的var键){
    map.addControl(drawControls[key]);
    }
    undoRedo=新的undoRedo([point1_layer,polygon1_layer]);
    
    特征完成后还是绘图时应用样式?在使用select feature并直接访问每个功能的样式图之前,我已经这样做了,我认为您可以使用featureAdded回调来做类似的事情,但是在绘制功能时这样做会非常麻烦(我认为)。如果知道如何在绘图时将样式应用于特征,并在特征可见时保留样式,那就太好了。如果我根据所选功能更改样式图,新的样式将反映到整个图层上,即先前使用不同样式绘制的特征将更改为当前样式。我通过将每个特征放置在不同的图层中,成功地使用不同的样式来设置每个特征的样式。据我所知,如果不必涉及用户的绘制,您给出的解决方案是有效的控制让用户动态绘制特征并以不同的样式显示每个特征是可能的,方法是将它们放置在单独的图层中,并使用新的颜色设置每个图层的样式。我还可以在不同的图层上使用“撤消”选项。您可以在我的解决方案中使用同一图层,并且您可以在绘制时更改特征的样式只要重新创建功能并在每次需要更改样式时添加新样式即可。我很高兴你找到了解决问题的办法。
    <script src="lib/OpenLayers.js"></script>
    <script src="lib/GeometricNet/UndoRedo.js"></script>
    .......
    .......
    Rest of the code
    .......
    .......
    var defStyle_point1 = {strokeColor: "Darkblue", strokeOpacity: "0.5", strokeWidth:3,  cursor: "pointer", fillColor: "Darkblue"};
    var point1_style = OpenLayers.Util.applyDefaults(defStyle_point1,OpenLayers.Feature.Vector.style["default"]);
    var point1_sm = new OpenLayers.StyleMap({
                        'default': point1_style
                        }); 
    
    var defStyle_polygon1 = {strokeColor: "Red", strokeOpacity: "0.5", strokeWidth: 3, cursor: "pointer", fillColor: "Red"};
    var polygon1_style = OpenLayers.Util.applyDefaults(defStyle_polygon1, Openlayers.Feature.Vector.style["default"]);
    var polygon1_sm = new OpenLayers.StyleMap({
                        'default': polygon1_style
                        }); 
    
    
    point1_layer= new OpenLayers.Layer.Vector("Point1 Layer",{styleMap: point1_sm});
    polygon1_layer= new OpenLayers.Layer.Vector("Polygon1 Layer",{styleMap: polygon1_sm});
    
    drawControls = {                    
                    Point1: new OpenLayers.Control.DrawFeature(point1_layer, OpenLayers.Handler.Point),
                    Polygon1: new OpenLayers.Control.DrawFeature(polygon1_layer,OpenLayers.Handler.Polygon),
                   }
    
    for( var key in drawControls ) {
                map.addControl(drawControls[key]);
    }
    
    undoRedo = new UndoRedo([point1_layer,polygon1_layer]);