[ヅ] 『三つ子地図』を作ろうとして失敗 (2009-04-14)

『三つ子地図』を作ろうとして失敗 (2009-04-14)

以前に作った双子地図に Microsoft Virtual Earth を足して『三つ子地図』にしようと思ったけど、簡単にできなかったのでアキラメ。

なぜか、CPU負荷が非常に高くてスクリプト停止しちゃったりするのでスクリーンショットだけ撮ってみた。

三つ子地図～ GYM Triplet Maps (Google Maps API, Yahoo!地図Web API and Microsoft Virtual Earth SDK)

なんだか Virtual Earth 版だけちょっと地図の位置がちがう。。。
とりあえず放置。

なぜか、うちのPCだと双子地図もフリーズ気味。
そして、iPod nano を充電しながらだとますますフリーズ率が高くなる。。。

以下、フリーズ気味のHTML+JavaScript(JScript?)ソースコード。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>三つ子地図 ～ GYM Triplet Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;&amp;key=ABQIAAAAqxOkyUyDMkNeEFYNPlr4PBTTHNfyqJQfEzzwiULtwYMwaQhVxRTohG4rULEL21eOSknc1ZgY8UqVLQ"></script>
<script type="text/javascript" src="http://map.yahooapis.jp/MapsService/js/V2/?appid=nilabinfo"></script>
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
 
  <style>
 
    body {
      color: #c0c0c0;
      background-color: #000000;
      font-family: monospace;
    }
 
    a:link {
      color: #d0d0e0;
    }
 
    a:visited {
      color: #909080;
    }
 
    a:hover {
      color: #ff0000;
    }
 
    a:active {
      color: #b31e34;
    }
 
  </style>
 
<script type="text/javascript">
 
  var g_gmap = null;
  var g_ymap = null;
  var g_mmap = null;
 
  function gmap_moved(){
    gmap_lead(true);
  }
 
  function gmap_moving(){
    gmap_lead(false);
  }
 
  function gmap_lead(disp_location){
    var gpos = g_gmap.getCenter();
    var ll   = wgs84_to_tokyo(gpos.lat(), gpos.lng());
    var ypos = new YLLPoint(ll.lat + "," + ll.lng);
    var mpos = new VELatLong(ll.lat, ll.lng);
    g_ymap.moveTo(ypos);
    g_mmap.SetCenter(mpos);
    if(disp_location){
      set_location(gpos, ypos);
    }
  }
 
  function ymap_moved(){
    ymap_lead(true);
  }
 
  function ymap_moving(){
    ymap_lead(false);
  }
 
  function ymap_lead(disp_location){
    var ypos = g_ymap.getCenter();
    var ll   = tokyo_to_wgs84(ypos.lat, ypos.lon);
    var gpos = new GLatLng(ll.lat, ll.lng);
    var mpos = new VELatLong(ll.lat, ll.lng);
    //g_gmap.panTo(gpos); // これを使うとY!地図のドラッグが遅くなる
    g_gmap.setCenter(gpos);
    g_mmap.SetCenter(mpos);
    if(disp_location){
      set_location(gpos, ypos);
    }
  }
 
  function mmap_moved(){
    mmap_lead(true);
  }
 
  function mmap_lead(disp_location){
    var mpos = g_mmap.GetCenter();
    var gpos = new GLatLng(mpos.Latitude, mpos.Longitude);
    var ll   = wgs84_to_tokyo(gpos.lat(), gpos.lng());
    var ypos = new YLLPoint(ll.lat + "," + ll.lng);
    g_gmap.setCenter(gpos);
    g_ymap.moveTo(ypos);
    if(disp_location){
      set_location(gpos, ypos);
    }
  }
 
  function set_location(gpos, ypos){
    //document.getElementById("wgs84").innerHTML = "wgs84: " + gpos.lat() + "," + gpos.lng();
    //document.getElementById("tokyo").innerHTML = "tokyo: " + ypos.lat + "," + ypos.lon;
    //document.getElementById("locapoint").innerHTML = "LocaPoint: " + wgs84_to_locapoint(gpos.lat(), gpos.lng());
  }
 
  // Ref. Mac･GPS･Perl - 測地系の変換方法
  //      http://homepage3.nifty.com/Nowral/02_DATUM/02_DATUM.html#HowTo
  function tokyo_to_wgs84(lat, lng){
    var latlng = new Object();
    latlng.lat = lat - 0.00010695 * lat + 0.000017464 * lng + 0.0046017;
    latlng.lng = lng - 0.000046038 * lat - 0.000083043 * lng + 0.010040;
    return latlng;
  }
  function wgs84_to_tokyo(lat, lng){
    var latlng = new Object();
    latlng.lat = lat + 0.00010696 * lat - 0.000017467 * lng - 0.0046020;
    latlng.lng = lng + 0.000046047 * lat + 0.000083049 * lng - 0.010041;
    return latlng;
  }
 
  function wgs84_to_locapoint(lat, lng){
    var obj = new Object();
    obj.latitude  = lat;
    obj.longitude = lng;
    return LatLon2LocaPoint(obj);
  }
 
  // Ref. LocaPoint Specification
  //      http://www.locapoint.com/en/samplecode.html#JS_code
  function LatLon2LocaPoint(location){
 
    var latitude_step = (location.latitude + 90)/180*45697600;
    var longitude_step = (location.longitude + 180)/360*45697600;
 
    // fromCharCode <-> fontCharCode?
    var locapoint = String.fromCharCode(
      latitude_step/1757600%26 + 65,
      latitude_step/67600%26 + 65,
      latitude_step/6760%10 + 48,
      46,
      longitude_step/1757600%26 + 65,
      longitude_step/67600%26 + 65,
      longitude_step/6760%10 + 48,
      46,
      latitude_step/260%26 + 65,
      latitude_step/10%26 + 65,
      latitude_step/1%10 + 48,
      46,
      longitude_step/260%26 + 65,
      longitude_step/10%26 + 65,
      longitude_step/1%10 + 48
      );
 
    return(locapoint);
  }
 
  function load(){
 
    // Google Maps API
    g_gmap = new GMap2(document.getElementById("gmap"));
    g_gmap.addControl(new GSmallMapControl());
    g_gmap.addControl(new GMapTypeControl());
    g_gmap.enableDoubleClickZoom();
    g_gmap.enableContinuousZoom();
    g_gmap.setCenter(new GLatLng(35.185009, 136.899693), 16);
 
    // Yahoo!地図情報Webサービス
    g_ymap = new YahooMapsCtrl("ymap", "35.10.56.332,136.54.7.333");
 
    // Microsoft Virtual Earth SDK - Virtual Earth Map Control SDK
    g_mmap = new VEMap('mmap');
    g_mmap.LoadMap(new VELatLong(35.185009, 136.899693), 16, VEMapStyle.Road, false, VEMapMode.Mode2D, false, 1);
 
 
    GEvent.addListener(g_gmap, 'move', gmap_moving);
    GEvent.addListener(g_gmap, 'moveend', gmap_moved);
 
    g_ymap.addEvent(YEventType.MAP_MOVING, ymap_moving);
    g_ymap.addEvent(YEventType.MAP_MOVED, ymap_moved);
 
    g_mmap.AttachEvent("onchangeview", mmap_moved);
  }
 
  function unload(){
    GUnload();
  }
 
