2013年11月28日木曜日

26 - あきる野市の地図で属性のポップアップ表示(WMS)

WMS レイヤの属性のポップアップ表示
東京都の公共施設のレイヤ(tokyo_pf)の WMS レイヤの属性をポップアップ表示させる機能を追加します。GeoServer が配信したレイヤで動作します。

この機能は、proxy.cgi が実行されていないと動作しないので、24章で WFS で地図を表示して確認しました。また、クリックしやすいように25章でポイントのスタイルを設定しました。

Eclipse を起動して ol003-nippon_bmi_akiruno_pgis.html を開きます。
example フォルダにある getfeatureinfo-popup.html を参考にコードを編集します。

a メニューの「ファイル」->「開く」をクリックします。







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「example」->「getfeatureinfo-popup.html」をクリックして選択し、「OK」ボタンをクリックします。




c 「ol003-nippon_bmi_akiruno_pgis.html」をコピーして、ファイル名「ol005-nippon_bmi_akiruno_pgis.html」にします。
d 「getfeatureinfo-popup.html」の53行目あたりの「info = ...」から71行目あたりの「info.active()」までをコピーします。
e 「ol005-nippon_bmi_akiruno_pgis.html」の「map.addLayers([...」の後に貼り付けます。
f javascriptの一部を次のように修正します。
---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, info; // info 追加
---
  layer4 = new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
   layers: 'npn:tokyo_pf',
   transparent: true
  });
---
  info = new OpenLayers.Control.WMSGetFeatureInfo({
   url: 'http://192.168.1.200:8080/geoserver/wms',
   title: 'Identify features by clicking',
   queryVisible: true,
   eventListeners: {
    getfeatureinfo: function(event) {
     map.addPopup(new OpenLayers.Popup.FramedCloud(
      "chicken",
      map.getLonLatFromPixel(event.xy),
      null,
      event.text,
      null,
      true
     ));
    }
   }
  });
  map.addControl(info);
  info.activate();
---

レイヤが表示されないときは、url のドメイン部分の "localhost" を "192.168.1.200(GeoServer のときは 192.168.1.200:8080)" に変更します。
Eclipse の実行ボタンをクリックして地図を表示したときは、公共施設のポイントをクリックすると次のように表示されます。











正常に機能させるときは、Web ブラウザのアドレスバーに

http://192.168.1.200/mapsite/openlayersTokyoproj/ol005-nippon_bmi_akiruno_pgis.html

と入力して Enter キーを押します。公共施設のポイントをクリックすると次のように表示されます。

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」リンクをクリックします。


25 - あきる野市の地図にスタイルを設定 1 - 公共施設の色分け(MapServer WMS)

25-1 マップファイルを設定して公共施設の色分けする(WMS)
公共施設のデータを使って、Point表示の色や大きさ変更します。
クライアント側(OpenLayers など)で設定する方法は難しいので、サーバ側(MapServer や GeoServer)で設定します。

国土数値情報の公共施設の説明から、大分類コードしたがってデータをレイヤ別に表示します。

公共施設大分類コード 〈ファイル名称:PubFacMaclassCd〉
コード  対応する内容
3       建物
9       その他
11      国の機関
12      地方公共団体
13      厚生機関
14      警察機関
15      消防署
16      学校
17      病院
18      郵便局
19      福祉施設


CLASS NAME       COLOR        OUTLINECOLOR
building         153 255 153   51 255  51
national_office  153 153 255   51  51 255
local_office     255 153 153  255  51  51
welfare          255 255 153  255 255  51
police           153 255 255   51 255 255
fire_station     255 153 255  255  51 255
school            51 255  51   00 255  00
hospital         255 153  51  255 102  00
post             255  00  00  255  00  00
benefits         255 255  00  255 153  51
other            153 153 153  153 153 153


シェイプファイルの情報を見てみます。

user@debian7-vmw:~/ダウンロード/nlni/public_facilities$ $ ogrinf-summary tokyo_pf P02-06_13-g_PublicFacility
INFO: Open of `tokyo_pf'
      using driver `ESRI Shapefile' successful.

Layer name: P02-06_13-g_PublicFacility
Geometry: Point
Feature Count: 14414
Extent: (139.015694, 26.640098) - (142.203778, 35.841866)
Layer SRS WKT:
(unknown)
P02_001: String (5.0)
P02_002: String (2.0)
P02_003: String (5.0)
P02_004: String (84.0)
P02_005: String (70.0)
P02_006: String (1.0)
P02_007: String (12.0)

情報の詳細を表示してみます。(ctrl + c キーで途中で止めます。)

user@debian7-vmw:~/ダウンロード/nlni/public_facilities$ ogrinfo tokyo_pf P02-06_13-g_PublicFacility
INFO: Open of `tokyo_pf'
      using driver `ESRI Shapefile' successful.

Layer name: P02-06_13-g_PublicFacility
Geometry: Point
Feature Count: 14414
Extent: (139.015694, 26.640098) - (142.203778, 35.841866)
Layer SRS WKT:
(unknown)
P02_001: String (5.0)
P02_002: String (2.0)
P02_003: String (5.0)
P02_004: String (84.0)
P02_005: String (70.0)
P02_006: String (1.0)
P02_007: String (12.0)
OGRFeature(P02-06_13-g_PublicFacility):0
  P02_001 (String) = 13101
  P02_002 (String) = 3
  P02_003 (String) = 03001
  P02_004 (String) = ニューオータニ美術館
  P02_005 (String) = 紀尾井町4-1
  P02_006 (String) = 4
  P02_007 (String) = 数値地図画像
  POINT (139.734103 35.681014)

OGRFeature(P02-06_13-g_PublicFacility):1
  P02_001 (String) = 13101
  P02_002 (String) = 3
  P02_003 (String) = 03001
  P02_004 (String) = 宮内庁三の丸尚蔵館
  P02_005 (String) = 千代田1-1
  P02_006 (String) = 1
  P02_007 (String) = 数値地図画像
  POINT (139.754098 35.683808)
---

大分類は「P02_002」です。

nippon_nlni_tokyo_pgis.map の公共施設 tokyo_pf レイヤを変更します。

---
 LAYER
  NAME tokyo_pf
  GROUP tokyo_pf
  TYPE POINT
  STATUS ON
  CONNECTIONTYPE POSTGIS
  CONNECTION "dbname=nippon_nlni host=localhost user=user password=password"
  DATA "the_geom from tokyo_pf"
