2013年12月23日月曜日

32 - KML データの読込 3 - KML データのポップアップ表示

32-4 内容をポップアップ表示
KML Layer Example(sundials.html)を参考に、KML の「説明」に入力した内容をポップアップ表示させます。

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







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






c 「sundials.html」の内容の一部をコピーして「ol013-nippon_bmi_akiruno_pgis.html」に貼り付け、次のように修正します。

---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, select; // "select" 追加
---
  map.addLayer(kml_layer); 
// ここから追加            
//  select = new OpenLayers.Control.SelectFeature(sundials);
  select = new OpenLayers.Control.SelectFeature(kml_layer); // 修正
//  sundials.events.on({
  kml_layer.events.on({ // 修正
   "featureselected": onFeatureSelect,
   "featureunselected": onFeatureUnselect
  });
  map.addControl(select);
  select.activate();   
// ここまで 
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.zoomToMaxExtent();
 } // End of function(init) 
// ここから追加
 function onPopupClose(evt) {
  select.unselectAll();
 } 
 function onFeatureSelect(event) {
  var feature = event.feature;
// Since KML is user-generated, do naive protection against
// Javascript.
  var content = "<h2>"+feature.attributes.name + "</h2>" +  feature.attributes.description;
  if (content.search("<script") != -1) {
   content = "Content contained Javascript! Escaped content below.<br>" +  content.replace(/</g, "<");
  }
  popup = new OpenLayers.Popup.FramedCloud("chicken", 
   feature.geometry.getBounds().getCenterLonLat(),
   new OpenLayers.Size(100,100),
   content,
   null, true, onPopupClose);
  feature.popup = popup;
  map.addPopup(popup);
 }
 function onFeatureUnselect(event) {
  var feature = event.feature;
  if(feature.popup) {
   map.removePopup(feature.popup);
   feature.popup.destroy();
   delete feature.popup;
  }
 }
// ここまで
</script>
---
例えば、「Point.xml」の次の部分を修正するとポップアップに画像が表示されます。
---
<Placemark>
 <name>Point</name>
 <description><![CDATA[あきる野市 Point<br /><img src="../img/marker.png" height="50" />]]></description>
  <LookAt>
---



32 - KML データの読込 2 - KML レイヤの表示

32-3 kml レイヤの例
examples フォルダにある「KML Layer Example(kml-layer.html)」を参考に KML ファイルを読み込んでレイヤを表示します。
最初に、HTML ファイルを準備します。
(Eclipse 4.2 Juno の調子が良くないので、4.3 Kepler standerd をインストールしました。少し手順が変わります。)

a 「App Exploler」ペインの「ol009-nippon_bmi_akiruno_pgis.html」を右クリックし「コピー」をクリックします。








b 「App Exploler」ペイン上で右クリックし「貼り付け」をクリックします。









c 「名前の競合」ウィンドウで「ol013-nippon_bmi_akiruno_pgis.html」と入力し「OK」ボタンをクリックします。



d 「App Exploler」ペインの「ol013-nippon_bmi_akiruno_pgis.html」をダブルクリックして開きます。
e メニューの「ファイル」->「開く」をクリックします。







f 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「kml-layer.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「kml-layer.js」を開きます。





g 「kml-layer.js」の内容の一部をコピーして「ol013-nippon_bmi_akiruno_pgis.html」に貼り付け、次のように修正します。
(29-2 で追加したところは削除します。) 
---
 map.addLayers([layer0, layer3, layer1, layer2, layer4]);

 var kml_layer = new OpenLayers.Layer.Vector("KML", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  projection: map.displayProjection, // 追加
  protocol: new OpenLayers.Protocol.HTTP({
   url: "kml/lines.kml", // ここを修正
   format: new OpenLayers.Format.KML({
    extractStyles: true, 
    extractAttributes: true,
    maxDepth: 2
   })
  })
 });
/*  ],
  center: new OpenLayers.LonLat(-112.169, 36.099),
  zoom: 11
 });
*/
 map.addLayer(kml_layer);

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

32-2 で作成したファイルを「openlayersTokyoproj」に保存します。
f ファイル -> 新規 -> フォルダー をクリックします。




g 「新規フォルダー」ウィンドウの「フォルダ名:」に「kml」と入力して「完了」ボタンをクリックします。









