SLDReader本体をカスタマイズして、ラインのサイズを変更する

はじめに

前回の投稿では、SLDReader本体を変更せずにアイコンのサイズを変更しました。
一方、今回は、SLDReader本体をカスタマイズしてサイズを変更できるか試してみました。

UOMの利用

まず最初に、UOMの設定が利用できないか調べました。ところが、UOMの設定箇所がまちまちで、設定されたUOMの情報を取得することが、非常に難しいことが判明し、早々に断念しました。

SLDのベンダーオプション（Vendor Option）の利用

次に、SLDのベンダーオプションを調査しました。
SLDでは、標準の SLD スキーマで定義されていない、特定の GIS ソフトウェアやライブラリが独自に拡張したベンダーオプション（Vendor Option）が利用できます。これにより、標準ではサポートされないスタイリング機能を柔軟に実現できます。

ベンダーオプションの特徴

拡張性
- 各ソフトウェアが独自のスタイリング機能を追加できます。
互換性
- 標準外の機能であるため、特定のソフトウェアやライブラリでのみ機能します。他のツールでは無視される場合があります。
記述方法
- XML の属性やタグとして記述されます。例えば、<VendorOption>タグや属性として追加されます。

ベンダーオプションの使用例

ベンダーオプションにUOMを設定してみました。

s_aed_uom.txt

<?xml version="1.0" encoding="utf-16" standalone="no"?>
<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>l_trans_road_emg</Name>
    <UserStyle>
      <Title>緊急輸送路</Title>
      <FeatureTypeStyle>
        <Rule>
          <Name>0</Name>
          <Title>国道</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>linetype</ogc:PropertyName>
              <ogc:Literal>6072</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#ffa000</CssParameter>
              <CssParameter name="stroke-width">16</CssParameter>
              <CssParameter name="stroke-startcap">
              </CssParameter>
              <CssParameter name="stroke-endcap">
              </CssParameter>
            </Stroke>
            <VendorOption name="uom">metre</VendorOption>
          </LineSymbolizer>
        </Rule>
        <Rule>
          <Name>1</Name>
          <Title>県道</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>linetype</ogc:PropertyName>
              <ogc:Literal>6073</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#008000</CssParameter>
              <CssParameter name="stroke-width">6</CssParameter>
            </Stroke>
            <VendorOption name="uom">metre</VendorOption>
          </LineSymbolizer>
        </Rule>
        <Rule>
          <Name>2</Name>
          <Title>町道</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>linetype</ogc:PropertyName>
              <ogc:Literal>6074</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">8</CssParameter>
            </Stroke>
            <VendorOption name="uom">metre</VendorOption>
          </LineSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

<?xml version="1.0" encoding="utf-16" standalone="no"?>

<Name>l_trans_road_emg</Name>

<Title>緊急輸送路</Title>

<Rule>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

<ogc:PropertyName>linetype</ogc:PropertyName>

<ogc:Literal>6072</ogc:Literal>

</ogc:PropertyIsEqualTo>

</ogc:Filter>

</CssParameter>

</CssParameter>

</Stroke>

<VendorOption name="uom">metre</VendorOption>

</LineSymbolizer>

</Rule>

<Rule>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

<ogc:PropertyName>linetype</ogc:PropertyName>

<ogc:Literal>6073</ogc:Literal>

</ogc:PropertyIsEqualTo>

</ogc:Filter>

</Stroke>

<VendorOption name="uom">metre</VendorOption>

</LineSymbolizer>

</Rule>

<Rule>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

<ogc:PropertyName>linetype</ogc:PropertyName>

<ogc:Literal>6074</ogc:Literal>

</ogc:PropertyIsEqualTo>

</ogc:Filter>

</Stroke>

<VendorOption name="uom">metre</VendorOption>

</LineSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

sldreader.js

SLDReader本体をカスタマイズします。まず、スタイル設定時にresolutionの値が必要なので、各関数の引数にresolutionを追加します。その後、各スタイル設定時に、ベンダーオプションのUOMが’metre’に設定されている場合は、サイズを計算し、再設定します。

  function applyDynamicStrokeStyling(
    olStyle,
    symbolizer,
    feature,
    resolution, // 引数の追加
    getProperty
  ) {

    // 省略

    // ベンダーオプションのUOMが'metre'に設定されている場合は、幅を計算し、再設定
    if (symbolizer.vendoroptions) {
      if (symbolizer.vendoroptions.uom == 'metre') {
        var strokeWidth = styling.strokeWidth / resolution;
        olStroke.setWidth(strokeWidth);
      }
    }
  }

function applyDynamicStrokeStyling(

olStyle,

symbolizer,

feature,

resolution, // 引数の追加

getProperty

) {

// 省略

// ベンダーオプションのUOMが'metre'に設定されている場合は、幅を計算し、再設定

if (symbolizer.vendoroptions) {

if (symbolizer.vendoroptions.uom == 'metre') {

var strokeWidth = styling.strokeWidth / resolution;

olStroke.setWidth(strokeWidth);

}

jsコード

SLDReader本体をカスタマイズしたので、呼び出し側では特に何もしていません。

function setOlStyleFunction(vectorLayer, sldUrl) {
  const sldText = getText(sldUrl);
  const sldObject = SLDReader.Reader(sldText);
  const sldLayer = SLDReader.getLayer(sldObject);
  const sldStyle = SLDReader.getStyle(sldLayer);
  const featureTypeStyle = sldStyle.featuretypestyles[0];
  const olStyleFunction = SLDReader.createOlStyleFunction(featureTypeStyle, {
    imageLoadedCallback: () => {
      vectorLayer.changed();
    },
  });

  vectorLayer.setStyle(olStyleFunction);
}

const layer2 = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '/OpenLayersSample/SLDReader/data/road.geojson',
    format: new ol.format.GeoJSON(),
  }),
});
map.addLayer(layer2);

setOlStyleFunction(layer2,
  '/OpenLayersSample/SLDReader/styles/l_trans_road_emg.txt');

function setOlStyleFunction(vectorLayer, sldUrl) {

const sldText = getText(sldUrl);

const sldObject = SLDReader.Reader(sldText);

const sldLayer = SLDReader.getLayer(sldObject);

const sldStyle = SLDReader.getStyle(sldLayer);

const featureTypeStyle = sldStyle.featuretypestyles[0];

const olStyleFunction = SLDReader.createOlStyleFunction(featureTypeStyle, {

imageLoadedCallback: () => {

vectorLayer.changed();

});

vectorLayer.setStyle(olStyleFunction);

}

const layer2 = new ol.layer.Vector({

source: new ol.source.Vector({

url: '/OpenLayersSample/SLDReader/data/road.geojson',

format: new ol.format.GeoJSON(),

}),

});

map.addLayer(layer2);

setOlStyleFunction(layer2,

'/OpenLayersSample/SLDReader/styles/l_trans_road_emg.txt');

カスタマイズ後の地図

サイズが変更されています。

まとめ

SLDReader本体をカスタマイズして、サイズを変更を試しましたが、思ったより、簡単に実装できました。SLDReaderでベンダーオプション（Vendor Option）の対応できていたのが大きかったです。このベンダーオプション（Vendor Option）を利用すれば、もっと高度なスタイル設定ができそうです！