#  MINSCALEDENOM 500   # <-1
#  MAXSCALEDENOM 10000
#  LABELITEM "p02_004" # <-2
  CLASSITEM "p02_002" # <-3
#  PROJECTION
#   "init=epsg:2451"
#   "init=epsg:4326"
#  END
  METADATA
   "wms_title" "Tokyo Public Facilities Map WMS Layer"
   "wms_srs" "EPSG:2451 EPSG:4326"
   "wfs_title" "Tokyo Public Facilities Map WFS Layer"
   "wfs_srs" "EPSG:4326"
   "gml_featureid" "gid"
   "gml_include_items" "all"
  END
  CLASS
#   NAME "公共施設"
#   STYLE
#    COLOR 0 255 0
#    SYMBOL 'circle'
#    SIZE 5
#   END
  END
  CLASS
   NAME "building"
   EXPRESSION ([p02_002] = 3) # <-4
   STYLE
    COLOR 153 255 153 # <-5
    OUTLINECOLOR 51 255 51 # <-5
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "national_office"
   EXPRESSION ([p02_002] = 11)
   STYLE
    COLOR 153 153 255
    OUTLINECOLOR 51 51 255
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "local_office"
   EXPRESSION ([p02_002] = 12)
   STYLE
    COLOR 255 153 153
    OUTLINECOLOR 255 51 51
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "welfare"
   EXPRESSION ([p02_002] = 13)
   STYLE
    COLOR 255 255 153
    OUTLINECOLOR 255 255 51
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "police"
   EXPRESSION ([p02_002] = 14)
   STYLE
    COLOR 153 255 255
    OUTLINECOLOR 51 255 255
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "fire_station"
   EXPRESSION ([p02_002] = 15)
   STYLE
    COLOR 255 153 255
    OUTLINECOLOR 255 51 255
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "school"
   EXPRESSION ([p02_002] = 16)
   STYLE
    COLOR 51 255 51
    OUTLINECOLOR 0 255 0
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "hospital"
   EXPRESSION ([p02_002] = 17)
   STYLE
    COLOR 255 153 51
    OUTLINECOLOR 255 102 0
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "post"
   EXPRESSION ([p02_002] = 18)
   STYLE
    COLOR 255 0 0
    OUTLINECOLOR 255 0 0
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "benefits"
   EXPRESSION ([p02_002] = 19)
   STYLE
    COLOR 255 255 0
    OUTLINECOLOR 255 153 51
    SYMBOL 'circle'
    SIZE 5
   END
  END
  CLASS
   NAME "other"
   EXPRESSION ([p02_002] = 9)
   STYLE
    COLOR 153 153 153
    OUTLINECOLOR 153 153 153
    SYMBOL 'circle'
    SIZE 5
   END
#   LABEL
#    MINFEATURESIZE 40
#    TYPE TRUETYPE
#    FONT vl-gothic
#    ENCODING UTF8
#    SIZE 8
#    POSITION uc
#   END
  END
 END
---

1 指定していると OpenLayers で表示できないときがあります。
#  MINSCALEDENOM 500
#  MAXSCALEDENOM 10000
2 LABEL を表示しないのでコメントアウト
3 CLASSを使うときのフィールドの属性値の指定
4 描画する条件値(式)
5 塗りつぶしと外周の色 RGB 0-255

Eclipse を起動して ol003-nippon_bmi_akiruno_pgis.html を開きます。
実行ボタン
をクリックして地図を表示します。

2013年11月26日火曜日

24 - あきる野市の地図をWFSで表示 4 - WFS で地図が表示されない

24-4 WFS で地図が表示されない(proxy.cgi の確認)
WFS GetCapabilities などでデータが配信されるのに、OpenLayers で地図が表示されないときは、proxy.cgi が動作しているか確認します。

24-4-1 OpenLayers のホームページを表示
Web ブラウザのアドレスバーに次のように入力して Enter キーを押します。OpenLayers のホームページが表示されれば動作しています。

http://192.168.1.200/cgi-bin/proxy.cgi

24-4-2 パーミッションの変更
OpenLayers のホームページが表示されなかったとき、proxy.cgi ファイルのパーミッションを実行可能に変更してみます。

root@debian7-vmw:/home/user# ls -l /usr/lib/cgi-bin/
合計 2200
-rwxr-xr-x 1 root root 2246848  8月 30  2012 mapserv
-rw-r--r-- 1 root root    2643  9月 25 15:23 proxy.cgi
root@debian7-vmw:/usr/lib/cgi-bin# chmod 755 proxy.cgi
root@debian7-vmw:/usr/lib/cgi-bin# ls -l
合計 2200
-rwxr-xr-x 1 root root 2246848  8月 30  2012 mapserv
-rwxr-xr-x 1 root root    2643  9月 25 15:23 proxy.cgi

前項の方法で、OpenLayers のホームページが表示されるか確認します。

24 - あきる野市の地図をWFSで表示 3 - WFS レイヤを追加

24-3 あきる野市のマップに WFS レイヤを追加
example の wfs-protocol.html を参考に OpenLayers で地図を表示します。

Eclipse を起動して Example フォルダ内の ol003-nippon_bmi_akiruno_pgis.html をコピーして ol004-nippon_bmi_akiruno_pgis.html ファイルを作成します。
a メニューの「ファイル」->「開く」をクリックします。







b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「ol003-nippon_bmi_akiruno_pgis.html」をクリックして選択し、「OK」ボタンをクリックします。





c メニューの「ファイル」->「新規」 -> 「その他」をクリックします。




d 「ウィザードを選択」ウィンドウで、「Web」(複数あるときは展開して探してください。)->「HTMLファイル」をクリックして選択し、「次へ」ボタンをクリックします。






e 「HTML」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol004-nippon_bmi_akiruno_pgis.html」と入力し、「完了」ボタンをクリックします。







f 「ol003-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol004-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。
g <title>を「Nippon BMI Akiruno PGIS Map WFS」にします。
h example フォルダーにある wms-protocol.html のコードを参考にして、javascript の一部を次のように修正します。

ol004-nippon_bmi_akiruno_pgis.html の HTML
---
<title>WFS Example BMI Akiruno PGIS</title>
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<!-- 追加 -->
<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script>
<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script>
<script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-compressed.js"></script>
<!-- ここまで -->

