ラベル SLD の投稿を表示しています。 すべての投稿を表示
ラベル SLD の投稿を表示しています。 すべての投稿を表示

2014年2月20日木曜日

36 - GeoEXT を使用した WFS-T 2 - レイヤのスタイルの修正

36-2 GeoServer のレイヤの スタイルの修正
GeoServer のレイヤのスタイルを修正して名称などを表示します。

tokyo_kuiki と akiruno_kukaku レイヤのスタイルの SLD（Styled Layer Descriptor）ファイルを作成します。

kuiki.sld
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 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"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
 <NamedLayer>
 <Name>kuiki green</Name>
  <UserStyle>
   <Name>kuiki green</Name>
   <Title>Kuiki green polygon</Title>
   <Abstract>Light green fill with grey outline</Abstract>
   <FeatureTypeStyle>
    <Rule>
     <PolygonSymbolizer>
       <!-- 面の色 -->
      <Fill>
       <CssParameter name="fill">#CCFFCC</CssParameter>
       <CssParameter name="fill-opacity">0.5</CssParameter>
      </Fill>
       <!-- 縁の色 -->
      <Stroke>
       <CssParameter name="strok">#999999</CssParameter>
       <CssParameter name="stroke-width">1</CssParameter>
      </Stroke>
     </PolygonSymbolizer>
     <TextSymbolizer>
　　　 <!-- 名称 -->
      <Label>
       <!-- tokyo_kuiki レイヤの名称の属性 -->
       <ogc:PropertyName>n03_004</ogc:PropertyName>
      </Label>
       <!-- フォント -->
      <Font>
       <CssParameter name="font-size">12</CssParameter>
       <CssParameter name="font-color">#CCCCCC</CssParameter>
      </Font>
     </TextSymbolizer>
    </Rule>
   </FeatureTypeStyle>
  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>


kukaku.sld
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 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"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
 <NamedLayer>
 <Name>kukaku yellow</Name>
  <UserStyle>
   <Name>kukaku yellow</Name>
   <Title>Kukaku yellow polygon</Title>
   <Abstract>Light yellow fill with grey outline</Abstract>
   <FeatureTypeStyle>
    <Rule>
     <PolygonSymbolizer>
      <Fill>
       <CssParameter name="fill">#FFFFCC</CssParameter>
       <CssParameter name="fill-opacity">1</CssParameter>
      </Fill>
      <Stroke>
       <CssParameter name="strok">#CCCCCC</CssParameter>
       <CssParameter name="stroke-width">1</CssParameter>
      </Stroke>
     </PolygonSymbolizer>
     <TextSymbolizer>
      <Label>
       <ogc:PropertyName>name</ogc:PropertyName>
      </Label>
      <Font>
       <CssParameter name="font-size">12</CssParameter>
       <CssParameter name="font-color">#CCCCCC</CssParameter>
      </Font>
     </TextSymbolizer>
    </Rule>
   </FeatureTypeStyle>
  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>


akiruno_kenchiku レイヤは倍率が高くなったとき表示します。

kenchiku.sld

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 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"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
 <NamedLayer>
 <Name>kenchiku green</Name>
  <UserStyle>
   <Name>kenchiku green</Name>
   <Title>Kenchiku green polygon</Title>
   <Abstract>Green fill</Abstract>
   <FeatureTypeStyle>
    <Rule>
      <!-- 表示倍率 -->
     <MinScaleDenominator>500</MinScaleDenominator>
     <MaxScaleDenominator>10000</MaxScaleDenominator>
     <PolygonSymbolizer>
      <Fill>
       <CssParameter name="fill">#99CC99</CssParameter>
       <CssParameter name="fill-opacity">1</CssParameter>
      </Fill>
      <Stroke>
       <CssParameter name="stroke">#336633</CssParameter>
       <CssParameter name="stroke-width">1</CssParameter>
      </Stroke>
     </PolygonSymbolizer>
    </Rule>
   </FeatureTypeStyle>
  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>


tokyo_pf レイヤは以前、作成した SLD ファイルを修正します。
倍率が高くなったとき表示して、名称を表示します。

tokyo_pf.sld
---
 <NamedLayer>
  <Name>Simple point</Name>
  <UserStyle>
   <Title>Tokyo Public Facility tokyo_pf: Simple point</Title>

   <FeatureTypeStyle>
    <Rule>
     <Name>Building: lightgreen</Name>
     <ogc:Filter>
      <ogc:PropertyIsEqualTo>
       <ogc:PropertyName>p02_002</ogc:PropertyName>
       <ogc:Literal>3</ogc:Literal>
      </ogc:PropertyIsEqualTo>
     </ogc:Filter>
      <!-- 表示倍率　追加 -->
     <MinScaleDenominator>500</MinScaleDenominator>
     <MaxScaleDenominator>10000</MaxScaleDenominator>
     <PointSymbolizer>
      <Graphic>
       <Mark>
        <WellKnownName>circle</WellKnownName>
        <Fill>
         <CssParameter name="fill">#99ff99</CssParameter>
        </Fill>
        <Stroke>
         <CssParameter name="stroke">#33ff33</CssParameter>
         <CssParameter name="stroke-width">2</CssParameter>
        </Stroke>
       </Mark>
       <Size>10</Size>
      </Graphic>
     </PointSymbolizer>
      <!-- 名称（ラベル）　追加 -->
     <TextSymbolizer>
      <Label>
       <ogc:PropertyName>p02_004</ogc:PropertyName>
      </Label>
      <Font>
       <CssParameter name="font-size">12</CssParameter>
       <CssParameter name="font-color">#CCCCCC</CssParameter>
      </Font>
       <!-- ポイントに対するラベルの位置 -->
      <LabelPlacement>
       <PointPlacement>
         <!-- ポイントとラベルの関わり -->
        <AnchorPoint>
          <!-- 水平方向（ラベルの中央） -->
         <AnchorPointX>0.5</AnchorPointX>
          <!-- 垂直方向（ラベルの底辺） -->
         <AnchorPointY>0.0</AnchorPointY>
        </AnchorPoint>
         <!-- ラベルのオフセット -->
        <Displacement>
          <!-- 水平方向 -->
         <DisplacementX>0</DisplacementX>
          <!-- 垂直方向（5ピクセル上） -->
         <DisplacementY>5</DisplacementY>
        </Displacement>
       </PointPlacement>
      </LabelPlacement>
     </TextSymbolizer>
    </Rule>
   </FeatureTypeStyle>
---

各 <FeatureTypeStyle> に同じ設定をします。
投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2013年11月27日水曜日

25 - あきる野市の地図にスタイルを設定 2 - 公共施設の色分け（GeoServer WMS）

25-2 GeoServer に SLD を設定（WMS）
GeoServer でスタイリングするときは、SLD を設定します。
色は次の表のようにします。

CLASS NAME       style              fillColor strokeColor name
building         style_lightgreen   #99ff99   #33ff33     Building
national_office  style_lightblue    #9999ff   #3333ff     National Office
local_office     style_lightred     #ff9999   #ff3333     Local Office 
welfare          style_lightyellow  #ffff99   #ffff33     Welfare
police           style_lightsyan    #99ffff   #33ffff     Police 
fire_station     style_lightmagenta #ff99ff   #ff33ff     Fire Station 
school           style_green        #33ff33   #00ff00     School 
hospital         style_orange       #ff9933   #ff6600     Hospital 
post             style_red          #ff0000   #ff0000     Post Office
benefits         style_yellow       #ffff00   #ff9933     Benefits
other            style_grey         #999999   #999999     Other


GeoServer のホームページの GeoServer User Manual
http://docs.geoserver.org/stable/en/us

の Styling
http://docs.geoserver.org/stable/en/user/er/styling/index.html

にある Introduction to SLD
http://docs.geoserver.org/latest/en/user/styling/sld-introduction.html

の「A basic style example」にポイント（Point）のスタイリングの例があります。
これを公共施設レイヤ（tokyo_pf）用に修正します。

