Debianでka-MapのメモプラスOpenLayers とGeoExt: 24 - あきる野市の地図をWFSで表示 3

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 キーを押します。

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2013年11月26日火曜日

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

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