</script>
 
</head>
<body onload="load();" onunload="unload();">
 
<p>三つ子地図 ～ GYM Triplet Maps (Google Maps API, Yahoo!地図Web API and Microsoft Virtual Earth SDK)</p>
<title></title>
 
<noscript>JavaScriptをONにしてリロードしてね♪</noscript>
 
<table>
<tr>
  <td>
    <div id="gmap" style="width: 283px; height: 350px"></div>
  </td>
 
  <td>
    <div id="ymap" style="width: 283px; height: 350px"></div>
  </td>
 
  <td>
    <div id="mmap" style="position:relative; width: 283px; height: 350px;"></div>
  </td>
</tr>
<tr>
  <td colspan="3">
    <p>
    <a href="http://www.google.com/apis/maps/">Google Maps API</a> と <a href="http://developer.yahoo.co.jp/webapi/map/">Yahoo!地図Web API</a> と <a href="http://msdn.microsoft.com/ja-jp/library/aa905677.aspx">Microsoft Virtual Earth SDK</a> の Mix-in 実験。<br />
    3つの地図を同時に動かす。<br />
    </p>
    <div style="margin:15px 15px 15px 15px" id="wgs84"></div>
    <div style="margin:15px 15px 15px 15px" id="tokyo"></div>
    <div style="margin:15px 15px 15px 15px" id="locapoint"></div>
  </td>
</tr>
</table>
 
<p>
 
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about"><img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:15px 15px 15px 15px"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</p>
 
<p>
by <a href="/">NI-Lab.</a>
</p>
 
</body>
</html>

それにしても Microsoft Virtual Earth SDK (いまの名前は Windows Virtual Earth SDK だっけ？)は使いにくい。ドキュメントは見にくい(醜い)し、IEじゃないと動かないとか聞くし(ほんとか？)、地図の画像はきれいじゃないし。ただ、3Dとかの新しい方向なら使えるかも。

Ref.
-双子地図 (Google Maps API ＋ Yahoo!地図情報Webサービス)
-Google Maps API
-Yahoo!地図Web API
-(Microsoft) Windows Virtual Earth SDK

tags: zlashdot GIS GoogleMapsAPI YahooJapanMapsAPI

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.

『三つ子地図』を作ろうとして失敗 (2009-04-14)