CSS の使用によるレンダリング処理のカスタマイズ

> > > > >

通常、レンダラーは独自の Java™ API によりカスタマイズできます。例えば、青色の線を取得するには、 IlvDefaultCurveRenderer を使用して、 IlvMapLineRenderingStyle. 簡単に素早くレンダラーをカスタマイズするために、 IlvMapCSSRenderer クラスを使用することもできます。これは IlvDefaultFeatureRenderer です (すべての既知の IlvMapGeometry).

メモ

この機能は、独自のスタイルを持つ地図レイヤーで使用するのは困難です。各オブジェクト・スタイルを 2 つの方法で定義できる状況になります。

CSS の詳細については、『 Rogue Wave®JViews DiagrammerSDK を使用した開発』の「スタイル・シート内での CSS 構文の使用」を参照してください。

Cascading Style Sheets (CSS)

カスタマイズには、IlvMapCSSRenderer クラスは Cascading Style Sheets (CSS) ファイルを使用します。カスタマイズは、同じ Java コードに異なるスタイル・シート、つまり異なるレンダリングの側面を使用できるように行われます。

基本的には、スタイル・シートは一連のルールから構成されています。CSS の構造の詳細については、『Rogue Wave®JViews DiagrammerSDK を使用した開発』の「スタイル・シート内での CSS 構文の使用」を参照してください。

この例のソース・コード一式は、以下のファイルにあります。

<installdir> /jviews-maps89/codefragments/renderer/src/CSSRenderer.java

<installdir> /jviews-maps89/codefragments/renderer/data/style.css

ここでは、 IlvMapCSSRenderer クラスの使い方を説明します。例えば、シェープ・ファイルのデータ・ファイル roads.shp があり、道路を赤にレンダリングするとします。CSS を使った一番簡単な方法について説明します。

IlvMapCSSRenderer cssRenderer = 
 new IlvMapCSSRenderer(null, //use as default renderer
        "roads", 
        new String[] { "simple.css"});
 IlvMapLoader loader = new IlvMapLoader(manager);
 IlvMapFeatureIterator iterator = loader.makeFeatureIterator("roads.shp");
    loader.load(iterator, cssRenderer);

simple.css ファイルは、次のとおりです。

#roadsLinesStyle {	
    class : 'ilog.views.maps.rendering.IlvMapLineRenderingStyle';
    foreground : red;
}

roads {
    class : 'ilog.views.maps.rendering.IlvDefaultCurveRenderer';
    lineRenderingStyle : @=roadsLinesStyle;
}

このセクションの後半で、CSS デモ (<installdir>/jviews-maps89/samples/css/data) に含まれている corsica.css ファイルのすべての内容を検証して説明します。

CSS レンダラーのカスタマイズ

以下の CSS コード抽出は、CSS レンダラーのカスタマイズを示したものです。

デバッグ・マスクを 0 に設定すると、デバッグ情報は印刷されません。最大デバッグ情報を取得するには、デバッグ・マスクを 65535 に設定します。
```
#IlvMapCSSRenderer {
    styleSheetDebugMask : 0;
}
```

ポイント・ジオメトリーのあるシェープ・ファイル airports.shp のレンダリングをカスタマイズします。 IlvLabeledPointRendererIlvLabeled.

#airportsPointStyle {
    class : 'ilog.views.maps.rendering.IlvMapPointRenderingStyle';
    markerSize : 8;
    markerType : 'FilledDiamond|Square';
    markerColor : #99ffee04;
}

#airPortsTextStyle {
    class : 'ilog.views.maps.rendering.IlvMapTextRenderingStyle';
    backgroundPaint : yellow;
    framePaint : green;
    innerMargin : 2;
    maximumHeight :20;
    minimumHeight : 15;
    scale : 0.0000025;
    antialiasing : true;
}

airports {
    class : "ilog.views.maps.labelling.IlvLabeledPointRenderer";
    attributeNames : nam;
    pointRenderingStyle : @=airportsPointStyle;
    textRenderingStyle : @=airPortsTextStyle;
}

IlvLabeledPointRenderer のインスタンスを作成し、これをカスタマイズしてシェープ・ファイルのレンダリングに使用します。これは、次の Java コードと同等です。

IlvMapPointRenderingStyle pStyle = new IlvMapPointRenderingStyle();
pStyle.setMarkerSize(8);
pStyle.setMarkerType(IlvMarker.IlvMarkerFilledDiamond |
                                         IlvMarker.IlvMarkerSquare);
pStyle.setMarkerColor(new java.awt.Color(255, 238, 4, 153));
// The #99ffee04 color notation has the same syntax as HTML, 
// the first 2 digits after the # represent the alpha channel.
IlvMapTextRenderingStyle tStyle = new IlvMapTextRenderingStyle();
tStyle.setBackgroundPaint(Color.yellow);
tStyle.setFramePaint(Color.green);
tStyle.setInnerMargin(2);
tStyle.setMaximumHeight(20);
tStyle.setMinimumHeight(15);
tStyle.setScale(0.0000025);
tStyle.setAntialiasing(true);
IlvLabeledPointRenderer labelRender = 
       new IlvLabeledPointRenderer();