<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4;
 function init(){
  OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; // サービスの利用を許可するためのプロキシファイルの設置場所

  map = new OpenLayers.Map('map', {
   projection: new OpenLayers.Projection("EPSG:2451"),
   displayProjection: new OpenLayers.Projection("EPSG:4326"),
   maxResolution: 'auto',
   units: 'meters',
   maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200)
  });

  layer0 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
   layers: 'tokyo_height',
   format: 'image/png'
  });

  layer1 = new OpenLayers.Layer.Vector("Akiruno Kukaku Features", {
   strategies: [new OpenLayers.Strategy.BBOX()],
   protocol: new OpenLayers.Protocol.WFS({
    url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map",
    featureType: "akiruno_kukaku"
//    featureNS: "http://www.myhome.net/",
//    featurePrefix: "npn",
//    geometryName: "msGeometry", 
//    srsName: "EPSG:2451",
//    version: "1.0.0"
    })
  });

/*
 OpenLayers.Layer.Vector のインスタンス(instance:new で活性化されたオブジェクト)は、様々な資源(source)からベクタデータ(vector data:座標軸を持った線や面の集合体)を描画するために使用されます。
 OpenLayers.Strategy.BBOX(): 表示域(viewport)が範囲を無効にしたときの新しい地物(feature)を読み取る単純な方法(strategy)。他に地図の中心と倍率を設定して表示する方法があります。
 OpenLayers.Protocol.WFS: バージョン付き WFS プロトコルを作成するために使用されます。デフォルトのバージョンは 1.0.0。
 url(必須): WFS サーバの url。
 featureType(必須): フィーチャタイプ名(feature type name)。ここではレイヤ名と同一。
 featureNS(任意): フィーチャ名前空間(feature namespace)。
 featurePrefix(任意): フィーチャ名前空間のエイリアス。フィーチャ名前空間を使用するときだけ可。初期値: feature。
 geometoryName(任意): ジオメトリ属性の名前。初期値: the_geom。
 srsName: 空間座標系の名前。初期値: EPSG:4326。
*/
  layer2 = new OpenLayers.Layer.WMS( "Akiruno Kenchiku WMS",
   "http://192.168.1.200/cgi-bin/mapserv?",
  {
   map: '/home/user/mapfile/nippon_bmi_akiruno_pgis.map',
   layers: 'akiruno_kenchiku',
   transparent: true,
   format: 'image/png'
  });

  layer3 = new OpenLayers.Layer.Vector("Tokyo Kuiki Features", {
   strategies: [new OpenLayers.Strategy.BBOX()],
   projection: new OpenLayers.Projection("EPSG:4326"),
   protocol: new OpenLayers.Protocol.WFS({
    url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map",
    featureType: "tokyo_kuiki"
   })
  });

  layer4 = new OpenLayers.Layer.Vector( "Tokyo Public Facilities Features",{
   strategies: [new OpenLayers.Strategy.BBOX()],
   projection: new OpenLayers.Projection("EPSG:4326"),
   protocol: new OpenLayers.Protocol.WFS({
    url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map",
    featureType: "tokyo_pf",
    maxFeatures: 100
   })
  });

  map.addLayers([layer0, layer3, layer1, layer2, layer4]);
---


maxFeatures パラメータは features(この場合は点)の数を制限します。

featureNS、featurePrefix は、MapServer で wfs_namespace_uri、wfs_namespace_prefix を次のように設定します。

MAP
 NAME nippon_bmi_akiruno_pgis_map
---
 WEB
  IMAGEPATH "/home/user/mapsite/ms_tmp/"
  IMAGEURL "/mapsite/ms_tmp/"
  METADATA
---
   "wfs_namespace_uri" "www.myhome.net" # 追加
   "wfs_namespace_prefix" "npn"         # 追加
  END
 END
---

getfeature でデータをみてみます。
名前空間に xmlns:npn="www.myhome.net" が追加され、prefix(接頭辞)が "ms" から "npn" にかわっています。

user@debian7-vmw:~/ドキュメント$ wget -O bmi_akiruno_kukaku_wfs_gf_b.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&service=wfs&version=1.0.0&request=getfeature&TYPENAME=akiruno_kukaku"
user@debian7-vmw:~/ドキュメント$ vim bmi_akiruno_kukaku_wfs_gf_b.xml
<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
 xmlns:npn="www.myhome.net"
 xmlns:wfs="http://www.opengis.net/wfs"
 xmlns:gml="http://www.opengis.net/gml"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd
  www.myhome.net http://192.168.10.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=akiruno_kukaku&OUTPUTFORMAT=XMLSCHEMA">
 <gml:boundedBy>
  <gml:Box srsName="EPSG:2451">
   <gml:coordinates>-63063.744614,-34495.938759 -45431.621385,-24289.584360</gml:coordinates>
  </gml:Box>
 </gml:boundedBy>
 <gml:featureMember>
  <npn:akiruno_kukaku fid="akiruno_kukaku.1">
   <gml:boundedBy>
    <gml:Box srsName="EPSG:2451">
     <gml:coordinates>-63063.744614,-34495.938759 -45431.621385,-24289.584360</gml:coordinates>
    </gml:Box>
   </gml:boundedBy>
   <npn:msGeometry>
    <gml:Polygon srsName="EPSG:2451">
     <gml:outerBoundaryIs>
      <gml:LinearRing>
       <gml:coordinates>-63063.744614,-25263.387051
---
      </gml:LinearRing>
     </gml:outerBoundaryIs>
    </gml:Polygon>
   </npn:msGeometry>
   <npn:gid>1</npn:gid>
   <npn:id>K4_1</npn:id>
   <npn:uuid>fgoid:10-00200-11-6572-94188</npn:uuid>
   <npn:presences>20120305</npn:presences>
   <npn:presencef>29991231</npn:presencef>
   <npn:finished>20120305</npn:finished>
   <npn:orggilvl>2500</npn:orggilvl>
   <npn:orgmdid></npn:orgmdid>
   <npn:category>表示</npn:category>
   <npn:flag>既存</npn:flag>
   <npn:type>郡市・東京都の区</npn:type>
   <npn:name>あきる野市</npn:name>
   <npn:code>13228</npn:code>
  </npn:akiruno_kukaku>
 </gml:featureMember>
---


