openlayers/examples/sld.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   4     <link rel="stylesheet" href="style.css" type="text/css" />
   5     <script src="../lib/Firebug/firebug.js"></script>
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8
   9         var map, sld, gmlLayers;
  10         var format = new OpenLayers.Format.SLD();
  11         function init() {
  12
  13             map = new OpenLayers.Map('map');
  14             map.addControl(new OpenLayers.Control.LayerSwitcher());
  15
  16             OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
  17
  18         }
  19
  20         function getDefaultStyle(sld, layerName) {
  21             var styles = sld.namedLayers[layerName].userStyles;
  22             var style;
  23             for(var i=0; i<styles.length; ++i) {
  24                 style = styles[i];
  25                 if(style.isDefault) {
  26                     break;
  27                 }
  28             }
  29             return style;
  30         }
  31
  32         function complete(req) {
  33
  34             sld = format.read(req.responseXML || req.responseText);
  35             var hoverStyle = sld.namedLayers["WaterBodies"].userStyles[1];
  36             hoverStyle.defaultStyle = OpenLayers.Util.extend(
  37                 {}, OpenLayers.Feature.Vector.style["select"]
  38             );
  39
  40             gmlLayers = [
  41                 // use the sld UserStyle named "Default Styler"
  42                 new OpenLayers.Layer.GML(
  43                     "StateBoundaries",
  44                     "tasmania/TasmaniaStateBoundaries.xml",
  45                     {
  46                         styleMap: new OpenLayers.StyleMap(
  47                             getDefaultStyle(sld, "Land")
  48                         ),
  49                         isBaseLayer: true
  50                     }
  51                 ),
  52                 new OpenLayers.Layer.GML(
  53                     "Roads",
  54                     "tasmania/TasmaniaRoads.xml",
  55                     {styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Roads"))}
  56                 ),
  57                 new OpenLayers.Layer.GML(
  58                     "WaterBodies",
  59                     "tasmania/TasmaniaWaterBodies.xml",
  60                     {
  61                         styleMap: new OpenLayers.StyleMap({
  62                             "default": getDefaultStyle(sld, "WaterBodies"),
  63                             "select": hoverStyle
  64                         })
  65                     }
  66                 ),
  67                 new OpenLayers.Layer.GML(
  68                     "Cities",
  69                     "tasmania/TasmaniaCities.xml",
  70                     {styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Cities"))}
  71                 )
  72             ];
  73
  74             map.addLayers(gmlLayers);
  75             map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
  76
  77             var hover = new OpenLayers.Control.SelectFeature(
  78                 gmlLayers[2], {hover: true}
  79             );
  80             map.addControl(hover);
  81             hover.activate();
  82         }
  83
  84         // set a new style when the radio button changes
  85         function setStyle(index) {
  86             gmlLayers[2].styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
  87             // change the style of the features of the WaterBodies layer
  88             gmlLayers[2].redraw();
  89         }
  90     </script>
  91   </head>
  92   <body onload="init()">
  93     <h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
  94     <p id="shortdesc">
  95         Parsing SLD and applying styles to a vector layer.
  96     </p>
  97     <div id="map" class="smallmap"></div>
  98     <p id="docs">This example uses a <a target="_blank" href="tasmania/sld-tasmania.xml">SLD
  99     file</a> to style the vector features. To construct layers that use styles
 100     from SLD, create a StyleMap for the layer that uses one of the userStyles in the
 101     namedLayers object of the return from format.read().</p>
 102     <p>Select a new style for the WaterBodies layer below:</p>
 103     <form>
 104       <input type="radio" name="style" onclick="setStyle(this.value)" checked="checked" value="0">Default Styler (zoom in to see more features)</input><br/>
 105       <input type="radio" name="style" onclick="setStyle(this.value)" value="3">Styler Test PropertyIsEqualTo</input><br/>
 106       <input type="radio" name="style" onclick="setStyle(this.value)" value="4">Styler Test WATER_TYPE</input><br/>
 107       <input type="radio" name="style" onclick="setStyle(this.value)" value="5">Styler Test PropertyIsGreaterThanOrEqualTo</input><br/>
 108       <input type="radio" name="style" onclick="setStyle(this.value)" value="6">Styler Test PropertyIsLessThanOrEqualTo</input><br/>
 109       <input type="radio" name="style" onclick="setStyle(this.value)" value="7">Styler Test PropertyIsGreaterThan</input><br/>
 110       <input type="radio" name="style" onclick="setStyle(this.value)" value="8">Styler Test PropertyIsLessThan</input><br/>
 111       <input type="radio" name="style" onclick="setStyle(this.value)" value="9">Styler Test PropertyIsLike</input><br/>
 112       <input type="radio" name="style" onclick="setStyle(this.value)" value="10">Styler Test PropertyIsBetween</input><br/>
 113       <input type="radio" name="style" onclick="setStyle(this.value)" value="11">Styler Test FeatureId</input><br/>
 114     </form>
 115   </body>
 116 </html>