如何更改OpenLayers樣式？

我對網絡地圖非常非常陌生。我有一個由PostGis數據庫的shape文件製作的OpenLayers地圖，有一個矢量圖層，它有默認的樣式（GeoServer SLD），但是我想在用戶點擊刷新按鈕時更改矢量圖層的樣式。我在網上搜索，並沒有找到簡單明瞭的例子。任何人都請幫助我，或者也許有人想做同樣的事情，並找到簡單的教程？任何幫助大大appriciated。如何更改OpenLayers樣式？

<script type="text/javascript"> 
    var map; 
    function init() { 
    var bounds = new OpenLayers.Bounds(
     68.089442, 6.752729, 
     97.407576, 37.072537); 

    var options = { 
      controls: [ new OpenLayers.Control.Navigation(), 
      new OpenLayers.Control.PanZoom() 
     ], 

     maxExtent: bounds, 
     maxResolution: 0.11843675, 
     projection: "EPSG:4326", 
     units: 'degrees' 
    }; 


    map = new OpenLayers.Map ("map", options); 

    var india = new OpenLayers.Layer.WMS(
     "cite:india_state - Tiled", 
     "http://localhost:8080/geoserver/cite/wms", 
     {LAYERS: 'cite:india_state',STYLES: 'style', 
     //format: format, 
     tiled: true, 
     tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom 
     }, 
     {buffer: 0, displayOutsideMaxExtent: true, 
     isBaseLayer: true, 
     yx: {'EPSG:4326' : true} 
     } 
    ); 

    var style = new OpenLayers.Style(); 
    //rule used for all polygons 
    var rule_fsa = new OpenLayers.Rule({ 
     symbolizer: { 
      fillColor: "#ff9a9a", 
      fillOpacity: 0.5, 
      strokeColor: "#000000", 
      strokeWidth: 1, 
      strokeDashstyle: "dash", 
      label: "${name}", 
      labelAlign: "cc", 
      fontColor: "#333333", 
      fontOpacity: 0.9, 
      fontFamily: "Arial", 
      fontSize: 14 
     } 
    }); 

    var rule_highlight = new OpenLayers.Rule({ 
     filter: new OpenLayers.Filter.Comparison({ 
      type: OpenLayers.Filter.Comparison.EQUAL_TO, 
      property: "classification", 
      value: "1", 
     }), 

     symbolizer: { 
      fillColor: "#FF7144", 
      fillOpacity: 0.6, 
      strokeColor: "#FF0000", 
      strokeWidth: 2, 
      strokeDashstyle: "solid", 
      label: " ${name}", 
      labelAlign: "cc", 
      fontColor: "#000000", 
      fontOpacity: 1, 
      fontFamily: "Arial", 
      fontSize: 16, 
      fontWeight: "600" 
     } 
    }); 

    style.addRules([rule_fsa, rule_highlight]); 

    var polygon = new OpenLayers.Layer.Vector("Polygon", { 
     Style: 'style', 
     rendererOptions: {zIndexing: true} 
    }); 

    map.addLayers([india,polygon]); 

    map.zoomToMaxExtent(); 
} 
</script>

來源

2013-03-20 user2189282

矢量層可以有一個StyleMap相關，可以判斷你的功能是如何顯示在不同的意圖：默認stlye，當選擇一個功能，當您正在編輯等

看看到樣品：http://acanimal.github.io/Openlayers-Cookbook/請參閱第7章使用StyleMap和渲染意圖代碼。該代碼創建一個空矢量圖層，您可以在其中添加要素並重新定義默認和選擇意圖。

而且我建議你的OpenLayers食譜http://www.packtpub.com/openlayers-create-gis-web-applications-cookbook/book

乾杯。

來源

2013-06-18 19:46:45 EricSonaron

如何更改OpenLayers樣式？

回答

相關問題