example フォルダの proxy.cgi を開いて次のように allowedHosts に
'localhost', '127.0.0.1', '192.168.1.200' を追加します。


allowedHosts = ['www.openlayers.org', 'openlayers.org', 
                'labs.metacarta.com', 'world.freemap.in', 
                'prototype.openmnnd.org', 'geo.openplans.org',
                'sigma.openplans.org', 'demo.opengeo.org',
                'www.openstreetmap.org', 'sample.azavea.com',
                'v2.suite.opengeo.org', 'v-swe.uni-muenster.de:8080',
                'vmap0.tiles.osgeo.org', 'www.openrouteservice.org',
                'maps.wien.gv.at',
                'localhost', '127.0.0.1', '192.168.1.200' ]

proxy.cgi ファイルを /usr/lib/cgi-bin にコピーします。

root@debian7-vmw:/home/user/mapsite/openlayersTokyoproj/OpenLayers-2.13.1/example# cp proxy.cgi /usr/lib/cgi-bin

Web ブラウザのアドレスバーに
http://192.168.1.200/mapsite/openlayersTokyoproj/ol004-nippon_bmi_akiruno_pgis.html


と入力して Enter キーを押します。

24 - あきる野市の地図をWFSで表示 2 - WFS サーバを設定(あきる野市)

24-2 あきる野市のマップファイルに WFS サーバを設定
東京都のマップファイルと同じように、あきる野市のマップファイルに WFS サーバを設定します。

user@debian7-vmw:~/mapfile$ vim nippon_bmi_akiruno_pgis.map

MAP
 NAME nippon_bmi_akiruno_pgis_map
 STATUS ON
 SIZE 600 300
 EXTENT -63063.744614 -34495.938759 -45431.621385 -24289.584360
 UNITS meters
 IMAGECOLOR 255 255 255
 FONTSET "fonts.txt"

 PROJECTION # 投影法 (OpenLayers のため追加)
  "init=epsg:2451"
 END

 WEB
  IMAGEPATH "/home/user/mapsite/ms_tmp/"
  IMAGEURL "/mapsite/ms_tmp/"
  METADATA
   "wms_title" "Nippon BMI Akiruno Map WMS Server"
   "wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&"
   "wms_srs" "EPSG:2451 EPSG:2456 EPSG:4326"
   "wms_enable_request" "*"
   "wfs_title" "Nippon BMI Akiruno Map WFS Server" # WFS サーバ設定
   "wfs_onlineresource" "http://192.168.10.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&"
   "wfs_srs" "EPSG:2451"
   "wfs_enable_request" "*"
  END
 END
---
 LAYER
  NAME akiruno_kukaku
  GROUP akiruno_kukaku
  TYPE POLYGON
  STATUS ON
---
  METADATA
   "wms_title" "Akiruno Kukaku Map WMS Layer"
   "wms_format" "image/png"
   "wms_srs" "EPSG:2451 EPSG:4326"
   "wfs_title" "Akiruno Kukaku Map WFS Layer"
   "wfs_srs" "EPSG:2451 EPSG:4326"
   "gml_include_items" "all"
   "gml_featuredid" "gid"
  END
---

nippon_bmi_akiruno_pgis.map の GetCapabilities の出力結果

user@debian7-vmw:~/ドキュメント$ wget -O bmi_akiruno_wfs_gc.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&service=wfs&version=1.0.0&request=GetCapabilities"
user@debian7-vmw:~/ドキュメント$ vim bmi_akiruno_wfs_gc.xml
<?xml version='1.0' encoding="ISO-8859-1" ?>
<WFS_Capabilities
 version="1.0.0"
 updateSequence="0"
 xmlns="http://www.opengis.net/wfs"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-capabilities.xsd">

<!-- MapServer version 6.0.1 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG SUPPORTS=PROJ SUPPORTS=AGG SUPPORTS=CAIRO SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=FRIBIDI SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER SUPPORTS=FASTCGI SUPPORTS=THREADS SUPPORTS=GEOS INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->

<Service>
 <Name>MapServer WFS</Name>
 <Title>Nippon BMI Akiruno Map WFS Server</Title>
 <OnlineResource>http://192.168.10.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&</OnlineResource>
</Service>
---
<FeatureTypeList>
 <Operations>
  <Query/>
 </Operations>
 <FeatureType>
  <Name>akiruno_kukaku</Name>
  <Title>Akiruno Kukaku Map WFS Layer</Title>
  <SRS>EPSG:2451</SRS>
  <LatLongBoundingBox minx="-2.5e+07" miny="-2.5e+07" maxx="2.5e+07" maxy="2.5e+07" />
 </FeatureType>
---

1 「<WFS_Capabilities...」WFS Capabiities の名前空間
2 「<!-- MapServer version 6.0.1...」MapServer の動作している機能
3 「<Service>...」WFS の設定
4 「<FeatureTypeList>...」各レイヤの設定

nippon_bmi_akiruno_pgis.map の getfeature の出力結果

user@debian7-vmw:~/ドキュメント$ wget -O bmi_akiruno_kukaku_wfs_gf.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&service=wfs&version=1.0.0&request=GetFeature&TYPENAME=akiruno_kukaku"
<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
 xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
 xmlns:wfs="http://www.opengis.net/wfs"
 xmlns:gml="http://www.opengis.net/gml"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd
  http://mapserver.gis.umn.edu/mapserver
  http://192.168.10.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=akiruno_kukaku&OUTPUTFORMAT=XMLSCHEMA">
 <gml:boundedBy>
  <gml:Box srsName="EPSG:2451">
   <gml:coordinates>-63063.744614,-34495.938759 -45431.621385,-24289.584360</gml:coordinates>
  </gml:Box>
 </gml:boundedBy>
 <gml:featureMember>
  <ms:akiruno_kukaku fid="akiruno_kukaku.1">
   <gml:boundedBy>
    <gml:Box srsName="EPSG:2451">
     <gml:coordinates>-63063.744614,-34495.938759 -45431.621385,-24289.584360</gml:coordinates>
    </gml:Box>
   </gml:boundedBy>
   <ms:msGeometry>
    <gml:Polygon srsName="EPSG:2451">
     <gml:outerBoundaryIs>
      <gml:LinearRing>
       <gml:coordinates>-63063.744614,-25263.387051
