Question

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

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 })

我需要帮助分别在同一个矢量图层中设置每个特征的样式。我需要将所有这些功能放在同一层中的原因是因为我想要“UNDO”选项

Answer 1

我相信以下代码段可以实现您的目标。

您可以在样式定义中使用${...}插值来引用要素属性。这样，您可以为每个要素定义样式。当然，您还可以定义要素的其他属性，然后定义样式规则以映射到这些属性，如果在要素本身中定义颜色值会在您的情况下将数据和表示混合在一起太多。

sketchcomplete - event允许您挂钩创建新功能并更改其内容（在这种情况下为功能指定新属性）。

function init() {
  var map = new OpenLayers.Map("map");
  var style = new OpenLayers.Style({ fillColor: "${color}" });
  var styleMap = new OpenLayers.StyleMap({ default: style });

  var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
  var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer", { styleMap: styleMap });

  map.addLayers([wmsLayer, polygonLayer]);

  var drawFeatureControl = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon);

  polygonLayer.events.register("sketchcomplete", drawFeatureControl, function(event) { event.feature.attributes.color = "#aa0000"; });

  map.addControl(drawFeatureControl);

  map.setCenter(new OpenLayers.LonLat(0, 0), 3);

  drawFeatureControl.activate();
}

Answer 2

您必须在创建时设置每个功能的样式。这是你可以使用的构造函数：

    var newFeature = new OpenLayers.Feature.Vector(geometry, attributes, style);
    layer.addFeature(newFeature);

geometry - 您的要素所代表的几何
attributes - 功能的可选属性
style - 您的自定义样式

希望它有所帮助！

Answer 3

我找到了我发布的问题的解决方案：以下是以下代码段：

<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]);

如何使用不同颜色为同一图层中的每个要素设置样式 - OpenLayers 2

3 个答案: