異なる属性値のポリゴンが重複しており、表現がそれぞれで異なる場合、表示するたびに表示が変わってしまう。

どういう事かというと、国土数値情報の洪水浸水区域データをGeoserverに食わせ表示させた。

浸水深１の場合青、浸水深２の場合赤といった具合にポリゴンの表示を変えるわけだが、いざ表示させたところ表示するたびに色が赤になったり青になったりした。

よく見るとポリゴンが重なっており、浸水深１のポリゴンの上に浸水深２のポリゴンが重なっている。それで表示するたびに１，２の表示の優先順位指定をしていなかった為、表示するたびにランダムに色が変わっていたと思われる。

以下のようにVendorOption の “sortBy” を使うことで表示優先順位を指定する事で表示も固定される。

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0"
 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
 xmlns="http://www.opengis.net/sld"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <NamedLayer>
    <Name>restricted_zone</Name>
    <UserStyle>
      <Title>国土数値情報　洪水浸水想定区域データ</Title>
      <Abstract>国土数値情報　洪水浸水想定区域データ</Abstract>
      <FeatureTypeStyle>
        <Rule>
          <Name>1</Name>
          <Title>1</Title>
          <Abstract>1</Abstract>
	      <ogc:Filter>
	        <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>a31_201</ogc:PropertyName>
	          <ogc:Literal>1</ogc:Literal>
	        </ogc:PropertyIsEqualTo>
	      </ogc:Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#FF0000</CssParameter>
            </Fill>
          </PolygonSymbolizer>
        </Rule>
        <Rule>
          <Name>2</Name>
          <Title>2</Title>
          <Abstract>2</Abstract>
	      <ogc:Filter>
	        <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>a31_201</ogc:PropertyName>
	          <ogc:Literal>2</ogc:Literal>
	        </ogc:PropertyIsEqualTo>
	      </ogc:Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#0000FF</CssParameter>
            </Fill>
          </PolygonSymbolizer>
        </Rule>
        <VendorOption name="sortBy">a31_201</VendorOption>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

OpenLayersというのは2005年に誕生した地図表示JSライブラリの代表格である。バージョン3からは劇的進化を遂げ、WEB上でヌルサクの使い勝手を提供している素晴らしいプロジェクトである。
最近は利用しやすいLeaflet/MapBox勢力がシェアを高めているように思うが細かい所まで手が届く機能面と安定性から私は現在もOpenLayersを利用している。

さて、OpenLayersではol.mapにはgetLayersメソッドでレイヤー一覧を取得出来るが、ここで取得出来るのはol.layer.Layerとol.layer.LayerGroupである。
getLayersで取得したol.CollectionをforEachメソッドで回すわけだがそのさいに、ol.layer.LayerGroupの場合は更にgetLayersメソッドで入れ子構成を取得したいわけだがol.Collectionでol.layer.Layerとol.layer.LayerGroupの判断方法に悩んだのでメモしておく

なんてことはない getLayersを typeof で型判定し再帰処理すればすべてのレイヤーを取得出来る（これより良い方法をご存知の方は是非コメントお願いします！）

map.getLayers().forEach(function(layerGroup){
     getLayer(layerGroup);
 });
 function getLayer(layer){
    console.log(layer.get("title"));
    if(typeof layer.getLayers == 'function') {
         layer.getLayers().forEach(function (l) {
         getLayer(l);
     });
    }
 }