---
      </gml:LinearRing>
     </gml:outerBoundaryIs>
    </gml:Polygon>
   </ms:msGeometry>
   <ms:gid>1</ms:gid>
   <ms:id>K4_1</ms:id>
   <ms:uuid>fgoid:10-00200-11-6572-94188</ms:uuid>
   <ms:presences>20120305</ms:presences>
   <ms:presencef>29991231</ms:presencef>
   <ms:finished>20120305</ms:finished>
   <ms:orggilvl>2500</ms:orggilvl>
   <ms:orgmdid></ms:orgmdid>
   <ms:category>表示</ms:category>
   <ms:flag>既存</ms:flag>
   <ms:type>郡市・東京都の区</ms:type>
   <ms:name>あきる野市</ms:name>
   <ms:code>13228</ms:code>
  </ms:akiruno_kukaku>
 </gml:featureMember>
---

1 「<wfs:FeatureCollection...」WFS FeatureCollection の名前空間
2 以下、地物のデータ

24 - あきる野市の地図をWFSで表示 1 - WFS サーバを設定(東京都)

24-1 東京都のマップファイルに WFS サーバを設定
WFS を利用して地図に属性を表示します。
WFS(Web Feature Service)は、座標や属性など、実際の地物のデータを配信します。

1 WFS サーバ機能を設定するのに、WEB オブジェクトの METADATA オブジェクトに、 "wfs_title"(必須)と "wfs_srs", "wfs_enable_request", "wfs_onlineresource"(以上推奨) を設定します。
"wfs_enable_request" は、GetCapabilities, GetFeature and  DescribeFeatureType のリクエストを許可します。
"wfs_srs" に、基盤地図情報のに合わせて "EPSG:2451" も設定します。
これによって、"wfs_srs" の識別子が WFS を利用できるすべてのレイヤに設定されます。
2 レイヤを WFS で利用できるように、同じように、METADATA オブジェクトに、 "wfs_title"、"wfs_srs"、"gml_featureid"、"gml_include_items" を設定します。
"gml_featureid" は、WFS データの属性の中でユニーク(唯一)なものを設定します。
"gml_include_items" は、配信する属性を決められます。設定は必須となっていませんが、しておいたほうがいいようです。

user@debian7-vmw:~/mapfile$ vim nippon_nlni_tokyo_pgis.map

MAP
 NAME nippon_nlni_tokyo_pgis_map
 STATUS ON
 SIZE 600 300
 EXTENT 138.85 35.4 140 35.975 # 諸島部を除いた範囲
 UNITS DD
 IMAGECOLOR 255 255 255
# IMAGETYPE PNG
 FONTSET "fonts.txt"

 PROJECTION # 投影法 (OpenLayers のため追加)
  "init=epsg:4326"
 END
 
 WEB
  IMAGEPATH "/home/user/mapsite/ms_tmp/"
  IMAGEURL "/mapsite/ms_tmp/"
  METADATA
   "wms_title" "Nioopn NLNI Tokyo Map WMS Server"
   "wms_onlineresource" "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&"
   "wms_srs" "EPSG 2451 EPSG:4326"
   "wms_enable_request" "*"
   "wfs_title" "Nippon NLNI Tokyo Map WFS Server" # <-1 ここから追加
   "wfs_onlineresource" "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&"
   "wfs_srs" "EPSG:4326"
   "wfs_enable_request" "*"
  END
 END
---
 LAYER
  NAME tokyo_kuiki
  TYPE POLYGON
  STATUS ON
#  DUMP TRUE (ver.6より非推奨)
---
  METADATA
   "wms_title" "Tokyo Kuiki Map WMS Layer"
   "wms_srs" "EPSG:2451 EPSG:4326"
   "wfs_title" "Tokyo Kuiki Map WFS Layer" # <-2 ここから追加
   "wfs_srs" "EPSG:4326"
   "gml_featureid" "gid"
   "gml_include_items" "all"
  END
---
 LAYER
  NAME tokyo_pf
  GROUP tokyo_pf
  TYPE POINT
  STATUS ON
---
  METADATA
   "wms_title" "Tokyo Public Facilities Map WMS Layer"
   "wms_srs" "EPSG:2451 EPSG:4326"
   "wfs_title" "Tokyo Public Facilities Map WFS Layer" # <-2 ここから追加
   "wfs_srs" "EPSG:4326"
   "gml_featureid" "gid"
   "gml_include_items" "all"
  END
---

nippon_nlni_tokyo_pgis.map の WFS GetCapabilities の出力結果。

user@debian7-vmw:~/ドキュメント$ wget -O nlni_tokyo_wfs_gc.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&service=wfs&version=1.0.0&request=GetCapabilities"
user@debian7-vmw:~/ドキュメント$ vim nlni_tokyo_wfs_gc.xml
<?xml version='1.0' encoding="ISO-8859-1" ?>
<WFS_Capabilities
 version="1.0.0"
 updateSequence="0"
 xmlns="http://www.opengis.net/wfs"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-capabilities.xsd">

<!-- MapServer version 6.0.1 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG SUPPORTS=PROJ SUPPORTS=AGG SUPPORTS=CAIRO SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=FRIBIDI SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER SUPPORTS=FASTCGI SUPPORTS=THREADS SUPPORTS=GEOS INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->

<Service>
 <Name>MapServer WFS</Name>
 <Title>Nippon NLNI Tokyo Map WFS Server</Title>
 <OnlineResource>http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&</OnlineResource>
</Service>
---
<FeatureTypeList>
 <Operations>
  <Query/>
 </Operations>
  <FeatureType>
   <Name>tokyo_kuiki</Name>
   <Title>Tokyo Kuiki Map WMS Layer</Title>
   <SRS>EPSG:4326</SRS>
   <LatLongBoundingBox minx="-2.5e+07" miny="-2.5e+07" maxx="2.5e+07" maxy="2.5e+07" />
  </FeatureType>
  <FeatureType>
   <Name>tokyo_pf</Name>
   <Title>Tokyo Public Facilities Map WFS Layer</Title>
   <SRS>EPSG:4326</SRS>
   <LatLongBoundingBox minx="-2.5e+07" miny="-2.5e+07" maxx="2.5e+07" maxy="2.5e+07" />
  </FeatureType>
---

1 「<WFS_Capabilities...」WFS Capabiities の名前空間
2 「<!-- MapServer version 6.0.1...」MapServer の動作している機能
3 「<Service>...」WFS の設定
4 「<FeatureTypeList>...」各レイヤの設定

