openlayers/tests/Format/SLD/v1_0_0.html

   1 <html>
   2 <head>
   3     <script src="../../../lib/OpenLayers.js"></script>
   4     <script type="text/javascript">
   5
   6     var sld =
   7         '<StyledLayerDescriptor version="1.0.0" ' +
   8             'xmlns="http://www.opengis.net/sld" ' +
   9             'xmlns:gml="http://www.opengis.net/gml" ' +
  10             'xmlns:ogc="http://www.opengis.net/ogc" ' +
  11             'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
  12             'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
  13             'xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">' +
  14             '<NamedLayer>' +
  15                 '<Name>AAA161</Name>' +
  16                 '<UserStyle>' +
  17                     '<FeatureTypeStyle>' +
  18                         '<Rule>' +
  19                             '<Name>stortsteen</Name>' +
  20                             '<ogc:Filter>' +
  21                                 '<ogc:PropertyIsEqualTo>' +
  22                                     '<ogc:PropertyName>CTE</ogc:PropertyName>' +
  23                                     '<ogc:Literal>V0305</ogc:Literal>' +
  24                                 '</ogc:PropertyIsEqualTo>' +
  25                             '</ogc:Filter>' +
  26                             '<MaxScaleDenominator>50000</MaxScaleDenominator>' +
  27                             '<PolygonSymbolizer>' +
  28                                 '<Fill>' +
  29                                     '<CssParameter name="fill">#ffffff</CssParameter>' +
  30                                 '</Fill>' +
  31                                 '<Stroke>' +
  32                                     '<CssParameter name="stroke">#000000</CssParameter>' +
  33                                 '</Stroke>' +
  34                             '</PolygonSymbolizer>' +
  35                             '<TextSymbolizer>' +
  36                                 '<Label>' +
  37                                     '<ogc:PropertyName>FOO</ogc:PropertyName>' +
  38                                 '</Label>' +
  39                                 '<Font>' +
  40                                     '<CssParameter name="font-family">Arial</CssParameter>' +
  41                                     '<CssParameter name="font-size">14</CssParameter>' +
  42                                     '<CssParameter name="font-weight">bold</CssParameter>' +
  43                                     '<CssParameter name="font-style">normal</CssParameter>' +
  44                                 '</Font>' +
  45                                 '<Halo>' +
  46                                     '<Radius>3</Radius>' +
  47                                     '<Fill>' +
  48                                         '<CssParameter name="fill">#ffffff</CssParameter>' +
  49                                     '</Fill>' +
  50                                 '</Halo>' +
  51                                 '<Fill>' +
  52                                     '<CssParameter name="fill">#000000</CssParameter>' +
  53                                 '</Fill>' +
  54                             '</TextSymbolizer>' +
  55                         '</Rule>' +
  56                         '<Rule>' +
  57                             '<Name>betonbekleding</Name>' +
  58                             '<ogc:Filter>' +
  59                                 '<ogc:PropertyIsLessThan>' +
  60                                     '<ogc:PropertyName>CTE</ogc:PropertyName>' +
  61                                     '<ogc:Literal>1000</ogc:Literal>' +
  62                                 '</ogc:PropertyIsLessThan>' +
  63                             '</ogc:Filter>' +
  64                             '<MaxScaleDenominator>50000</MaxScaleDenominator>' +
  65                             '<PolygonSymbolizer>' +
  66                                 '<Fill>' +
  67                                     '<CssParameter name="fill">#ffff00</CssParameter>' +
  68                                 '</Fill>' +
  69                                 '<Stroke>' +
  70                                     '<CssParameter name="stroke">#0000ff</CssParameter>' +
  71                                 '</Stroke>' +
  72                             '</PolygonSymbolizer>' +
  73                         '</Rule>' +
  74                     '</FeatureTypeStyle>' +
  75                 '</UserStyle>' +
  76             '</NamedLayer>' +
  77             '<NamedLayer>' +
  78                 '<Name>Second Layer</Name>' +
  79                 '<UserStyle>' +
  80                     '<FeatureTypeStyle>' +
  81                         '<Rule>' +
  82                             '<Name>first rule second layer</Name>' +
  83                             '<ogc:Filter>' +
  84                                 '<ogc:Or>' +
  85                                     '<ogc:PropertyIsBetween>' +
  86                                         '<ogc:PropertyName>number</ogc:PropertyName>' +
  87                                         '<ogc:LowerBoundary>' +
  88                                             '<ogc:Literal>1064866676</ogc:Literal>' +
  89                                         '</ogc:LowerBoundary>' +
  90                                         '<ogc:UpperBoundary>' +
  91                                             '<ogc:Literal>1065512599</ogc:Literal>' +
  92                                         '</ogc:UpperBoundary>' +
  93                                     '</ogc:PropertyIsBetween>' +
  94                                     '<ogc:PropertyIsLike wildCard="*" singleChar="." escape="!">' +
  95                                         '<ogc:PropertyName>cat</ogc:PropertyName>' +
  96                                         '<ogc:Literal>*dog.food!*good</ogc:Literal>' +
  97                                     '</ogc:PropertyIsLike>' +
  98                                     '<ogc:Not>' +
  99                                         '<ogc:PropertyIsLessThanOrEqualTo>' +
 100                                             '<ogc:PropertyName>FOO</ogc:PropertyName>' +
 101                                             '<ogc:Literal>5000</ogc:Literal>' +
 102                                         '</ogc:PropertyIsLessThanOrEqualTo>' +
 103                                     '</ogc:Not>' +
 104                                 '</ogc:Or>' +
 105                             '</ogc:Filter>' +
 106                             '<MaxScaleDenominator>10000</MaxScaleDenominator>' +
 107                             '<PointSymbolizer>' +
 108                                 '<Graphic>' +
 109                                     '<Mark>' +
 110                                         '<WellKnownName>star</WellKnownName>' +
 111                                         '<Fill>' +
 112                                             '<CssParameter name="fill">lime</CssParameter>' +
 113                                         '</Fill>' +
 114                                         '<Stroke>' +
 115                                             '<CssParameter name="stroke">olive</CssParameter>' +
 116                                             '<CssParameter name="stroke-width">2</CssParameter>' +
 117                                         '</Stroke>' +
 118                                     '</Mark>' +
 119                                 '</Graphic>' +
 120                             '</PointSymbolizer>' +
 121                         '</Rule>' +
 122                     '</FeatureTypeStyle>' +
 123                 '</UserStyle>' +
 124             '</NamedLayer>' +
 125         '</StyledLayerDescriptor>';
 126
 127     function test_read(t) {
 128         t.plan(22);
 129
 130         var xml = new OpenLayers.Format.XML();
 131         var sldxml = xml.read(sld);
 132
 133         // test that format options are considered in read
 134         var parser = new OpenLayers.Format.SLD({
 135             version: "1.0.0",
 136             namedLayersAsArray: true
 137         });
 138         var obj = parser.read(sldxml);
 139         t.ok(obj.namedLayers instanceof Array, "namedLayersAsArray option for read works");
 140
 141         parser = new OpenLayers.Format.SLD.v1_0_0();
 142         var obj = parser.read(sldxml, {namedLayersAsArray: true});
 143         t.ok(obj.namedLayers instanceof Array, "namedLayersAsArray option for read works");
 144         var arrayLen = obj.namedLayers.length;
 145
 146         var obj = parser.read(sldxml);
 147         t.eq(typeof obj.namedLayers, "object", "read returns a namedLayers object by default");
 148         // test the named layer count
 149         var count = 0;
 150         for(var key in obj.namedLayers) {
 151             ++count;
 152         }
 153         t.eq(count, arrayLen, "number of named layers in array equals number of named layers in object");
 154
 155         var layer, style, rule;
 156
 157         // check the first named layer
 158         layer = obj.namedLayers["AAA161"];
 159         t.ok(layer, "first named layer exists");
 160         t.ok(layer.userStyles instanceof Array, "(AAA161) layer has array of user styles");
 161         t.eq(layer.userStyles.length, 1, "(AAA161) first layer has a single user style");
 162         t.eq(layer.userStyles[0].rules.length, 2, "(AAA161) first style has two rules");
 163         var rule = layer.userStyles[0].rules[0];
 164         t.ok(rule.filter, "(AAA161) first rule has a filter");
 165         var symbolizer = rule.symbolizer;
 166         t.ok(symbolizer, "(AAA161) first rule has a symbolizer");
 167         var poly = symbolizer["Polygon"];
 168         t.eq(poly.fillColor, "#ffffff", "(AAA161) first rule has proper fill");
 169         t.eq(poly.strokeColor, "#000000", "(AAA161) first rule has proper stroke");
 170         var text = symbolizer["Text"];
 171         t.eq(text.label, "${FOO}", "(AAA161) first rule has proper text label");
 172         t.eq(layer.userStyles[0].propertyStyles["label"], true, "label added to propertyStyles");
 173         t.eq(text.fontFamily, "Arial", "(AAA161) first rule has proper font family");
 174         t.eq(text.fillColor, "#000000", "(AAA161) first rule has proper text fill");
 175         t.eq(text.haloRadius, "3", "(AAA161) first rule has proper halo radius");
 176         t.eq(text.haloColor, "#ffffff", "(AAA161) first rule has proper halo color");
 177
 178
 179         // check the first user style
 180         style = layer.userStyles[0];
 181         t.ok(style instanceof OpenLayers.Style, "(AAA161,0) user style is instance of OpenLayers.Style");
 182         t.eq(style.rules.length, 2, "(AAA161,0) user style has 2 rules");
 183
 184         // check the second rule
 185         rule = style.rules[1];
 186         var feature = {
 187             layer: {
 188                 map: {
 189                     getScale: function(){
 190                         return 40000;
 191                     }
 192                 }
 193             },
 194             attributes: {
 195                 CTE: "900"
 196             }
 197         };
 198         t.ok(typeof rule.maxScaleDenominator == "number", "MaxScaleDenominator is a number");
 199         t.eq(rule.evaluate(feature), true, "numeric filter comparison evaluates correctly");
 200
 201         // etc.  I'm convinced read works, really wanted to test write (since examples don't test that)
 202         // I'll add more tests here later.
 203
 204     }
 205
 206     function test_write(t) {
 207         t.plan(3);
 208
 209         // read first - testing that write produces the SLD aboce
 210         var parser = new OpenLayers.Format.SLD.v1_0_0();
 211         var xml = new OpenLayers.Format.XML();
 212         var sldxml = xml.read(sld);
 213         var obj = parser.read(sldxml);
 214
 215         var node = parser.write(obj);
 216         t.xml_eq(node, sld, "SLD correctly written");
 217
 218         obj = parser.read(sldxml, {namedLayersAsArray: true});
 219         node = parser.write(obj);
 220         t.xml_eq(node, sld, "SLD from namedLayers array correctly written");
 221
 222         // test that 0 fill opacity gets written
 223         var symbolizer = {
 224             fillColor: "red",
 225             fillOpacity: 0
 226         };
 227         var root = parser.createElementNSPlus("PolygonSymbolizer");
 228         var got = parser.writeNode("Fill", symbolizer, root);
 229         var expect =
 230             '<Fill xmlns="http://www.opengis.net/sld">' +
 231                 '<CssParameter name="fill">red</CssParameter>' +
 232                 '<CssParameter name="fill-opacity">0</CssParameter>' +
 233             '</Fill>';
 234         t.xml_eq(got, expect, "zero fill opacity written");
 235     }
 236
 237     function test_writePointSymbolizer(t) {
 238
 239         t.plan(3);
 240
 241         var parser = new OpenLayers.Format.SLD.v1_0_0();
 242         var symbolizer, node, exp;
 243
 244         // test symbolizer with fill color only
 245         symbolizer = {
 246             "fillColor": "blue"
 247         };
 248         node = parser.writeNode("sld:PointSymbolizer", symbolizer);
 249         exp =
 250             '<PointSymbolizer xmlns="http://www.opengis.net/sld">' +
 251                 '<Graphic>' +
 252                     '<Mark>' +
 253                         '<Fill>' +
 254                             '<CssParameter name="fill">blue</CssParameter>' +
 255                         '</Fill>' +
 256                         '<Stroke/>' +
 257                     '</Mark>' +
 258                 '</Graphic>' +
 259             '</PointSymbolizer>';
 260         t.xml_eq(node, exp, "fillColor only written");
 261
 262         // test symbolizer with stroke color only
 263         symbolizer = {
 264             "strokeColor": "blue"
 265         };
 266         node = parser.writeNode("sld:PointSymbolizer", symbolizer);
 267         exp =
 268             '<PointSymbolizer xmlns="http://www.opengis.net/sld">' +
 269                 '<Graphic>' +
 270                     '<Mark>' +
 271                         '<Fill/>' +
 272                         '<Stroke>' +
 273                             '<CssParameter name="stroke">blue</CssParameter>' +
 274                         '</Stroke>' +
 275                     '</Mark>' +
 276                 '</Graphic>' +
 277             '</PointSymbolizer>';
 278         t.xml_eq(node, exp, "strokeColor only written");
 279
 280         // test symbolizer with graphic name only
 281         symbolizer = {
 282             "graphicName": "star"
 283         };
 284         node = parser.writeNode("sld:PointSymbolizer", symbolizer);
 285         exp =
 286             '<PointSymbolizer xmlns="http://www.opengis.net/sld">' +
 287                 '<Graphic>' +
 288                     '<Mark>' +
 289                         '<WellKnownName>star</WellKnownName>' +
 290                         '<Fill/>' +
 291                         '<Stroke/>' +
 292                     '</Mark>' +
 293                 '</Graphic>' +
 294             '</PointSymbolizer>';
 295         t.xml_eq(node, exp, "graphicName only written");
 296
 297
 298     }
 299
 300     function test_writeTextSymbolizer(t) {
 301         t.plan(1);
 302         var parser = new OpenLayers.Format.SLD.v1_0_0();
 303         var symbolizer = {
 304             "Text": {
 305                 "label": "This is the ${city} in ${state}.",
 306                 "fontFamily": "Arial",
 307                 "fontSize": 10,
 308                 "fillColor": "blue",
 309                 "fontWeight": "bold",
 310                 "fontStyle": "normal",
 311                 "haloRadius": 2,
 312                 "haloColor": "white"
 313             }
 314         };
 315         var node = parser.writers["sld"]["TextSymbolizer"].apply(
 316             parser, [symbolizer["Text"]]
 317         );
 318
 319         var expected =
 320             '<TextSymbolizer xmlns="http://www.opengis.net/sld">' +
 321                 '<Label>' +
 322                     'This is the ' +
 323                     '<ogc:PropertyName xmlns:ogc="http://www.opengis.net/ogc">city</ogc:PropertyName>' +
 324                     ' in ' +
 325                     '<ogc:PropertyName xmlns:ogc="http://www.opengis.net/ogc">state</ogc:PropertyName>' +
 326                     '.' +
 327                 '</Label>' +
 328                 '<Font>' +
 329                     '<CssParameter name="font-family">Arial</CssParameter>' +
 330                     '<CssParameter name="font-size">10</CssParameter>' +
 331                     '<CssParameter name="font-weight">bold</CssParameter>' +
 332                     '<CssParameter name="font-style">normal</CssParameter>' +
 333                 '</Font>' +
 334                 '<Halo>' +
 335                     '<Radius>2</Radius>' +
 336                     '<Fill>' +
 337                         '<CssParameter name="fill">white</CssParameter>' +
 338                     '</Fill>' +
 339                 '</Halo>' +
 340                 '<Fill>' +
 341                     '<CssParameter name="fill">blue</CssParameter>' +
 342                 '</Fill>' +
 343             '</TextSymbolizer>';
 344
 345         t.xml_eq(node, expected, "TextSymbolizer correctly written");
 346
 347     }
 348
 349     function test_writeSpatialFilter(t) {
 350
 351         t.plan(1);
 352
 353         var format = new OpenLayers.Format.SLD.v1_0_0();
 354
 355         var rule = new OpenLayers.Rule({
 356             name: "test",
 357             filter: new OpenLayers.Filter.Spatial({
 358                 type: OpenLayers.Filter.Spatial.BBOX,
 359                 value: new OpenLayers.Bounds(0, 0, 10, 10)
 360             })
 361         });
 362
 363         var sld = format.writeNode("sld:Rule", rule);
 364
 365         var expect =
 366             '<Rule xmlns="http://www.opengis.net/sld">' +
 367                 '<Name>test</Name>' +
 368                 '<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">' +
 369                     '<ogc:BBOX>' +
 370                         '<ogc:PropertyName/>' +
 371                         '<gml:Box xmlns:gml="http://www.opengis.net/gml">' +
 372                             '<gml:coordinates decimal="." cs="," ts=" ">0,0 10,10</gml:coordinates>' +
 373                         '</gml:Box>' +
 374                     '</ogc:BBOX>' +
 375                 '</ogc:Filter>' +
 376             '</Rule>';
 377
 378         t.xml_eq(sld, expect, "rule with spatial filter correctly written");
 379
 380
 381     }
 382
 383     </script>
 384 </head>
 385 <body>
 386 </body>
 387 </html>