h 32-2 で作成したファイルを「kml」フォルダにコピーします。
(VMware Player で共有フォルダに設定したフォルダから g で作成したフォルダにコピーしました。)
user@debian7-vmw:~$ cp Public/Documents/*.kml mapsite/openlayersTokyoproj/kml/

i 「ここを修正」部分を次のように修正して地図を表示します。

url: "kml/Point.kml",










url: "kml/Line.kml",











url: "kml/Polygon.kml",


32 - KML データの読込 1 - KML ファイルの作成

32-1 KML(Keyhole Markup Language)

OGC(Open Geospatial Consortium)の

KML ページ
http://www.opengeospatial.org/standards/kml

に KML の説明があります。

ここには、KML のバージョン 2.2 から OGC 標準として採用されたとあります。
幾何学的要素(点、線、リニアリング、ポリゴン)は、GML 2.1.2 を利用しています。
使い方は、

KML ドキュメント
https://developers.google.com/kml/?hl=ja

にあります。また、KML 要素のクラスツリーが

KML リファレンス
https://developers.google.com/kml/documentation/kmlreference?hl=ja

にありますので、参考にしてください。

32-2 KML ファイルの作成
Google Earth を使って KML ファイルを作成します。
Debian にはうまくインストールできないので、Windows にインストールします。Google Earth のインストールの詳細については、Google Earth のホームページを参照してください。

a Google Earth を起動します。

b 「Search」に「あきる野市」と入力し「検索」ボタンをクリックします。




c 「目印」追加ボタンをクリックします。





d ピンが地図画像上に表示され「Google Earth - 新規 目印」ウィンドウが表示されるので、次のように設定します。

名前: Point
緯度、経度: [ピンを任意の場所にドラッグします。]






「タブ」
説明: あきる野市 Point (「画像を追加」ボタンをクリックして「URL」を空のまま「OK」ボタンをクリックします。)



スタイル、色: ラベル - 赤、アイコン - 赤















e 「OK」ボタンをクリックします。

f 「パス」追加ボタンをクリックします。





g 「Google Earth - 新規 パス」ウィンドウが表示されるので、次のように設定します。

名前: Line
緯度、経度: [任意の場所を3点クリックします。]
「タブ」
説明: あきる野市 Line (「画像を追加」ボタンをクリックして「URL」を空のまま「OK」ボタンをクリックします。)



スタイル、色: 色 - 緑、幅 - 2.0















h 「OK」ボタンをクリックします。

i 「ポリゴン」追加ボタンをクリックします。




j 「Google Earth - 新規 ポリゴン」ウィンドウが表示されるので、次のように設定します。

名前: Polygon
緯度、経度: [任意の場所を3点クリックします。]
「タブ」
説明: あきる野市 Polygon (「画像を追加」ボタンをクリックして「URL」を空のまま「OK」ボタンをクリックします。)



スタイル、色: 直線 色 - 青、範囲 色 - 青















k 「OK」ボタンをクリックします。









l 「場所」ペインの追加した「Point」を右クリックします。
m 「名前を付けて場所を保存」をクリックします。









n 「ファイルの保存」ウィンドウで

ファイルの種類: Kml(*.kml)

にして「保存」ボタンをクリックします。


o 同じように、Line と Polygon を保存します。

2013年12月17日火曜日

31 - GML データの読込 2 - Line と Polygon の表示

31-4 GML ファイルの作成 Line
examples フォルダの gml フォルダにある gml ファイルを参考にファイルを準備します。

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




b 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「gml_line_akiruno.xml」と入力し、「完了」ボタンをクリックします。
314a-olaki.png







c 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「gml」->「line.xml」をクリックして選択し、「OK」ボタンをクリックします。






d 「line.xml」の内容全部をコピーして「gml_line_akiruno.xml」に貼り付けて、次のように修正します。

<?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://aneto.oco/cgi-bin/worldwfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=line&OUTPUTFORMAT=XMLSCHEMA">


 <gml:boundedBy>
   <gml:Box srsName="EPSG:4326">
    <gml:coordinates>139.191,35.715 139.270,35.742</gml:coordinates>
   <!-- フィーチャ(3点)を含む範囲 -->
  </gml:Box>
 </gml:boundedBy>
  <gml:featureMember>
   <ms:line fid="1">
    <gml:boundedBy>
     <gml:Box srsName="EPSG:4326">
      <gml:coordinates>139.191,35.715 139.270,35.742</gml:coordinates>
      <!-- このフィーチャの範囲(線が1本なので上と同じ座標) -->
     </gml:Box>
    </gml:boundedBy>
    <ms:msGeometry>
     <gml:LineString srsName="EPSG:4326">
      <gml:coordinates>139.191,35.715 139.211,35.742 139.270,35.724</gml:coordinates>
     </gml:LineString>
    </ms:msGeometry>
    <ms:ogc_fid>1</ms:ogc_fid>
    <ms:name/>
    <ms:id>0</ms:id>
   </ms:line>
  </gml:featureMember>
 </wfs:FeatureCollection>


「ol012-nippon_bmi_akiruno_pgis.html」の「url: "gml_point_akiruno.xml",」を「url: "gml_line_akiruno.xml",」に修正します。

31-5 GML ファイルの作成 Polygon
examples フォルダの gml フォルダにある gml ファイルを参考にファイルを準備します。

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




b 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「gml_polygon_akiruno.xml」と入力し、「完了」ボタンをクリックします。







c 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「gml」->「polygon.xml」をクリックして選択し、「OK」ボタンをクリックします。

d 「polygon.xml」の内容全部をコピーして「gml_polygon_akiruno.xml」に貼り付けて、次のように修正します。

<?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://aneto.oco/cgi-bin/worldwfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=polygon&OUTPUTFORMAT=XMLSCHEMA">


 <gml:boundedBy>
  <gml:Box srsName="EPSG:4326">
   <gml:coordinates>139.191,35.715 139.270,35.742</gml:coordinates>
   <!-- フィーチャ(3点)を含む範囲 -->
  </gml:Box>
 </gml:boundedBy>
 <gml:featureMember>
  <ms:polygon fid="1">
   <gml:boundedBy>
    <gml:Box srsName="EPSG:4326">
     <gml:coordinates>139.191,35.715 139.270,35.742</gml:coordinates>
      <!-- このフィーチャの範囲(面が1個なので上と同じ座標) -->
    </gml:Box>
   </gml:boundedBy>
   <ms:msGeometry>
    <gml:MultiPolygon srsName="EPSG:4326">
     <gml:polygonMember>
      <gml:Polygon>
       <gml:outerBoundaryIs>
        <gml:LinearRing>
         <gml:coordinates>139.191,35.715 139.211,35.742 139.270,35.724</gml:coordinates>
        </gml:LinearRing>
       </gml:outerBoundaryIs>
      </gml:Polygon>
     </gml:polygonMember>
    </gml:MultiPolygon>
   </ms:msGeometry>
   <ms:ogc_fid>1</ms:ogc_fid>
   <ms:name>Polygon</ms:name>
   <ms:id>0</ms:id>
  </ms:polygon>
 </gml:featureMember>
</wfs:FeatureCollection>

「ol012-nippon_bmi_akiruno_pgis.html」の「url: "gml_line_akiruno.xml",」を「url: "gml_polygon_akiruno.xml",」に修正します。

31 - GML データの読込 1 - Point の表示

31-1 GML(Geography Markup Language)

OGC(Open Geospatial Consortium)の

Geography Markup Language ページ
http://www.opengeospatial.org/standards/gml

に GML の説明があります。
GML は OGC の規格で、地理的な特徴を表現するためのXML文法です。データは、定義された構造のまま、インターネットで交換できます。構成は、データベース構造(スキーマ)と実際のデータ(インスタンス)の2つの部分からなってます。GML ドキュメントは GML スキーマを使用して記述されています。これにより、点、線、多角形を含んでいる一般的な地理データセットを記述することができます。コミュニティ固有の拡張機能が実装されることもあります。

31-2 GML レイヤの例(GML Layer Example)
examples フォルダにある「GML Layer Example(gml-layer.html)」(または「Vector Behavior Example(behavior-fixed-http-gml.html)」を参考に GML 不ファイルを読み込んでレイヤを表示します。
最初に、HTML ファイルを準備します。

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







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





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




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






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







f 「ol009-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol012-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。

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







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






i 「gml-layer.html」のjavascript の一部をコピーして「ol012-nippon_bmi_akiruno_pgis.html」に貼り付けて、次のように修正します。
(29-2 で追加したところは削除します。)

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


 // ここから追加
 map.addLayer(new OpenLayers.Layer.Vector("GML", {
  protocol: new OpenLayers.Protocol.HTTP({
   url: "gml/polygon.xml", // ここを後で修正
   format: new OpenLayers.Format.GML()
  }),
  projection: map.displayProjection, // 追加
  strategies: [new OpenLayers.Strategy.Fixed()]
 }));
 // ここまで


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


31-3 GML ファイルの作成 Point
examples フォルダの gml フォルダにある gml ファイルを参考にファイルを準備します。

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




b 「ファイル」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「gml_point_akiruno.xml」と入力し、「完了」ボタンをクリックします。







c 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「gml」->「point.xml」をクリックして選択し、「OK」ボタンをクリックします。





d 「point.xml」の内容全部をコピーして「gml_point_akiruno.xml」に貼り付けて、次のように修正します。

ms:ogc_fid ms:name ms:id lon     lat
1          point   1     139.191 35.715
2          point2  2     139.211 35.742
3          point3  3     139.270 35.724
 
<?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://aneto.oco/cgi-bin/worldwfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=point&OUTPUTFORMAT=XMLSCHEMA">

 <gml:boundedBy>
  <gml:Box srsName="EPSG:4326">
   <gml:coordinates>139.191,35.715 139.270,35.742</gml:coordinates>
   <!-- フィーチャ(3点)を含む範囲 -->
  </gml:Box>
 </gml:boundedBy>
 <gml:featureMember>
  <ms:point fid="1">
   <gml:boundedBy>
    <gml:Box srsName="EPSG:4326">
     <gml:coordinates>139.191,35.715 139.191,35.715</gml:coordinates>
      <!-- このフィーチャの範囲(点なので同じ座標) -->
    </gml:Box>
   </gml:boundedBy>
   <ms:msGeometry>
    <gml:Point srsName="EPSG:4326">
     <gml:coordinates>139.191,35.715</gml:coordinates>
    </gml:Point>
   </ms:msGeometry>
   <ms:ogc_fid>1</ms:ogc_fid>
   <ms:name>point</ms:name>
   <ms:id>1</ms:id>
  </ms:point>
 </gml:featureMember>
 <!-- 表に合わせてあと2点分追加 -->
---
</wfs:FeatureCollection>

「ol012-nippon_bmi_akiruno_pgis.html」の「url: "gml/polygon.xml",」を「url: "gml_point_akiruno.xml",」に修正します。