2014-03-13 46 views
0

我很困惑如何去添加樣式到我的功能,其中包括一個矢量內的LineString。我是否將樣式添加到LineString或Vector?我想更改線條的顏色和大小,並儘可能使線條不透明。如何添加樣式到我的特徵(矢量LineString)?

mapObject = new OpenLayers.Layer.Vector("Vector"); 
var p1 = new OpenLayers.Geometry.Point(mapObjectTopLeftLon, mapObjectTopLeftLat); 
var p2 = new OpenLayers.Geometry.Point(mapObjectTopRightLon, mapObjectTopRightLat); 
var p3 = new OpenLayers.Geometry.Point(mapObjectBottomRightLon, mapObjectBottomRightLat); 
var p4 = new OpenLayers.Geometry.Point(mapObjectBottomLeftLon, mapObjectBottomLeftLat); 
var p5 = new OpenLayers.Geometry.Point(mapObjectTopLeftLon, mapObjectTopLeftLat); 

var pnt = []; 
pnt.push(p1,p2,p3,p4,p5); 

mapObject.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pnt))]); 

map.addLayer(mapObject); 

回答

1

其實你添加樣式矢量圖層,這些特徵都存儲在你的情況下,它被命名爲MapObject的(但應該是這樣的featureLayer或myVectorLayer左右)。 Here你可以找到一個關於stylig的博客,在這種情況下矢量圖層和OpenLayers.StyleMap肯定會很有用。如果你需要更多的樣式(你有很多不同的特徵可以區分),你也可以根據「規則」(OpenLayers.Rule)和OpenLayers.Filter.Comparison的幫助來改變各個特徵的樣式,你可以通過OpenLayers.Filter.Comparison爲您的功能分配不同的符號。造型的shord例如:

myOpenLayersStyles.commentLayer = new OpenLayers.StyleMap({ //creates style for the vectorLayer features 
    "default": new OpenLayers.Style({ 
     pointRadius: 20, 
     fillColor: "#0000ff", 
     fillOpacity: 1, 
     strokeColor: "#0000ff", 
     strokeWidth: 3, 
     strokeOpacity: .7, 
     cursor: "pointer", 
     cursor: "hand" 
    },{ 
     rules: [ 
      new OpenLayers.Rule({ 

        filter: new OpenLayers.Filter.Comparison({ 
         type: OpenLayers.Filter.Comparison.EQUAL_TO, 
         property: "completed", 
         value: 1 
        }), 

        symbolizer: { 
         graphicHeight: 25, 
         externalGraphic: "Img/comment_completed.png" 
        } 
       }), 
       new OpenLayers.Rule({ 
        filter: new OpenLayers.Filter.Comparison({ 
         type: OpenLayers.Filter.Comparison.EQUAL_TO, 
         property: "completed", 
         value: 0 
        }), 
        symbolizer: { 
         externalGraphic: "Img/comment.png", 
         graphicHeight: 25 

        } 
       })    
      ] 
     } 
    ) 
     });