OpenlayersでSLDReaderを使ってスタイルを設定してみた

はじめに

OpenlayersのスタイルでSLD (Styled Layer Descriptor) が利用できないか、CahtGPT先生に問い合わせたところ、SLDReaderなるライブラリがあるとのことなので試してみました。

なぜSLD (Styled Layer Descriptor) か？

OGC標準のサポート
- SLDはOGC（Open Geospatial Consortium）の標準仕様であり、多くのGISソフトウェアで使用されています。私はGeoServerで利用されているのでかなり昔から知っていました。
柔軟なスタイル設定
- 属性値に基づく条件付きスタイルや、複数ルールの適用など、高度なスタイル設定が可能です。GeoServerに詳しい利用方法が載っています。

SLDReaderとは

SLDReader は、SLD (Styled Layer Descriptor) ファイルを解析し、JavaScriptで扱いやすい形式に変換するためのライブラリです。このライブラリは、SLD形式で定義されたスタイル情報を読み取り、OpenLayersや他の地図ライブラリで使用できるスタイルに変換するために使用されます。
SLDReaderはオープンソースのライブラリで、MITライセンスのもとで公開されており、無料で利用できるとのこと。

SLDReaderの主な特徴

SLD形式の解析
- XML形式で記述されたSLDファイルを解析し、JavaScriptオブジェクトとして利用可能にします。
OpenLayersとの統合
- 解析したスタイル情報をOpenLayersのスタイルに変換するためのヘルパー機能を提供します。
軽量でシンプル
- 必要最低限の機能を提供する軽量なライブラリで、扱いやすい設計です。
ルールのサポート
- SLD内のルール ( タグ) に基づいてスタイルを適用できます。例えば、属性値に応じたスタイル変更など。

使用例

サンプルなどを参考に、ハザードマップなどに利用される、浸水情報を表示してみました。

p_area_tsunami.txt

sldファイルの内容はxmlですが、txtとして読み込ますために、今回は拡張子を変えています。属性値をあえて日本語にしました。

<?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>p_area_tsunami</Name>
    <UserStyle>
      <Title>洪水浸水想定区域</Title>
      <Abstract>A sample style that draws a polygon</Abstract>
      <FeatureTypeStyle>
        <Rule>
          <Name>0</Name>
          <Title>洪水浸水深(0～0.5ｍ未満)</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>浸水深</ogc:PropertyName>
              <ogc:Literal>0～0.5ｍ未満</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#faf7af</CssParameter>
              <CssParameter name="fill-opacity">0.8</CssParameter>
            </Fill>
          </PolygonSymbolizer>
        </Rule>
        <Rule>
          <Name>1</Name>
          <Title>洪水浸水深(0.5～3.0ｍ未満)</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>浸水深</ogc:PropertyName>
              <ogc:Literal>0.5～3.0ｍ未満</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#ffcdb0</CssParameter>
              <CssParameter name="fill-opacity">0.8</CssParameter>
            </Fill>
          </PolygonSymbolizer>
        </Rule>
       </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

<?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">

<Name>p_area_tsunami</Name>

<Title>洪水浸水想定区域</Title>

<Abstract>A sample style that draws a polygon</Abstract>

<Rule>

<Title>洪水浸水深(0～0.5ｍ未満)</Title>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

<ogc:PropertyName>浸水深</ogc:PropertyName>

<ogc:Literal>0～0.5ｍ未満</ogc:Literal>

</ogc:PropertyIsEqualTo>

</ogc:Filter>

<Fill>

</Fill>

</PolygonSymbolizer>

</Rule>

<Rule>

<Title>洪水浸水深(0.5～3.0ｍ未満)</Title>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

<ogc:PropertyName>浸水深</ogc:PropertyName>

<ogc:Literal>0.5～3.0ｍ未満</ogc:Literal>

</ogc:PropertyIsEqualTo>

</ogc:Filter>

<Fill>

<CssParameter name="fill">#ffcdb0</CssParameter>

</Fill>

</PolygonSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

jsコード

sldファイルを読み込まして、SLDReadeにてスタイルを解析し、SLDReader.createOlStyleFunction()で生成したOL用関数を、セットするだけです。

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [36050, 139371],
    projection: 'EPSG:2446',
  }),
});
var layer1 = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://maps.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
    attributions: [
      '<a href="https://github.com/gsi-cyberjapan/gsimaps-vector-experiment" target="_blank" rel="”noopener noopener">国土地理院ベクトルタイル</a>'
    ]
  }),
});
map.addLayer(layer1);

const sldText = getText(
  "/OpenLayersSample/SLDReader/styles/p_area_tsunami.txt");
const sldObject = SLDReader.Reader(sldText);
const sldLayer = SLDReader.getLayer(sldObject);
const sldStyle = SLDReader.getStyle(sldLayer);
const featureTypeStyle = sldStyle.featuretypestyles[0];
const layer2 = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '/OpenLayersSample/SLDReader/data/shinsui.geojson',
    format: new ol.format.GeoJSON(),
  }),
});
layer2.setStyle(
  SLDReader.createOlStyleFunction(featureTypeStyle, {
    imageLoadedCallback: () => {
      layer2.changed();
    },
  })
);
map.addLayer(layer2);