nippon_nlni_tokyo_pgis.map の WFS GetFeature の出力結果。

user@debian7-vmw:~/ドキュメント$ wget -O nlni_tokyo_pf_wfs_gf.xml "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&service=wfs&version=1.0.0&request=GetFeature&TYPENAME=tokyo_pf"
<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
 xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
 xmlns:wfs="http://www.opengis.net/wfs"
 xmlns:gml="http://www.opengis.net/gml"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd
  http://mapserver.gis.umn.edu/mapserver
  http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=tokyo_pf&OUTPUTFORMAT=XMLSCHEMA">
 <gml:boundedBy>
  <gml:Box srsName="EPSG:4326">
   <gml:coordinates>139.015694,26.640098 142.203778,35.841866</gml:coordinates>
  </gml:Box>
 </gml:boundedBy>
 <gml:featureMember>
  <ms:tokyo_pf fid="tokyo_pf.1">
   <gml:boundedBy>
    <gml:Box srsName="EPSG:4326">
     <gml:coordinates>139.734103,35.681014 139.734103,35.681014</gml:coordinates>
    </gml:Box>
   </gml:boundedBy>
   <ms:msGeometry>
    <gml:Point srsName="EPSG:4326">
     <gml:coordinates>139.734103,35.681014</gml:coordinates>
    </gml:Point>
   </ms:msGeometry>
   <ms:gid>1</ms:gid>
    <ms:p02_001>13101</ms:p02_001>
    <ms:p02_002>3</ms:p02_002>
    <ms:p02_003>03001</ms:p02_003>
    <ms:p02_004>ニューオータニ美術館</ms:p02_004>
    <ms:p02_005>紀尾井町4-1</ms:p02_005>
    <ms:p02_006>4</ms:p02_006>
    <ms:p02_007>数値地図画像</ms:p02_007>
   </ms:tokyo_pf>
  </gml:featureMember>
---

1 「<wfs:FeatureCollection...」WFS FeatureCollection の名前空間
2 以下、地物のデータ

24 - あきる野市の地図をWFSで表示 0 - Debian に固定の IP アドレスを設定

24-0 VMware player の Debian に固定の IP アドレスを設定
ネットワーク内の他のコンピュータから地図表示をするために、VMware Player の Debian に固定の IP アドレスを設定します。
この操作をすると、「サーバへ接続」で「Windows共有」で接続できなくなります。これを設定したときは、VMware Player の「共有フォルダ」を設定します。

24-0-1 Debian の設定
Debian に固定の IP アドレスを設定します。
a /etc/network/interface の設定
元のファイルをコピーします。

root@debian7-vmw:/home/user# cp /etc/network/interfaces /etc/network/interfaces_org

設定内容を次のように変更します。

root@debian7-vmw:/home/user# vim /etc/network/interfaces
---
# The primary network interface
 allow-hotplug eth0
 auto eth0
# iface eth0 inet dhcp コメントアウト
iface eth0 inet static # ここから追加

address   192.168.1.200 # 固定 IP アドレス例
netmask   255.255.255.0 # ネットマスク
broadcast 192.168.1.255 # 任意
network   192.168.1.0 # 任意
gateway   192.168.1.1 # ルータなど
:wq

b /etc/resolv.conf の設定
元のファイルをコピーします。

root@debian7-vmw:/home/user# cp /etc/resolv.conf /etc/network/resolv.conf_org

設定内容を次のように変更します。

root@debian7-vmw:/home/user# vim /etc/resolv.conf
# domain localdomain
# search localdomain
# nameserver 192.168.164.1
domain xxxxx.xx.xx # 以下、プロバイダ指定のものなど
search xxxxx.xx.xx
nameserver xx.xxx.xxx.xx
nameserver xx.xxx.xxx.xx

ネットワークを再起動します。

root@debian7-vmw:/home/user# /etc/init.d/networking restart

24-0-2 VMware Player の「共有フォルダ」の設定
a VMware Player の Player 右側の下向きの三角▼をクリックし 管理 -> 仮想マシン設定 をクリックします。



b 「オプション」タブをクリックし、「共有フォルダ」をクリック、「フォルダの共有」で「常に有効」をクリックし、「追加」ボタンをクリックします。






c 「共有フォルダ追加ウィザード」が起動するので「共有フォルダ追加ウィザードにようこそ」画面で「次へ」ボタンをクリックします。






d 「共有フォルダ名の指定」画面で「参照」ボタンをクリックします。







e 「フォルダの参照」画面で コンピュータ -> BOOTCAMP(C:) -> ユーザー -> パブリック をクリックして「OK」ボタンをクリックします。






f 「共有フォルダ名の指定」画面で「次へ」ボタンをクリックします。







g 「共有フォルダ属性の指定」画面で「この共有を有効化」をクリックしてチェックし、「完了」ボタンをクリックします。






h 「仮想マシンっ設定」ウィンドウで「OK」ボタンをクリックします。







「場所」->「ホームフォルダ」をクリックして開くと、「ホーム」ウィンドウに「Public」のショートカットフォルダが作成されています。

2013年11月25日月曜日

23 - OpenLayers で地図を重ねる 3 - 数値標高モデルの画像の地図を重ねる2

23-3 あきる野市の地図に数値標高モデルの画像の地図を重ねる
tokyo10m.png を EPSG:2451 の投影法に変換します。

user@debian7-vmw:~/mapdata/tokyo$ gdal_translate -of PNG -a_srs "EPSG:2451" tokyo10m.png tokyo10m-epsg2451.png
Input file size is 2310, 1467
0...10...20...30...40...50...60...70...80...90...100 - done.
user@debian7-vmw:~/mapdata/tokyo$ gdalinfo tokyo10m-epsg2451.png
Driver: PNG/Portable Network Graphics
Files: tokyo10m-epsg2451.png
       tokyo10m-epsg2451.png.aux.xml
