はじめに
今回も、SLDReaderをカスタマイズして、地図の解像度によって、アイコン及びラベルのサイズを変更しました。
SLDには、UOMという属性が設定でき、UOMを設定することで、スタイルのサイズを地図の単位（例えばメートル）で指定することが可能になります。このUOMに対応することで、アイコン及びラベルのサイズを動的に変更できるようにしました。
UOM使用例
s_aed_uom.txt
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<?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>AED設置施設</Name> <UserStyle> <Title>AED設置施設</Title> <Abstract>AED設置施設</Abstract> <FeatureTypeStyle> <Rule> <Name>0</Name> <Title>AED設置施設</Title> <PointSymbolizer uom="http://www.opengeospatial.org/se/units/metre"> <Geometry> <ogc:Function name="vertices"> <ogc:PropertyName>geometry</ogc:PropertyName> </ogc:Function> </Geometry> <Graphic> <ExternalGraphic> <OnlineResource xlink:type="simple" xlink:href="/OpenLayersSample/SLDReader/images/s_aed.svg" /> <Format>image/svg+xml</Format> </ExternalGraphic> <Size>0.1</Size> </Graphic> </PointSymbolizer> <TextSymbolizer uom="http://www.opengeospatial.org/se/units/metre"> <Label> <ogc:PropertyName>name</ogc:PropertyName> </Label> <Font> <CssParameter name="font-family">Arial</CssParameter> <CssParameter name="font-size">10</CssParameter> <CssParameter name="font-style">normal</CssParameter> <CssParameter name="font-weight">bold</CssParameter> </Font> <LabelPlacement> <PointPlacement> <AnchorPoint> <AnchorPointX>0.5</AnchorPointX> <AnchorPointY>0.0</AnchorPointY> </AnchorPoint> <Displacement> <DisplacementX>0</DisplacementX> <DisplacementY>45</DisplacementY> </Displacement> </PointPlacement> </LabelPlacement> <Fill> <CssParameter name="fill">#000000</CssParameter> </Fill> </TextSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor> |
sldreader.js
SLDReader本体をカスタマイズします。まず、SLDReaderでは、uomを登録しないので、登録できるようにします。その後、createOlStyleFunction()で取得したresolutionを～getPointStyle()まで引数を渡します。その後、getPointStyle()で、サイズの計算をします。ポイントと同じように、テキストなどでもサイズの変更処理を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
// uomの取り込み var SymbParsers = { PolygonSymbolizer: function(node, obj, prop) { addPropArray(node, obj, prop); obj[prop.toLowerCase()][obj.polygonsymbolizer.length - 1].uom = node.getAttribute('uom'); return; }, LineSymbolizer: function(node, obj, prop) { addPropArray(node, obj, prop); obj[prop.toLowerCase()][obj.linesymbolizer.length - 1].uom = node.getAttribute('uom'); return; }, PointSymbolizer: function(node, obj, prop) { addPropArray(node, obj, prop); obj[prop.toLowerCase()][obj.pointsymbolizer.length - 1].uom = node.getAttribute('uom'); return; }, TextSymbolizer: function(node, obj, prop) { addPropArray(node, obj, prop); obj[prop.toLowerCase()][obj.textsymbolizer.length - 1].uom = node.getAttribute('uom'); return; }, // 省略 } // 引数にresolutionを追加 function getPointStyle(symbolizer, feature, getProperty,resolution) { // 省略 // UOM指定の場合は、アイコンサイズを変更 if(symbolizer.uom){ const newScale = graphic.size / resolution; olImage.setScale(newScale); } // 省略 } // 引数にresolutionを追加 function getTextStyle(symbolizer, feature, getProperty,resolution) { // 省略 if (labelplacement) { // 省略 // ラベル位置の変更 if(symbolizer.uom){ if (labelplacement.pointplacement) { var displacement = labelplacement.pointplacement.displacement; if(displacement.displacementx){ var newOffsetX = displacement.displacementx / resolution; olText.setOffsetX(newOffsetX); } if(displacement.displacementy){ var newOffsetY = displacement.displacementy / resolution; olText.setOffsetY(newOffsetY); } } } } if (symbolizer.font && symbolizer.font.styling) { var fontStyling = symbolizer.font.styling || {}; if ( isDynamicExpression(fontStyling.fontFamily) || isDynamicExpression(fontStyling.fontStyle) || isDynamicExpression(fontStyling.fontWeight) || isDynamicExpression(fontStyling.fontSize) || symbolizer.uom ) { // 省略 // フォントサイズの変更 if(symbolizer.uom){ fontSize = fontStyling.fontSize / resolution; } // 省略 } } // 省略 } function createOlStyleFunction(featureTypeStyle, options) { // 省略 return function(feature, mapResolution) { // 省略 // 関数の引数にresolutionを追加 var olStyles = OlStyler(categorizedSymbolizers, feature, getProperty,resolution); return olStyles; }; } |
カスタマイズ後の地図
縮尺によりアイコン及びラベルのサイズが変更されています。
まとめ
SLDReaderがだいぶ理解できるようになり、念願のuom対応ができました。SLDには他にも高度な記述方法があるので、またチャレンジしてみます！
