OpenLayers 19c KMLでレイヤを描画 ポップアップ

KML Layer Example（sundials.html）を参考に、KMLでポップアップ表示する」レイヤを描画してみます。
（OpenLayers-2.6の場合。2.8ではスクリプトが違うので注意してください。）

次のスクリプトを追加します。(以前の変数などが重複していことがあるので、新しくスクリプトを作成しました。）

---
<script type="text/javascript">
 var popup;
 var map = null;
 var layer1
 var running = false;
 var extent = new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952);
  
 function init(){
  OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
   var mapOptions = {
    numZoomLevels: 10,
    maxResolution: 'auto',
    units: 'meters',
    maxExtent: extent
   };
  map = new OpenLayers.Map('map', mapOptions);
  layer1 = new OpenLayers.Layer.WMS("Kamakura Chojikai Sen WMS", "http://localhost/cgi-bin/mapserv?", {
   map: '/home/user/mapfile/kamakura_pgis.map',
   layers: 'chojisen,kenchiku,doro,tetsudo',
   format: 'image/png'
  }, {
   projection: 'EPSG:2451'
  });
 map.addLayer(layer1);
 map.zoomToMaxExtent();

 // ここから追加   
 map.addLayer(new OpenLayers.Layer.GML("KML", "kml_point2.kml", 
  {
   format: OpenLayers.Format.KML, 
   formatOptions: {
    extractStyles: true, 
    extractAttributes: true
    }
   }));            
 selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
  {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  
 map.addControl(selectControl);
 selectControl.activate();   
 // ここまで
 
 } // End of function init()

 // ここから追加   
 function onPopupClose(evt) {
  selectControl.unselect(selectedFeature);
 }
 function onFeatureSelect(feature) {
  selectedFeature = feature;
  popup = new OpenLayers.Popup.FramedCloud("chicken", 
   feature.geometry.getBounds().getCenterLonLat(),
   new OpenLayers.Size(100,100),
   "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
   null, true, onPopupClose);
  feature.popup = popup;
  map.addPopup(popup);
 }
 function onFeatureUnselect(feature) {
  map.removePopup(feature.popup);
  feature.popup.destroy();
  feature.popup = null;
 }
 //ここまで
</script>
---

kml_point2.xml　ファイルの内容を次のようにします。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
 <Document> <!-- アイテムとスタイルのコンテナ -->
 <name>Sundial Collection.kmz</name>
 <Style id="sn_sunny_copy69"> <!-- StyleMap や Feature で参照できる、呼び出し可能なスタイル グループを定義 -->
  <IconStyle> <!-- アイコンの描画方法を指定 -->
   <scale>1.2</scale> <!-- アイコンの x、y 方向のスケーリングを指定 -->
   <Icon> <!-- アイコンの画像を指定 -->
    <href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
   </Icon>
   <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <!-- <Point> に「固定されている」アイコン内の位置を指定 -->
  </IconStyle>
  <LabelStyle> <!-- Feature の <name> の描画方法を指定 -->
   <color>ff00aaff</color> <!-- αRGB -->
  </LabelStyle>
 </Style>
 <Style id="sh_sunny_copy70">
  <IconStyle>
   <scale>1.4</scale>
   <Icon>
    <href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
   </Icon>
   <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/> <!-- Placemark 内で指定した <Point> に「固定されている」アイコン内の位置を指定 -->
  </IconStyle>
  <LabelStyle>
   <color>ff00aaff</color>
  </LabelStyle>
 </Style>
 <StyleMap id="msn_sunny_copy70"> <!-- カーソルを重ねたときに強調 -->
  <Pair> <!-- 通常 -->
   <key>normal</key>
   <styleUrl>#sn_sunny_copy69</styleUrl> <!-- 参照先 -->
  </Pair>
  <Pair> <!-- カーソルを重ねたとき -->
   <key>highlight</key>
   <styleUrl>#sh_sunny_copy70</styleUrl> <!-- 参照先 -->
  </Pair>
 </StyleMap>
 <Folder> <!-- 他の Feature を階層的に配置 -->
  <name>Sundial Collection</name>
  <open>1</open> <!-- ドキュメントやフォルダの開閉状態 -->
  <LookAt> <!-- 仮想カメラの位置設定 -->
   <longitude>-26659.018612</longitude> <!-- 経度 dd -->
   <latitude>-71776.660019</latitude> <!-- 緯度 dd -->
   <altitude>0</altitude> <!-- 高度 m -->
   <range>9958750.824018393</range> <!-- 視点位置 LookAt からの距離 m -->
   <tilt>1.303827428939919e-015</tilt> <!-- 地表からの法線との角度 -->
   <heading>-16.31426621668193</heading> <!-- 視点の向き 北0 +-180 -->
  </LookAt>
  <Style> <!-- 呼び出し可能なスタイル グループを定義 -->
   <ListStyle> <!-- リスト ビューに Feature を表示する方法を指定 -->
    <listItemType>check</listItemType> <!-- check:Feature の表示/非表示は、その項目のチェックボックスの設定と連動 -->
    <bgColor>00ffffff</bgColor> <!-- αRGB -->
   </ListStyle>
  </Style>
  <Folder>
   <name>High Resolution</name>
   <Placemark>
    <name>鎌倉女子大学</name>
    <description><![CDATA[<p><img src="http://localhost/openlayers/OpenLayersproj/mapsign/tatsu2.png" width="150" height="150"></p>

     <p>Image source:<a href="http://localhost/openlayers/OpenLayersproj/mapsign/tatsu2.png">tatsu2.png</a></p>]]></description>
<!-- 説明バルーンに表示されるユーザー定義コンテンツ -->
<!-- CDATA: HTMLをそのまま使用できる -->
    <LookAt>
     <longitude>-26659.018612</longitude>
     <latitude>-71776.660019</latitude>
     <altitude>0</altitude>
     <range>111.6162130745504</range>
     <tilt>0</tilt>
     <heading>0.0003913059632004609</heading>
     <altitudeMode>relativeToGround</altitudeMode><!-- <coordinates> 要素内の標高コンポーネントの解釈方法 -->
     <!-- relativeToGround:特定の場所の実際の高度に対して相対的に設定 -->
    </LookAt>
    <styleUrl>#msn_sunny_copy70</styleUrl>
    <Point>
     <coordinates>-26659.018612,-71776.660019</coordinates>
    </Point>
   </Placemark>
  </Folder>
 </Folder>
</Document>
</kml>