user@debian7-vmw:~$ vim mapdata/nlni/public_facilities/tokyo_pf.sld
<?xml version="1.0" encoding="UTF-8"?>
<!-- encoding ISO-8859-1 を UTF-8 に -->
<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>Simple point</Name>
  <UserStyle>
   <Title>Tokyo Public Facility tokyo_pf: Simple point</Title>

   <FeatureTypeStyle>
    <Rule>
     <Name>Building: lightgreen</Name>
     <ogc:Filter>
      <ogc:PropertyIsEqualTo>
       <ogc:PropertyName>p02_002</ogc:PropertyName>
       <ogc:Literal>3</ogc:Literal>
      </ogc:PropertyIsEqualTo>
     </ogc:Filter>
     <PointSymbolizer>
      <Graphic>
       <Mark>
        <WellKnownName>circle</WellKnownName>
        <Fill>
         <CssParameter name="fill">#99ff99</CssParameter>
        </Fill>
        <Stroke>
         <CssParameter name="stroke">#33ff33</CssParameter>
         <CssParameter name="stroke-width">2</CssParameter>
        </Stroke>
       </Mark>
       <Size>10</Size>
      </Graphic>
     </PointSymbolizer>
    </Rule>
   </FeatureTypeStyle>

   <FeatureTypeStyle>
    <Rule>
     <Name>National Office: lightblue</Name>
     <ogc:Filter>
      <ogc:PropertyIsEqualTo>
       <ogc:PropertyName>p02_002</ogc:PropertyName>
       <ogc:Literal>11</ogc:Literal>
      </ogc:PropertyIsEqualTo>
     </ogc:Filter>
     <PointSymbolizer>
      <Graphic>
       <Mark>
        <WellKnownName>circle</WellKnownName>
        <Fill>
         <CssParameter name="fill">#9999ff</CssParameter>
        </Fill>
        <Stroke>
         <CssParameter name="stroke">#3333ff</CssParameter>
         <CssParameter name="stroke-width">2</CssParameter>
        </Stroke>
       </Mark>
       <Size>10</Size>
      </Graphic>
     </PointSymbolizer>
    </Rule>
   </FeatureTypeStyle>

   <FeatureTypeStyle>
    <Rule>
     <Name>Local Office: lightred</Name>
     <ogc:Filter>
      <ogc:PropertyIsEqualTo>
       <ogc:PropertyName>p02_002</ogc:PropertyName>
       <ogc:Literal>12</ogc:Literal
      </ogc:PropertyIsEqualTo>
     </ogc:Filter>
     <PointSymbolizer>
      <Graphic>
       <Mark>
        <WellKnownName>circle</WellKnownName>
        <Fill>
         <CssParameter name="fill">#ff9999</CssParameter>
        </Fill>
        <Stroke>
         <CssParameter name="stroke">#ff3333</CssParameter>
         <CssParameter name="stroke-width">2</CssParameter>
        </Stroke>
       </Mark>
       <Size>10</Size>
      </Graphic>
     </PointSymbolizer>
    </Rule>
   </FeatureTypeStyle>

   <FeatureTypeStyle>
    <Rule>
     <Name>Welfare: lightyellow</Name>
     <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>13</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#ffff99</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#ffff33</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>Police: lightsyan</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>14</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#99ffff</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#33ffff</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>Fire Station: lightmagenta</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>15</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#ff99ff</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#ff33ff</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>School: green</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>16</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#33ff33</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#00ff00</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>Hospital: orange</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>17</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#ff9933</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#ff6600</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>Post Office: red</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>18</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#ff0000</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#ff0000</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>Benefits: yellow</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>19</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#ffff00</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#ff9933</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

    <FeatureTypeStyle>
     <Rule>
      <Name>other: grey</Name>
      <ogc:Filter>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>p02_002</ogc:PropertyName>
        <ogc:Literal>9</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Filter>
      <PointSymbolizer>
       <Graphic>
        <Mark>
         <WellKnownName>circle</WellKnownName>
         <Fill>
          <CssParameter name="fill">#999999</CssParameter>
         </Fill>
         <Stroke>
          <CssParameter name="stroke">#999999</CssParameter>
          <CssParameter name="stroke-width">2</CssParameter>
         </Stroke>
        </Mark>
        <Size>10</Size>
       </Graphic>
      </PointSymbolizer>
     </Rule>
    </FeatureTypeStyle>

  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>

作成した tokyo_pf.sld ファイルを GeoServer に追加します。

a ログインした GeoServer ページの左側の欄の Data -> Styles をクリックします。





b Styles ページの「Add a new style」をクリックします。





c New style ページで

Name: tokyo_pf

と入力します。




d New style ページの下の方の SLD file の「参照」ボタンをクリックします。


e 「ファイルのアップロード」で tokyo_pf.sld を選択し「開く」ボタンをクリックします。






f 「Upload...」リンクをクリックします。







g 「Validate」ボタンをクリックします。
h 「no validation error」と表示されたら「submit」ボタンをクリックします。





i 左側の欄の Data -> Layers をクリックします。







j 「nlni」の「tokyo_pf」をクリックします。





k ページ上部の「Publishing」タブをクリックします。







l 「WMS Setting」の「Default Style」を「tokyo_pf」にします。
（他は変更しません。）


m ページ下部の「Save」ボタンをクリックします。






25-3 スタイリングの確認
a 左側の欄の「Layer Preview」をクリックします。







b 「npn:tokyo_pf」の「OpenLayers」リンクをクリックします。


投稿者 時刻: 0 件のコメント:
ラベル: , ,

2013年11月19日火曜日

17 - Open Street Map 4 - スタイリングの確認

17-5 OpenStreetMap スタイリングの確認a 左側の欄の「Layer Preview」をクリックします。





b 「npn:roads」の「OpenLayers」リンクをクリックします。



c 「wms を開く」ダイアログで「ファイルを保存する」を選択しボタンをクリックします。





wms の内容は次のようになっています。

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE ServiceExceptionReport SYSTEM "http://localhost:8080/geoserver/schemas/wms/1.1.1/WMS_exception_1_1_1.dtd"> <ServiceExceptionReport version="1.1.1" >   <ServiceException>
      The requested Style can not be used with this layer.  The style specifies an attribute of aeroway and the layer is: npn:roads
</ServiceException></ServiceExceptionReport>


osm_roads スタイルの Runway のデータを削除します。
（下記の方法で時間がかかる場合は、osm_roads.sld ファイルを修正してアップロードしてください。）
c 左側の欄の Data -> Styles をクリックします。






d osm_roads をクリックします。





 e <!-- Runways from openstreetmap --> から
<-- end of zoom level b --> までを削除します。
（「roads」の「Default Style」が「osm_roads」であることを確認します。）

f 左側の欄の「Layer Preview」をクリックします。







g 「npn:roads」の「OpenLayers」リンクをクリックします。
「wms を開く」ダイアログで「ファイルを保存する」を選択しボタンをクリックします。

wms の内容は次のようになっています。


<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE ServiceExceptionReport SYSTEM "http://localhost:8080/geoserver/schemas/wms/1.1.1/WMS_exception_1_1_1.dtd"> <ServiceExceptionReport version="1.1.1" >   <ServiceException>
      The requested Style can not be used with this layer.  The style specifies an attribute of highway and the layer is: npn:roads