labelRenderer.setAttributeNames (new String[] {"nam"});
labelRenderer.setPointRenderingStyle(pStyle);
labelRenderer.setTextRenderingStyle(tStyle);

ライン・ジオメトリーを含む coastlines.shp シェープ・ファイルをレンダリングするために IlvDefaultCurveRenderer を作成します。

#coastlinesStyle {	
    class : 'ilog.views.maps.rendering.IlvMapLineRenderingStyle';
    foreground : black;
    lineWidthZoomed : true;
    lineWidth : 2;
    lineStyle : 4.2,4.3;
    lineJoin : JOIN_BEVEL;
    endCap : Cap_Round;
}

coastlines {
    class : 'ilog.views.maps.rendering.IlvDefaultCurveRenderer';
    lineRenderingStyle : @=coastlinesStyle;
}

メモ

前のコード引用では、class キーワードを使用して、対応するクラスのインスタンス化とその使用をレンダラーに通知しました。ここで、ilog.views.maps.rendering.IlvMapLineRenderingStyle クラスは、ilog.views.maps.rendering.IlvDefaultCurveRenderer クラスのインスタンスをカスタマイズするためにインスタンス化されました。
定義済みの値 Dash、Dot などと同様に、float 配列を lineStyle キーワードに割り当てることができます。また、LineStyle、lineJoin および endCap に割り当てられる値は大文字小文字を区別しません。

ポイント・ジオメトリーを含む cities.shp シェープ・ファイルをレンダリングするために IlvLabeledPointRenderer を作成します。

#citiesPointStyle {
    class : ilog.views.maps.rendering.IlvMapPointRenderingStyle ;
    markerSize : 3;
    markerType : FilledCircle;
    markerColor : blue
}

#col1 {
    class : 'java.awt.Color(red, green, blue)' ;
    red : 0;
    green : 0;
    blue : 200;
}

#col2 {
    class : 'java.awt.Color(red, green, blue, transparency)' ;
    red : 150;
    green : 200;
    blue : 255;
    transparency : 180;
}

#citiesLabel {
    class : ilog.views.maps.rendering.IlvMapTextRenderingStyle ;
    backgroundPaint : @=col2;
    labelFillColor : black;
    framePaint : @=col1;
    innerMargin : 2;
    maximumHeight :15;
    minimumHeight : 10;
    antialiased : true;
    scale : 0.0000025;
}

cities {
    class : ilog.views.maps.labelling.IlvLabeledPointRenderer;
    attributeNames : NAME,txt;
    rejectedValues : UNK;	
    pointRenderingStyle : @=citiesPointStyle;
    textRenderingStyle : @=citiesLabel;
}

ここでは #col1 ノードの構文に注意してください。ここでは、CSS を使用したオブジェクトのインスタンス化について説明します。class キーワードをノード範囲に提供し、すべての必要なパラメーターがあるコンストラクターの定義にリンクさせます。

class
: 'java.awt.Color(red, green, blue)'

ここでは、AWT 色がその 3 つのチャネルと共に構成されていることがお分かりになるでしょう。赤、緑、青のすべてのコンポーネントに割り当てます。「色」を作成するには、リストにある各パラメーターの値を指定します。例えば、ここでは赤を 0、緑を 0、青を 200 にします。

ライン・ジオメトリーを含む roads.shp シェープ・ファイルをレンダリングするために IlvRailroadRenderer を作成します。IlvRailroadRenderer は、CSS デモにソース・コードが提供されているレンダラーです。道路や線路のようなライン・ジオメトリーをレンダリングするために設計されています。CSS を使用すると独自のレンダラーをカスタマイズすることもできます。

#col3 {
    class : 'java.awt.Color(red, green, blue, transparency)' ;
    red : 220;
    green : 10;
    blue : 10;
    transparency : 100;
}

#roadsAttributes {
    class : 'ilog.views.maps.graphic.IlvRailroadAttributes';
    drawingTies : false;
    background : @=col3;
    railColor : #66ff0000;
    railSpacing : 1;
    maximumRailSpacing : 1;
    scale : 0.000000025;
}

roads {
    class : 'ilog.views.maps.rendering.IlvRailroadRenderer';
    attributes : @=roadsAttributes;
}

ポリゴン・ジオメトリーを含む builtareas.shp シェープ・ファイルをレンダリングするために IlvDefaultAreaRenderer を作成します。

#pattern1 {
    class : 'ilog.views.util.java2d.IlvPattern(type, foreground, background)';
   type: THICK_DIAGONAL_GRID;
   foreground: gray;
   background: wheat;
}

#builtareasLineStyle {
    class : 'ilog.views.maps.rendering.IlvMapLineRenderingStyle';
    foreground : maroon;	
    lineWidthZoomed : true;
    lineWidth : 2;
    lineJoin : join_Miter;
    endCap : CAP_Round;
}