Size is 2310, 1467
Coordinate System is:
PROJCS["JGD2000 / Japan Plane Rectangular CS IX",
    GEOGCS["JGD2000",
        DATUM["Japanese_Geodetic_Datum_2000",
            SPHEROID["GRS 1980",6378137,298.257222101,
                AUTHORITY["EPSG","7019"]],
            TOWGS84[0,0,0,0,0,0,0],
            AUTHORITY["EPSG","6612"]],
        PRIMEM["Greenwich",0,
            AUTHORITY["EPSG","8901"]],
        UNIT["degree",0.0174532925199433,
            AUTHORITY["EPSG","9122"]],
        AUTHORITY["EPSG","4612"]],
    PROJECTION["Transverse_Mercator"],
    PARAMETER["latitude_of_origin",36],
    PARAMETER["central_meridian",139.8333333333333],
    PARAMETER["scale_factor",0.9999],
    PARAMETER["false_easting",0],
    PARAMETER["false_northing",0],
    UNIT["metre",1,
        AUTHORITY["EPSG","9001"]],
    AXIS["X",NORTH],
    AXIS["Y",EAST],
    AUTHORITY["EPSG","2451"]]
Origin = (138.873693408405359,36.000160021331652)
Pixel Size = (0.000487353665300,-0.000397437712900)
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  ( 138.8736934,  36.0001600) (139d50' 5.55"E, 36d 0' 1.17"N)
Lower Left  ( 138.8736934,  35.4171189) (139d50' 5.55"E, 36d 0' 1.15"N)
Upper Right ( 139.9994804,  36.0001600) (139d50' 5.59"E, 36d 0' 1.17"N)
Lower Right ( 139.9994804,  35.4171189) (139d50' 5.59"E, 36d 0' 1.15"N)
Center      ( 139.4365869,  35.7086395) (139d50' 5.57"E, 36d 0' 1.16"N)
Band 1 Block=2310x1 Type=Byte, ColorInterp=Red
Band 2 Block=2310x1 Type=Byte, ColorInterp=Green
Band 3 Block=2310x1 Type=Byte, ColorInterp=Blue

tokyo10m-epsg2451.png の四角の座標が度数(degree)なのでこのままでは表示できません。
EPSG:2451 の四角の座標を Proj4js で計算します。

OpenLayers and Proj4js
http://trac.openlayers.org/wiki/Documentation/Dev/proj4js

ここを参考にして、Proj4js を設定します。

1 ダウンロード
a Proj4js サイト
http://trac.osgeo.org/proj4js/

の「Download」をクリックします。
b Download-Proj4js
http://trac.osgeo.org/proj4js/wiki/Download

の「Proj4j 1.1.0」の「 http://download.osgeo.org/proj4js/proj4js-1.1.0.zip」をクリックします。

2 インストール
a ダウンロードした  proj4js-1.1.0.zip を解凍します。
user@debian7-vmw:~/ダウンロード$ unzip proj4js-1.1.0.zip
b proj4js フォルダを openlayersTokyoproj/lib/ に移動します。
user@debian7-vmw:~/ダウンロード$ mv proj4js ../mapsite/openlayersTokyoproj/OpenLayers-2.13.1/lib/
c 解凍されたフォルダの proj4js/lib/def/ に定義ファイルがあるので、EPSG:4326 と EPSG:2451 がないときは作成します。
EPSG4302.js を参考にします。
データは、/usr/share/proj のものを使用します。

user@debian7-vmw:/usr/share/proj$ grep -A1 4326 epsg
<4326> +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  <>
# Anguilla 1957
user@debian7-vmw:/usr/share/proj$ grep -A1 2451 epsg
<2451> +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs  <>
# JGD2000 / Japan Plane Rectangular CS X
--
(EPSG:4326 の定義は proj4js/lib/proj4js ありました。
'EPSG:4326': "+title=long/lat:WGS84 +proj=longlat +a=6378137.0 +b=6356752.31424518 +ellps=WGS84 +datum=WGS84 +units=degrees",)

EPSG:2451 の定義ファイル EPSG2451.js を 次の内容で proj4js/lib/defs/ に作成します。
Proj4js.defs["EPSG:2451"]= "+title=JGD2000/Japan Plane Rectangular CS IX +proj=tmerc +lat_0=36 +lon_0=139.8333333333333 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"

proj4js/index.html ファイルに次のように追加します。

---
<script src="lib/proj4js.js"></script>

<script src="lib/defs/EPSG27200.js"></script>
<script src="lib/defs/EPSG4272.js"></script>
<script src="lib/defs/EPSG54009.js"></script>
<script src="lib/defs/EPSG42304.js"></script>
<script src="lib/defs/EPSG25833.js"></script>
<script src="lib/defs/EPSG27563.js"></script>
<script src="lib/defs/EPSG4139.js"></script>
<script src="lib/defs/EPSG4302.js"></script>
<script src="lib/defs/EPSG31285.js"></script>
<script src="lib/defs/EPSG900913.js"></script>
<script src="lib/defs/EPSG2451.js"></script> <!-- 追加 -->

---

Webブラウザに

http://localhost/mapsite/openlayersTokyoproj/OpenLayers-2-13.1/lib/proj4js/index.html

と入力して Enter キーを押します。

「source」を「EPSG:4326 - long/lat:WGS84」、
「dest」を「EPSG:2451 - JGD2000/Japan Plane Rectangular CS IX」
にして、gdalinfo tokyo10m-epsg4326.png の出力結果の「Corner Coordinates」から、出力します。

           「source」                  「dest」
Upper Left 138.8736934, 36.0001600 -> -86517.10966018954, 443.645829377676
Lower Left 138.8736934, 35.4171189 -> -87149.5276955563, -64243.31846699882
Upper Right139.9994804, 36.0001600 -> 14978.910498662082, 30.51726815643259
Lower Right139.9994804, 35.4171189 -> 15088.38925912324, -64653.61709593148


gdalinfo tokyo10m-epsg4326.png の出力結果の「Size is 2310, 1467」から、次のコマンドで座標を変換します。
座標は左上から時計回りに記述します。

gdal_translate [-of format] [-a_srs srs_def] [-gcp pixel line easting northing] [-gcp pixel line easting northing] [-gcp pixel line easting northing] [-gcp pixel line easting northing] sourcefile outpulfile

*2014.2.23
次のコマンドでOKでした。
gdal_translate [-of format] [-a_srs srs_def] [-a_ullr ulx uly lrx lry] sourcefile outpulfile
(ul: upper left, lr: lower right)
[-gcp pixel line easting northing] は、その画像の点(ピクセルで表した位置)の座標を設定するコマンドみたいです。

user@debian7-vmw:~/mapdata/tokyo$ gdal_translate -of PNG -gcp  0 0 -86517.10966018954 443.645829377676 -gcp 2310 0 14978.910498662082 30.51726815643259 -gcp 2310 1467 15088.38925912324  -64653.61709593148 -gcp 0 1467 -87149.5276955563 -64243.31846699882 -a_ullr -86517.10966018954 443.645829377676 15088.38925912324  -64653.61709593148 tokyo10m.png tokyo10m-epsg2451.png
Input file size is 2310, 1467
0...10...20...30...40...50...60...70...80...90...100 - done.
user@debian7-vmw:~/mapdata/tokyo$ gdalinfo tokyo10m-epsg2451.png
Driver: PNG/Portable Network Graphics
Files: tokyo10m-epsg2451.png
       tokyo10m-epsg2451.png.aux.xml
Size is 2310, 1467
Coordinate System is `'
Origin = (-86517.109660189540591,443.645829377676023)
Pixel Size = (43.985064467234970,-44.374412355357293)
GCP Projection =
GCP[  0]: Id=, Info=
          (0,0) -> (-86517.10966019,443.6458293777,0)
GCP[  1]: Id=, Info=
          (2310,0) -> (14978.91049866,30.51726815643,0)
GCP[  2]: Id=, Info=
          (2310,1467) -> (15088.38925912,-64653.61709593,0)
GCP[  3]: Id=, Info=
          (0,1467) -> (-87149.52769556,-64243.318467,0)
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  -86517.110,     443.646)
Lower Left  (  -86517.110,  -64653.617)
Upper Right (   15088.389,     443.646)
Lower Right (   15088.389,  -64653.617)
Center      (  -35714.360,  -32104.986)
Band 1 Block=2310x1 Type=Byte, ColorInterp=Red
Band 2 Block=2310x1 Type=Byte, ColorInterp=Green
Band 3 Block=2310x1 Type=Byte, ColorInterp=Blue

この画像ファイルでも地図表示はできますが、投影法が確認できるように追加します。

user@debian7-vmw:~/mapdata/tokyo$ gdal_translate -of PNG -a_srs "EPSG:2451" tokyo10m-epsg2451.png tokyo10m-epsg2451-2.png
Input file size is 2310, 1467
0...10...20...30...40...50...60...70...80...90...100 - done.
user@debian7-vmw:~/mapdata/tokyo$ gdalinfo tokyo10m-epsg2451-2.png
Driver: PNG/Portable Network Graphics
Files: tokyo10m-epsg2451-2.png
       tokyo10m-epsg2451-2.png.aux.xml
Size is 2310, 1467
Coordinate System is:
PROJCS["JGD2000 / Japan Plane Rectangular CS IX",
    GEOGCS["JGD2000",
        DATUM["Japanese_Geodetic_Datum_2000",
            SPHEROID["GRS 1980",6378137,298.257222101,
                AUTHORITY["EPSG","7019"]],
            TOWGS84[0,0,0,0,0,0,0],
            AUTHORITY["EPSG","6612"]],
        PRIMEM["Greenwich",0,
            AUTHORITY["EPSG","8901"]],
        UNIT["degree",0.0174532925199433,
            AUTHORITY["EPSG","9122"]],
        AUTHORITY["EPSG","4612"]],
    PROJECTION["Transverse_Mercator"],
    PARAMETER["latitude_of_origin",36],
    PARAMETER["central_meridian",139.8333333333333],
    PARAMETER["scale_factor",0.9999],
    PARAMETER["false_easting",0],
    PARAMETER["false_northing",0],
    UNIT["metre",1,
        AUTHORITY["EPSG","9001"]],
    AXIS["X",NORTH],
    AXIS["Y",EAST],
    AUTHORITY["EPSG","2451"]]
Origin = (-86517.109660189540591,443.645829377676023)
Pixel Size = (43.985064467234970,-44.374412355357293)
GCP Projection =
GCP[  0]: Id=, Info=
          (0,0) -> (-86517.10966019,443.6458293777,0)
GCP[  1]: Id=, Info=
          (2310,0) -> (14978.91049866,30.51726815643,0)
GCP[  2]: Id=, Info=
          (2310,1467) -> (15088.38925912,-64653.61709593,0)
GCP[  3]: Id=, Info=
          (0,1467) -> (-87149.52769556,-64243.318467,0)
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  -86517.110,     443.646) (138d52'25.30"E, 36d 0' 0.58"N)
Lower Left  (  -86517.110,  -64653.617) (138d52'50.52"E, 35d24'48.51"N)
Upper Right (   15088.389,     443.646) (140d 0' 2.53"E, 36d 0'13.97"N)
Lower Right (   15088.389,  -64653.617) (139d59'58.13"E, 35d25' 1.63"N)
Center      (  -35714.360,  -32104.986) (139d26'19.06"E, 35d42'35.91"N)
Band 1 Block=2310x1 Type=Byte, ColorInterp=Red
Band 2 Block=2310x1 Type=Byte, ColorInterp=Green
Band 3 Block=2310x1 Type=Byte, ColorInterp=Blue

nippon_bmi_akiruno_pgis.map に 次のようにレイヤ(tokyo_height)を設定します。

---
LAYER
 NAME tokyo_height
 TYPE RASTER
 STATUS ON
 DATA "../mapdata/tokyo/tokyo10m-epsg2451-2.png"
 MINSCALEDENOM 1000    # 不適当な縮尺で使用されないように。
 MAXSCALEDENOM 1000000
 METADATA
  "wms_title" "Tokyo Height 10m WMS LAYER"
  "wms_srs" "EPSG:2451"
 END
END

---

ol003-nippon_bmi_akiruno.pgis.html に次のように 東京都の高度数値モデルの画像レイヤ(tokyo_height)を layer0 に設定します。

---
   layer0 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
    "http://192.168.1.200/cgi-bin/mapserv?",
    {
     map: '/home/user/mapfile/nippon_bmi_tokyo_pgis.map',
     layers: 'tokyo_height',
     format: 'image/png'
   });

---

地図を拡大するため、コントロールパネルの "+" を4回クリックすると、公共施設の位置が表示されました。
nippon_nlni_tokyo_pgis.map の tokyo_pf レイヤと nippon_bmi_akiruno_pgis.map の akiruno_kenchiku レイヤの表示倍率を揃えるために MINSCALEDENOM と MAXSCALEDENOM の値を同じにします。(MINSCALEDENOM 500、MAXSCALEDENOM 10000 にしました。)