</ServiceException></ServiceExceptionReport>

osm_roads.sld ファイルのすべての
<NamedLayer> の <Name> を npn:roads にします。<-1
<Rule> の <Name> を npn:roads にします。これは表示に影響はない（?）と思います。<-2
<ogc:Filter> の <ogc:PropertyName> を type にします。<-3

---
<NamedLayer>
 <Name>npn:roads</Name> <-1
  <UserStyle>
   <Title>A boring default style</Title>
   <Abstract>A sample style that just prints out a green line</Abstract>

   <!-- start of zoom level 3 -->

   <FeatureTypeStyle>
    <Rule>
     <Name>npn:roads</Name> <-2
     <Title>freeways- outer zoom level</Title>
     <Abstract>freeways style openstreetmap data</Abstract>
     <ogc:Filter>
      <ogc:Or>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>type</ogc:PropertyName> <-3
        <ogc:Literal>residential</ogc:Literal>
       </ogc:PropertyIsEqualTo>
       <ogc:PropertyIsEqualTo>
        <ogc:PropertyName>type</ogc:PropertyName> <-3
        <ogc:Literal>unclassified</ogc:Literal>
       </ogc:PropertyIsEqualTo>
      </ogc:Or>
     </ogc:Filter>
     <MinScaleDenominator>1000</MinScaleDenominator>
     <MaxScaleDenominator>4000</MaxScaleDenominator>
     <LineSymbolizer>
      <Stroke>
       <CssParameter name="stroke">#f4faf6</CssParameter>
       <CssParameter name="stroke-width">12</CssParameter>
       <CssParameter name="stroke-linejoin">round</CssParameter>
      </Stroke>
     </LineSymbolizer>
     <TextSymbolizer>
      <Label>
       <ogc:PropertyName>name</ogc:PropertyName>
      </Label>
      <Font>
       <CssParameter name="font-size">10</CssParameter>
       <CssParameter name="font-family">Arial</CssParameter>
       <CssParameter name="font-color">#eeeeee</CssParameter>
      </Font>
     <LabelPlacement>
      <LinePlacement>
       <PerpendicularOffset>
         0
       </PerpendicularOffset>
      </LinePlacement>
     </LabelPlacement>
     <Halo>
      <Radius>
       <ogc:Literal>1</ogc:Literal>
      </Radius>
      <Fill>
       <CssParameter name="fill">#f4faf6</CssParameter>
      </Fill>
     </Halo>
     <Fill>
      <CssParameter name="fill">#808080</CssParameter>
     </Fill>
     <VendorOption name="maxDisplacement">50</VendorOption>
     <VendorOption name="labelAllGroup">true</VendorOption>
     <VendorOption name="removeOverlaps">true</VendorOption>
     <VendorOption name="followLine">true</VendorOption>
     <VendorOption name="group">true</VendorOption>
    </TextSymbolizer>
   </Rule>
  </FeatureTypeStyle>
---

roads の type の内容は次の通りです。

user@debian7-vmw:~$ psql osm
psql (9.1.9)
"help" でヘルプを表示します.

osm=> \dt
               リレーションの一覧
 スキーマ |       名前       |    型    | 所有者 
----------+------------------+----------+--------
 public   | geometry_columns | テーブル | user
 public   | roads            | テーブル | user
 public   | spatial_ref_sys  | テーブル | user
(3 行)

osm=> SELECT DISTINCT type FROM roads;
       type      
