SLDReaderを利用して、ラインの最後尾の頂点にアイコンを追加する

はじめに

前回は、Openlayersを編集して、道路網図の道路の起点から終点までの位置がわかるよう、アイコンを設定してしましたが、SLDReaderにも、起点又は終点のアイコンが設定できる機能があったので、試してみました。

ラインの最後尾の頂点にアイコンを追加する例

l_road.txt

SLDReaderには、SLDのベンダーオプション（Vendor Option）にlastPointを設定します。ソースを見てみるとQGISのベンダーオプションようです。あと、UOMの対応もできたので、UOMをLineSymbolizerの属性に追加しています。

<?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>
          <LineSymbolizer uom="http://www.opengeospatial.org/se/units/metre">
            <Stroke>
              <CssParameter name="stroke">#ff0000</CssParameter>
              <CssParameter name="stroke-width">12</CssParameter>
            </Stroke>
          </LineSymbolizer>
          <LineSymbolizer uom="http://www.opengeospatial.org/se/units/metre">
            <VendorOption name="placement">lastPoint</VendorOption>
            <Stroke>
              <GraphicStroke>
                <Graphic>
                  <ExternalGraphic>
                    <OnlineResource xlink:type="simple" xlink:href="/OpenLayersSample/SLDReader/images/circle.svg" />
                    <Format>image/svg+xml</Format>
                  </ExternalGraphic>
                  <Size>0.5</Size>
                </Graphic>
              </GraphicStroke>
            </Stroke>
          </LineSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

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

<Name>l_trans_road_emg</Name>

<Rule>

</Stroke>

</LineSymbolizer>

<VendorOption name="placement">lastPoint</VendorOption>

<Format>image/svg+xml</Format>

</ExternalGraphic>

</Graphic>

</GraphicStroke>

</Stroke>

</LineSymbolizer>

</Rule>

</FeatureTypeStyle>

</UserStyle>

</NamedLayer>

</StyledLayerDescriptor>

sldreader.js

SLDReader本体をカスタマイズします。SLDReaderでは、アイコンのサイズが固定ですが、今回はUOM指定を取り入れ、縮尺によってアイコンサイズを変更しています。

  function getGraphicStrokeRenderer(linesymbolizer, getProperty) {
      
      // 省略
      
      var graphicSizeExpression =
        (graphicstroke.graphic && graphicstroke.graphic.size) ||
        defaultGraphicSize;

      // UOM指定の場合は、アイコンサイズを変更
      if(linesymbolizer.uom){
          graphicSizeExpression = graphicstroke.graphic.size / renderState.resolution;
          const image = pointStyle.getImage();
          const newScale = graphicstroke.graphic.size / renderState.resolution;
          image.setScale(newScale);
      }

      // 省略
  }