#builtareasAreaStyle {	
    class : 'ilog.views.maps.rendering.IlvMapAreaRenderingStyle';
    fillingObject : true;
    fillPattern : @=pattern1;
    drawingStroke : true;
    lineRenderingStyle : @=builtareasLineStyle;
}

builtareas {
    class : 'ilog.views.maps.rendering.IlvDefaultAreaRenderer';
    usingGeneralPath : true;
    areaRenderingStyle : @=builtareasAreaStyle;
}

ここでは IlvPattern のインスタンスの作成方法と、レンダリング処理に使用する方法を説明します。この CSS コードに対応する Java コードは、以下の通りです。

IlvPattern pattern1 = 
       new IlvPattern(IlvPattern.THICK_DIAGONAL_GRID, 
                      Color.gray,
                      new Color(245,222,179));
IlvMapLineRenderingStyle builtareasLineStyle = new
   IlvMapLineRenderingStyle();
builtareasLineStyle.setForeground(new Color(128, 0, 0));
builtareasLineStyle.setLineWidthZoomed(true);
builtareasLineStyle.setLineWidth(2);
builtareasLineStyle.setLineJoin(BasicStroke.JOIN_MITER);
builtareasLineStyle.setEndCap(BasicStroke.CAP_ROUND);
IlvMapAreaRenderingStyle builtareasAreaStyle = new
   IlvMapAreaRenderingStyle();
builtareasAreaStyle.setFillingObject(true);
builtareasAreaStyle.setFillPattern(pattern1);
builtareasAreaStyle.setDrawingStroke(true);
builtareasAreaStyle.setLineRenderingStyle(builtareasLineStyle);

IlvDefaultAreaRenderer builtareas = new IlvDefaultAreaRenderer();
builtareas.setUsingGeneralPath(true);
builtareas.setAreaRenderingStyle(builtareasAreaStyle);

ライン・ジオメトリーを含む railroads.shp シェープ・ファイルをレンダリングするために IlvRailroadRenderer を作成します。

#railRoadStyle {
    class : 'ilog.views.maps.graphic.IlvRailroadAttributes';
    railSpacing : 1;
    scale : 0.00000025;
    maximumRailSpacing : 1;
    tieWidth : 3;
    maximumTieWidth : 3;
    tieSpacing : 4;
    slantingLimit : 15;
    railColor : green;
    tieColor : #ff40ff40;
}

railroads {
    class : 'ilog.views.maps.rendering.IlvRailroadRenderer';
    attributes : @=railRoadStyle;
    dummy[0] : "@#col1";
    dummy[1] : "@#col2";
    dummy[2] : "@#col3";
}

この CSS コードの別の関係する部分は、インデックス・プロパティーを操作したもので、ここではダミーと呼びます。IlvRailroadRenderer クラスはダミー属性メンバーを定義します。これは String (String[]) の配列です。

CSS を使用してこの配列をカスタマイズするには、次の手順に従います。

JavaBean の仕様に従って、get/set メソッドを定義します。
これは IlvRailroadRenderer のコードの一部であり、次のメソッドを宣言します。
```
public Color getDummy(int i)
{
  return _dummy[i];
}

public Color[] getDummy()
{
  return _dummy;
}

public void setDummy(Color[] val)
{
  _dummy = val;
}

public void setDummy(int i, Color val)
{
  _dummy[i] = val;
}
```
この例のソース・コード一式は、以下のファイルにあります。

<installdir> /jviews-maps89/codefragments/renderer/src/IlvRailroadRenderer.java

メモ

この例では、ダミーの色は 3 色までです。

BeanInfo クラス、IlvRailroadRendererbeanInfo 内の記述子を定義します。

public class IlvRailroadRendererBeanInfo
  extends SimpleBeanInfo 
{  
  private final static Class beanClass = IlvRailroadRenderer.class;

  public PropertyDescriptor[] getPropertyDescriptors() 
  {
    try {
      PropertyDescriptor[] properties = {
        new PropertyDescriptor("attributes", beanClass),
        new IndexedPropertyDescriptor("dummy", beanClass) 
                        // The dummy indexed property.
      };
      return properties;
    } catch (IntrospectionException e) {
      throw new Error(e.toString());
    }
  }
}

この例のソース・コード一式は、以下のファイルにあります。

<installdir> /jviews-maps89/codefragments/renderer/src/IlvRailroadRendererBeanInfo.java

@# 構文を使用して、CSS ファイルでインデックス・プロパティーを定義します。

メモ

すべての CSS レンダラーに一意の CSS ファイルを定義できます。ただし、CSS レンダラーをインスタンス化するたびに、長い CSS ファイルが解析されるため、CSS ファイルのサイズによっては時間がかかることがあります。この場合、CSS ファイルを小さな CSS ファイルに分けると、パフォーマンスの低下を防ぐことができます。

CSS の詳細については、『Rogue Wave®JViews DiagrammerSDK を使用した開発』の「スタイル・シート内での CSS 構文の使用」を参照してください。

現在のセクション

レンダラーの操作