------------------
_unclassified
<pedestrian>
abandoned
bridleway
bus_guideway
bus_stop
byway
construction
constructions
corridor
crossing
cy[
cycleway
destroyed
disused
elevator
emergency_access
escalator
escape
ferry
footpath
footway
fre
ire
living_street
mini_roundabout
minor
motorway
motorway_link
old_trunk
path
payh
pedestrian
platform
primary
primary_link
proposed
raceway
residential
residential;seco
residential;unc
residential;uncl
rest_area
road
secondary
secondary_link
service
service;road
services
slope
steps
tertiary
tertiary_link
track
traffic_signals
trunk
trunk_link
turning_loop
unclassified
unclassified;re
unclassified;res
undefined
unsurfaced
yellow_line
yes

(END):q

このうち、osm_roads.sld に設定されているものは次の通りです。

residential
unclassified
primary
secondary
tertiary
motorway
trunk


倍率によって、表示できる道路、線の太さ、色が変わるように設定されています。
「Layer Preview」をクリックして「npn:roads」の「OpenLayers」リンクをクリックしてください。
最初の倍率では何も表示されません。
拡大すると表示されるようになります。
（メモリ３個目。表示に時間がかかりました。）

Throw GeoServer a curve (and it will be labeled)
http://blog.geoserver.org/2009/01/08/throw-geoserver-a-curve/

に説明があります。
これによってラベルが道路に沿って表示されます。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

17 - Open Street Map 3 - スタイリングの設定

17-4 OpenStreetMap のスタイリングの設定

GeoServer and OpenStreetMap ページ
http://blog.geoserver.org/2009/01/30/geoserver-and-openstreetmap/

の「Making sense of the data」の「map key」リンクをクリックすると

Map Features-OpenStreetMap Wiki ページ
http://wiki.openstreetmap.org/wiki/Map_Features

が表示されます。
Available languages の「日本語」リンクをクリックします。
Ja:Map Features-OpenStreetMap Wiki ページの「ご注意」内の「Japan tagging」をクリックします。
ここには日本の道路の表示についてかかれています。
GeoServer and OpenStreetMap ページの Styling の 「final SLD」では英国の道路に対応していますが、これを使ってスタイリングします。


1「final SLD」リンクをクリックしてダウンロードします。
2 osm_roadsld.zip を解凍します。

user@debian7-vmw:~/ダウンロード$ unzip osm_roadssld.zip
Archive: osm_roadssld.zip
inflating: osm_roads.sld

3 ログインした GeoServer ページの左側の欄の Data -> Styles をクリックします。





4 Styles ページの「Add a new style」をクリックします。





5 New style ページで

Name: osm_roads
Workspace: npn

と入力します。


6 New style ページの下の方の SLD file の「参照」ボタンをクリックします。


7 「ファイルのアップロード」で osm_roads.sld を選択し「開く」ボタンをクリックします。





8 「Upload...」リンクをクリックします。



9 「Validate」ボタンをクリックします。
次のようなエラーが表示されました。

line 23: cvc-complex-type.2.4.a: Invalid content was found starting with element 'Name'. One of '{"http://www.opengis.net/sld":Symbolizer}' is expected.
line 66: cvc-complex-type.2.4.a: Invalid content was found starting with element 'Halo'. One of '{"http://www.opengis.net/sld":VendorOption}' is expected.
---

h GeoServer and OpenStreetMap ページ
http://blog.geoserver.org/2009/01/30/geoserver-and-openstreetmap/

のコメントと

Throw GeoServer a curve (and it will be labeled)ページ
http://blog.geoserver.org/2009/01/08/throw-geoserver-a-curve/

を参考に、osm_roads をつぎのように修正します。
該当するすべての <FeatureTypeStyle> で

---
<FeatureTypeStyle>
 <Rule>  
  <Name>topp:planet_osm_line</Name>
  <Title>freeways- outer zoom level</Title>
  <Abstract>freeways style openstreetmap data</Abstract>  
  <ogc:Filter>
   <ogc:Or>
    <ogc:PropertyIsEqualTo>
     <ogc:PropertyName>highway</ogc:PropertyName>
     <ogc:Literal>residential</ogc:Literal>
    </ogc:PropertyIsEqualTo>
    <ogc:PropertyIsEqualTo>
     <ogc:PropertyName>highway</ogc:PropertyName>
     <ogc:Literal>unclassified</ogc:Literal>
    </ogc:PropertyIsEqualTo>
   </ogc:Or>
  </ogc:Filter>
  <!-- Min および MaxScaleDenominator を LineSymbolizer の直前に Property(type) によって値が違うので一つずつ修正してください -->
  <MinScaleDenominator>1000</MinScaleDenominator>
  <MaxScaleDenominator>4000</MaxScaleDenominator>
  <!-- ここまで -->
  <LineSymbolizer>
   <Stroke>
    <CssParameter name="stroke">#f4faf6</CssParameter>
    <CssParameter name="stroke-width">12</CssParameter>
    <CssParameter name="stroke-linejoin">round</CssParameter>
   </Stroke>
  </LineSymbolizer>
  <TextSymbolizer>
   <Label>
    <ogc:PropertyName>name</ogc:PropertyName>
   </Label>   
   <Font>
    <CssParameter name="font-size">10</CssParameter>
    <CssParameter name="font-family">Arial</CssParameter>
    <CssParameter name="font-color">#eeeeee</CssParameter>
   </Font>         
   <LabelPlacement>
    <LinePlacement>
     <PerpendicularOffset>
       0
     </PerpendicularOffset>
    </LinePlacement>
   </LabelPlacement>
   <Halo>   
    <Radius>
     <ogc:Literal>1</ogc:Literal>
    </Radius>
    <Fill>
     <CssParameter name="fill">#f4faf6</CssParameter>
    </Fill>
   </Halo>   
   <Fill>
    <CssParameter name="fill">#808080</CssParameter>
   </Fill>
   <!-- VendorOption を TextSymbolizer 終了タグの直前に -->
   <VendorOption name="maxDisplacement">50</VendorOption>
   <VendorOption name="labelAllGroup">true</VendorOption>
   <VendorOption name="removeOverlaps">true</VendorOption>
   <VendorOption name="followLine">true</VendorOption>
   <VendorOption name="group">true</VendorOption>
    <!-- ここまで -->
  </TextSymbolizer>
 </Rule>
</FeatureTypeStyle>
---

no validation error と表示されたら「submit」ボタンをクリックします。




i 左側の欄の Data -> Layers をクリックします。






j 「osm」の「roads」をクリックします。
k ページ上部の「Publishing」タブをクリックします。
l 「WMS Setting」の「Default Style」を「osm_roads」にします。
（他は変更しません。）

m ページ下部の「Save」ボタンをクリックします。

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2009年12月27日日曜日

OpenLayers 41j Styled Layer Descriptor (SLD) - MapServer サーバサイドサポート

MapServer では、サーバーサイドとクライアントサイドで SLD をサポートしています。

MapServer
SLD サイト
http://mapserver.org/ogc/sld.html?highlight=sld

MapServer で使用する SLD XML ドキュメントは、サポートされていないフィーチャ（要素またはタグ）があるので修正が必要です。


sld_line_sample2.xml

<?xml version="1.0" encoding="utf-8"?>
 <StyledLayerDescriptor version="1.0.0"
  xmlns:sld="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"
  xsi:schemaLocation="http://www.opengis.net/sld
  http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
   <sld:NamedLayer>
    <sld:Name>shinkansen</sld:Name>
    <Title>xxx</Title>
    <sld:UserStyle>
     <sld:FeatureTypeStyle>
      <sld:Rule>
       <Geometry>
        <ogc:PropertyName>center-line</ogc:PropertyName>
       </Geometry>
       <sld:Stroke>
        <sld:CssParameter name="stroke">#00ff00</sld:CssParameter>
        <sld:CssParameter name="stroke-width">2</sld:CssParameter>
       </sld:Stroke>
      </sld:LineSymbolizer>
     </sld:Rule>
    </sld:FeatureTypeStyle>
   </sld:UserStyle>
  </sld:NamedLayer>

</StyledLayerDescriptor>

次のようにブラウザのアドレス欄に入力します。
（比較のために、現在使用している東京都の地図の投影で表示しています。）

http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/tokyo_pf_pgis.map&SERVICE=WMS&VERSION=1.1.1&Request=GetMap&srs=EPSG:2456&format=image/png&style=&bbox=-279000,1054000,-185000,1104000&width=600&height=300&LAYERS=shinkansen,gyoseikai&SLD=http://localhost/openlayersTokyoproj/sld_line_simple2.xml

MapServer では、WMS サービスでスタイルを設定できます。

投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2009年12月26日土曜日

OpenLayers 41i Styled Layer Descriptor (SLD) - SLD XML ドキュメント コード

sld_line_simple.xml は次のように設定してみました。

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor version="1.0.0"
    xmlns:sld="http://www.opengis.net/sld"
    xmlns:ogc="http://www.opengis.net/ogc"
    xmlns:gml="http://www.opengis.net/gml"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<sld:NamedLayer>
    <sld:Name>Shinkansen</sld:Name>
    <sld:UserStyle>
      <sld:Name>ShinkansenDefault</sld:Name>
      <sld:IsDefault>1</sld:IsDefault>
      <sld:FeatureTypeStyle>
        <sld:Rule>
          <sld:Name>justAStyler</sld:Name>
          <sld:LineSymbolizer>
            <sld:Stroke>
              <sld:CssParameter name="stroke">
                <ogc:Literal>#0000ff</ogc:Literal>
              </sld:CssParameter>
              <sld:CssParameter name="stroke-width">
                <ogc:Literal>2</ogc:Literal>
              </sld:CssParameter>
            </sld:Stroke>
          </sld:LineSymbolizer>
        </sld:Rule>
      </sld:FeatureTypeStyle>
    </sld:UserStyle>
  </sld:NamedLayer>


  <sld:NamedLayer>
    <sld:Name>JRLine</sld:Name>
    <sld:UserStyle>
      <sld:Name>JRLineDefault</sld:Name>
      <sld:IsDefault>1</sld:IsDefault>
      <sld:FeatureTypeStyle>
        <sld:Rule>
          <sld:Name>justAStyler</sld:Name>
          <sld:LineSymbolizer>
            <sld:Stroke>
              <sld:CssParameter name="stroke">
                <ogc:Literal>#ff0000</ogc:Literal>
              </sld:CssParameter>
              <sld:CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </sld:CssParameter>
            </sld:Stroke>
          </sld:LineSymbolizer>
        </sld:Rule>
      </sld:FeatureTypeStyle>
    </sld:UserStyle>
  </sld:NamedLayer>


  <sld:NamedLayer>
    <sld:Name>PublicLine</sld:Name>
    <sld:UserStyle>
      <sld:Name>PublicLineDefault</sld:Name>
      <sld:IsDefault>1</sld:IsDefault>
      <sld:FeatureTypeStyle>
        <sld:Rule>
          <sld:Name>justAStyler</sld:Name>
          <sld:LineSymbolizer>
            <sld:Stroke>
              <sld:CssParameter name="stroke">
                <ogc:Literal>#990099</ogc:Literal>
              </sld:CssParameter>
              <sld:CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </sld:CssParameter>
            </sld:Stroke>
          </sld:LineSymbolizer>
        </sld:Rule>
      </sld:FeatureTypeStyle>
    </sld:UserStyle>
  </sld:NamedLayer>


  <sld:NamedLayer>
    <sld:Name>PrivateLine</sld:Name>
    <sld:UserStyle>
      <sld:Name>PrivateLineDefault</sld:Name>
      <sld:IsDefault>1</sld:IsDefault>
      <sld:FeatureTypeStyle>
        <sld:Rule>
          <sld:Name>justAStyler</sld:Name>
          <sld:LineSymbolizer>
            <sld:Stroke>
              <sld:CssParameter name="stroke">
                <ogc:Literal>#00ff00</ogc:Literal>
              </sld:CssParameter>
              <sld:CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </sld:CssParameter>
            </sld:Stroke>
          </sld:LineSymbolizer>
        </sld:Rule>
      </sld:FeatureTypeStyle>
    </sld:UserStyle>
  </sld:NamedLayer>


  <sld:NamedLayer>
    <sld:Name>ThirdSecLine</sld:Name>
    <sld:UserStyle>
      <sld:Name>ThirdSecLineDefault</sld:Name>
      <sld:IsDefault>1</sld:IsDefault>
      <sld:FeatureTypeStyle>
        <sld:Rule>
          <sld:Name>justAStyler</sld:Name>
          <sld:LineSymbolizer>
            <sld:Stroke>
              <sld:CssParameter name="stroke">
                <ogc:Literal>#999900</ogc:Literal>
              </sld:CssParameter>
              <sld:CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </sld:CssParameter>
            </sld:Stroke>
          </sld:LineSymbolizer>
        </sld:Rule>
      </sld:FeatureTypeStyle>
    </sld:UserStyle>
  </sld:NamedLayer>

</sld:StyledLayerDescriptor>

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2009年12月25日金曜日

OpenLayers 41h Styled Layer Descriptor (SLD) - 鉄道 の WFS のHTML コード2

鉄道（railroad）の全部のレイヤを設定した HTML コードです。
publicline
privateline
thirdsec

openlayers41_sld.html

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers41 SLD 1</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>


  <script type="text/javascript">
   var format = new OpenLayers.Format.SLD();
   var map, sld, layerName, baselayer, layer1, layer2, layer3, layer4, layer5; // layer3-5 追加

   function init() {
    var url = "./sld_line_simple.xml";
    OpenLayers.loadURL(url, null, null, loadSuccess);
   }

// getDefaultStyle 追加
   function getDefaultStyle(sld, layerName) {
    var styles = sld.namedLayers[layerName].userStyles;
    var style;
    for(var i=0; i<styles.length; ++i) {
     style = styles[i];
     if(style.isDefault) {
      break;
     }
    }
    return style;
   }


   function loadSuccess(req) {
    OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
    sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
    options = {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    };
    map = new OpenLayers.Map("map", options);
// ここまで    
    baselayer = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
      layers: 'kukaku',
      format: 'image/png'
    });


    layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'shinkansen',　 // 修正
      transparent: true,
      format: 'image/png'
     },{
      styleMap: new OpenLayers.StyleMap(sld, "Shinkansen"),
      projection: new OpenLayers.Projection("EPSG:4326")
    });
