如何更改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>

答

矢量层可以有一个StyleMap相关，可以判断你的功能是如何显示在不同的意图：默认stlye，当选择一个功能，当您正在编辑等

看看到样品：http://acanimal.github.io/Openlayers-Cookbook/请参阅第7章使用StyleMap和渲染意图代码。该代码创建一个空矢量图层，您可以在其中添加要素并重新定义默认和选择意图。

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

干杯。

如何更改OpenLayers样式？

相关推荐