OpenLayersを利用して、縮尺に応じて線幅を変化させて表示する

はじめに

OpenLayersを利用して、縮尺に応じて線幅を変化させて表示する際のメモ

実装例

・スタイル編集画面で、レイヤの線幅単位(QGISでいう地図単位)の項目を追加
・線幅単位が地図単位の場合はOpenLayersのラインのwidthを縮尺に応じて変更

line.sld

線幅単位が地図単位の場合、SLD (Styled Layer Descriptor) の LineSymbolizer要素に、
uom属性(“http://www.opengeospatial.org/se/units/metre”)を追加する

<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 uom="http://www.opengeospatial.org/se/units/metre">
    <Stroke>
      <CssParameter name="stroke">#ffa000</CssParameter>
      <CssParameter name="stroke-width">12</CssParameter>
      <CssParameter name="stroke-startcap">
      </CssParameter>
      <CssParameter name="stroke-endcap">
      </CssParameter>
    </Stroke>
  </LineSymbolizer>
</Rule>

<Rule>

<ogc:Filter>

<ogc:PropertyIsEqualTo>

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

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

</ogc:PropertyIsEqualTo>

</ogc:Filter>

</CssParameter>

</CssParameter>

</Stroke>

</LineSymbolizer>

</Rule>

style.js

uom属性に”http://www.opengeospatial.org/se/units/metre”が設定されている場合は線の幅を縮尺に応じて変更する

    var obj = {
        "color": [255,160,0,1],
        "width": 12,
        "units": "metre"
    };
    var openlayer = new ol.layer.Vector({
        name: layerjson.LayerId,
        source: vectorSource,
        visible: layerjson.Visible,
        opacity: layerjson.Opacity,
        style: function (feature, resolution) {
            var val= null;
            if (obj.units == 'metre') {
                var obj2 = { width: obj.width};
                ol.obj.assign(obj2, obj);
                obj2.width = Math.round(obj.width / resolution);
                val= new ol.style.Stroke(obj2);
            } else {
                val = new ol.style.Stroke(obj);
            }
            return val;
        }
    });