// 「JR 在来線」レイヤ追加
    layer2 = new OpenLayers.Layer.WFS( "JR Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'jrline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false, // 表示に時間がかかるので初期表示をしない
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "JRLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });
//ここから追加
// 「公営鉄道」レイヤ追加
    layer3 = new OpenLayers.Layer.WFS( "Public Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'publicline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PublicLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// 「民営鉄道」レイヤ追加
    layer4 = new OpenLayers.Layer.WFS( "Private Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'privateline',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "PrivateLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// 「第３セクター」レイヤ追加
    layer5 = new OpenLayers.Layer.WFS( "Third Sector Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'thirdsec',
      transparent: true,
      format: 'image/png'
     },{
      visibility: false,
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "ThirdSecLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

// ここまで

    map.addLayers([baselayer, layer1, layer2, layer3, layer4, layer5]); // layer3-5 追加

    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.zoomToMaxExtent();
   }

  </script>
 </head>
 <body onload="init()">
  <h1 id="title">OpenLayers41 SLD 1</h1>
  <div id="map" class="smallmap"></div>
 </body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2009年12月24日木曜日

OpenLayers 41g Styled Layer Descriptor (SLD) - 鉄道 の WFS のHTML コード1

鉄道（railroad）の他のレイヤを設定してみます。
最初に、「JR 在来線」レイヤを追加してみます。

---
  <script type="text/javascript">
   var format = new OpenLayers.Format.SLD();
   var map, sld, layerName, baselayer, layer1, layer2; // layer2 追加

   function init() {
    var url = "./sld_line_simple.xml";
    OpenLayers.loadURL(url, null, null, loadSuccess);
   }
// getDefaultStyle 追加
   function getDefaultStyle(sld, layerName) {
    var styles = sld.namedLayers[layerName].userStyles;
    var style;
    for(var i=0; i<styles.length; ++i) {
     style = styles[i];
     if(style.isDefault) {
      break;
     }
    }
    return style;
   }


   function loadSuccess(req) {
    OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // 追加
    sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
    options = {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    };
    map = new OpenLayers.Map("map", options);

// ここまで
//ここから追加

    baselayer = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
      layers: 'kukaku',
      format: 'image/png'
    });

    layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'shinkansen',　 // 修正
      transparent: true,
      format: 'image/png'
     },{
      styleMap: new OpenLayers.StyleMap(sld, "Shinkansen"),
      projection: new OpenLayers.Projection("EPSG:4326")
    });
// 「JR 在来線」レイヤ追加
    layer2 = new OpenLayers.Layer.WFS( "JR Line",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'jrline',
      transparent: true,
      format: 'image/png'
     },{
      styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "JRLine")),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

    map.addLayers([baselayer, layer1, layer2]); // layer2 追加
// ここまで
// WFS のときはマップコントロールをこの位置へ
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.zoomToMaxExtent();
   }

  </script>
---

sld_line_simple.xml に JRline 用の sld を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor version="1.0.0"
    xmlns:sld="http://www.opengis.net/sld"
    xmlns:ogc="http://www.opengis.net/ogc"
    xmlns:gml="http://www.opengis.net/gml"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
 <sld:NamedLayer>
  <sld:Name>Shinkansen</sld:Name>
  <sld:UserStyle>
   <sld:Name>ShinkansenDefault</sld:Name>
   <sld:IsDefault>1</sld:IsDefault>
   <sld:FeatureTypeStyle>
    <sld:Rule>
     <sld:Name>justAStyler</sld:Name>
     <sld:LineSymbolizer>
      <sld:Stroke>
       <sld:CssParameter name="stroke">
        <ogc:Literal>#0000ff</ogc:Literal>
       </sld:CssParameter>
       <sld:CssParameter name="stroke-width">
        <ogc:Literal>1</ogc:Literal>
       </sld:CssParameter>
      </sld:Stroke>
     </sld:LineSymbolizer>
    </sld:Rule>
   </sld:FeatureTypeStyle>
  </sld:UserStyle>
 </sld:NamedLayer>

<!-- JRLine 用 -->

 <sld:NamedLayer>
  <sld:Name>JRLine</sld:Name>
  <sld:UserStyle>
   <sld:Name>JRLineDefault</sld:Name>
   <sld:IsDefault>1</sld:IsDefault>
   <sld:FeatureTypeStyle>
    <sld:Rule>
     <sld:Name>justAStyler</sld:Name>
     <sld:LineSymbolizer>
      <sld:Stroke>
       <sld:CssParameter name="stroke">
        <ogc:Literal>#ff0000</ogc:Literal>
       </sld:CssParameter>
       <sld:CssParameter name="stroke-width">
        <ogc:Literal>1</ogc:Literal>
       </sld:CssParameter>
      </sld:Stroke>
     </sld:LineSymbolizer>
    </sld:Rule>
   </sld:FeatureTypeStyle>
  </sld:UserStyle>
 </sld:NamedLayer>

</sld:StyledLayerDescriptor>

ブラウザで表示すると次のように警告が表示されます。



データが多いので表示に時間がかかるようです。
「処理を続行」ボタンをクリックし続けて地図を表示します。

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2009年12月22日火曜日

OpenLayers 41f Styled Layer Descriptor (SLD) - Shinkansen の WFS のHTML コード

Shinkansen のレイヤを WFS で表示したときの HTML コードを作成します。
openlayers_sld.html を修正します。

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers41 SLD 1</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>

<!--SLD コード -->

  <script type="text/javascript">
   var format = new OpenLayers.Format.SLD();
   var map, sld, layerName, baselayer, layer1;

   function init() {
    var url = "./sld_line_simple.xml";
    OpenLayers.loadURL(url, null, null, loadSuccess);
   }


   function loadSuccess(req) {
    OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // 追加
    sld = format.read(req.responseXML || req.responseText);
// 東京都用 map の設定
    options = {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    };
    map = new OpenLayers.Map("map", options);

// ここまで

    baselayer = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
      layers: 'kukaku',
      format: 'image/png'
    });

    var styles = sld.namedLayers["Shinkansen"].userStyles;
    var style = styles[0];
    layer1 = new OpenLayers.Layer.WFS( "Shinkansen", // 修正
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_pf_pgis.map',
      typename: 'shinkansen',　 // 修正
      transparent: true,
      format: 'image/png'
     },{
      styleMap: new OpenLayers.StyleMap(style),
      projection: new OpenLayers.Projection("EPSG:4326")
    });

    map.addLayers([baselayer, layer1]);
// ここまで
// WFS のときはマップコントロールをこの位置へ
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.ScaleLine());
    map.zoomToMaxExtent();
   }
  </script>

<!--body 部分 -->

 </head>
 <body onload="init()">
  <h1 id="title">OpenLayers41 SLD 1</h1>
  <div id="map" class="smallmap"></div>
 </body>
</html>



OpenLayers.Layer.WMS でやってみましたが、スタイルが反映されませんでした。
以前のバージョンでは、OpenLayers.Layer.WMS で SLD が適用できたようですが、OpenLayers バージョン 2.8 では確認できませんでした。
投稿者 時刻: 0 件のコメント:
ラベル: , ,
登録: コメント (Atom)