parpue.net » ストリードビュー http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 Google ストリートビューで鬼ごっこ http://parpue.net/web/259 http://parpue.net/web/259#comments Mon, 25 Aug 2008 11:07:00 +0000 okm http://parpue.net/?p=259 北海道までライジングサンを見に遊びにいってきました。ただいま！

今回は、現在までのストリートビューのプログラムを組み合わせて、
地図上を複数のキャラクターが動き回るサンプルを作ってみました。

クリックで新しいウィンドウにサンプル表示

一応IEでも確認しましたが、FireFox３環境を激しく推奨。
（IE謎のエラーがたまにでる・・・）

基本は、以前のサンプルの自動で動き回るキャラクターを複数にしただけです。
当たり判定とかも加えてゲームらしくしようかと思ったんですが、そこは挫折しましたｗ

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6.  
  7. var enemyList = [];
  8. var enemyMarker;
  9.  
  10. var zakoIcon;
  11.  
  12. // GoogleMapsの初期化
  13. function initMap(lat, lng){
  14.     map = new GMap2(document.getElementById("map"));
  15.     map.disableDragging();
  16.     var ctrlObj = new GMapTypeControl();
  17.     var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  18.     map.addControl(ctrlObj, pos);
  19.     map.setCenter(new GLatLng(lat, lng), 18);
  20.     initMarker();
  21.     initPanorama(lat, lng);
  22. }
  23.  
  24. function initMarker(){
  25.     zakoIcon = new GIcon();
  26.     zakoIcon.image = "./zako_front.gif";
  27.     zakoIcon.iconSize = new GSize(30, 57);
  28.     zakoIcon.iconAnchor = new GPoint(15, 57);
  29. }
  30.  
  31. function initPanorama(lat, lng){
  32.     streetViewClient = new GStreetviewClient;
  33.     streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  34.     nowLatLng = new GLatLng(lat, lng);
  35.     streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  36.         if(latlng == null){
  37.             document.getElementById("pano").style.display = "none";
  38.             return;
  39.         }
  40.         nowLatLng = latlng;
  41.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  42.  
  43.         GEvent.addListener(streetPanorama,
  44.                            "yawchanged",
  45.                            function(yaw){
  46.                                changeYaw(yaw);
  47.                            });
  48.  
  49.         GEvent.addListener(streetPanorama,
  50.                            "initialized",
  51.                            function(location){
  52.                                panoramaInitialized(location);
  53.                            });
  54.     });
  55.  
  56.     // キャラクタを配置
  57.     enemyOptions = [ { lat:35.661821, lng:139.666685},
  58.              { lat:35.662404, lng:139.665810},
  59.              { lat:35.66215,  lng:139.665270}           
  60.                       ];
  61.     for(i = 0; i <enemyOptions.length; i++){
  62.         var enemy = new Object;
  63.         enemy.lat = enemyOptions[i]["lat"];
  64.         enemy.lng = enemyOptions[i]["lng"];
  65.         enemy.marker = new GMarker(new GLatLng(enemy.lat, enemy.lng),{draggable:false, icon:zakoIcon});
  66.         map.addOverlay(enemy.marker);
  67.     enemy.moveInterval = setInterval("toNextPanorama("+i+")", 2000);
  68.         enemyList[i] = enemy;
  69.     }
  70. }
  71.  
  72. // 次の位置へ移動
  73. function toNextPanorama(enemy_num){
  74.     var enemy = enemyList[enemy_num];
  75.     clearInterval(enemy.moveInterval);
  76.  
  77.     enemy.pt = map.fromLatLngToContainerPixel(new GLatLng(enemy.lat, enemy.lng));
  78. /*
  79.     if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  80.         //alert("hit");
  81.     }
  82. */
  83.  
  84.     // 現在の表示位置の緯度経度を取得
  85.     streetViewClient.getNearestPanorama(new GLatLng(enemy.lat, enemy.lng), function(streetData){
  86.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  87.         var nextPanoId; // 次に向かうパノラマのID
  88.         if(neighbourCount == 1){
  89.             // 隣接するパノラマが１つだった場合はそこへ移動
  90.             enemy.nextYaw = streetData.links[0].yaw;
  91.             nextPanoId = streetData.links[0].panoId;
  92.         }else{
  93.              while(1){
  94.                  i = Math.floor( Math.random() * neighbourCount );
  95.                  if(enemy.lastPanoId != streetData.links[i].panoId){
  96.                  nextPanoId = streetData.links[i].panoId;
  97.                  enemy.nextYaw = streetData.links[i].yaw;
  98.                  break;
  99.             }
  100.         }
  101.     }
  102.     enemy.lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  103.     streetViewClient.getPanoramaById( nextPanoId,
  104.                                   function(nextStreetData){
  105.  
  106.                                                        enemy.nowLatLng = nextStreetData.location.latlng;
  107.                                                        var pov = streetPanorama.getPOV();
  108.                                                        nowYaw = pov.yaw;
  109.                                                        if(nowYaw> 360) nowYaw -= 360;
  110.                                                        if(Math.abs(nowYaw - enemy.nextYaw)> 180){
  111.                                                                if(nowYaw> enemy.nextYaw) enemy.nextYaw += 360;           
  112.                                                        }
  113.  
  114.                                                                map.removeOverlay(enemy.marker);
  115.                                                                zakoIcon.image = getIconFromYaw(enemy.nextYaw);
  116.                                    enemy.marker = new GMarker(new GLatLng(enemy.nowLatLng.lat(), enemy.nowLatLng.lng()),{draggable:false, icon:zakoIcon});
  117.                                                                map.addOverlay(enemy.marker);
  118.                                    enemy.lat = enemy.nowLatLng.lat();
  119.                                    enemy.lng = enemy.nowLatLng.lng();
  120.                                    enemy.pt = map.fromLatLngToContainerPixel(enemy.nowLatLng);
  121.  
  122. /*
  123.                                    if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  124.                                    //alert("hit");
  125.                                    }
  126. */
  127.                                                                enemy.moveInterval = setInterval("toNextPanorama("+enemy_num+")", 2000);
  128.                                                                enemyList[enemy_num] = enemy;
  129.                                       }
  130.                                  );
  131.  
  132.      });
  133. }
  134.  
  135. function getIconFromYaw(yaw){
  136.     gifFile = "./zako_f.gif";
  137.     if( yaw> 360 ) yaw -= 360;
  138.     if( yaw>= 315 || yaw <45  ) gifFile = "./zako_back.gif";
  139.     else if( yaw>= 45 && yaw < 135 ) gifFile = "./zako_right.gif";
  140.     else if( yaw>= 135 && yaw < 225 ) gifFile = "./zako_front.gif";
  141.     else if( yaw>= 225 || yaw <315 ) gifFile = "./zako_left.gif";
  142.     return gifFile;
  143. }
  144.  
  145. function changeYaw(yaw){
  146.     var gifFile;
  147.     if( yaw> 360 ) yaw -= 360;
  148.     if( yaw>= 315 || yaw <45  ) gifFile = "ue.gif";
  149.     else if( yaw>= 45 && yaw < 135 ) gifFile = "migi.gif";
  150.     else if( yaw>= 135 && yaw < 225 ) gifFile = "shita.gif";
  151.     else if( yaw>= 225 || yaw <315 ) gifFile = "hidari.gif";
  152.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  153. }
  154.  
  155. function panoramaInitialized(location){
  156.     map.panTo(location.latlng);
  157. }
]]> http://parpue.net/web/259/feed 1 Googleストリートビューでもっと下北をウロウロさせる！ http://parpue.net/web/241 http://parpue.net/web/241#comments Thu, 07 Aug 2008 08:59:34 +0000 okm http://parpue.net/?p=241 前作ったやつを、もうちょっと作りこみ。
曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。

ちょっとコレで、ゲームなぞ作ってみようかなーとか。

FlashPlayer9必須みたいです。
環境によってはすごい重いかもしれません。

↓実行サンプルとソース

曲がるときのイージングをJavaScriptのタイマーで強引にやって、
もっとさくさく歩くようにしました。

setInterval で角度をちょっとずつ動かしています。

>>text
JAVASCRIPT:
  1. // onEnterFrame的になめらかに曲がる
  2. function yawPan(){
  3.      var pov = streetPanorama.getPOV();
  4.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  5.          clearInterval(yawInterval);
  6.          moveNextPanorama();
  7.      }else{
  8.          nowYaw += (nextYaw - nowYaw) * 0.2;
  9.          pov.yaw = nowYaw;
  10.          streetPanorama.setPOV(pov);
  11.      }
  12. }

たまに隣のポジションの緯度経度の取得に失敗することがあるようですが、
基本的には、ほっとくとどこまでも歩いていきます。

緯度経度取得に頼らないで、panoIDで隣を取得していくように変えようかしら。

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var nextYaw;      // 次に向かう方向
  7. var nowYaw;
  8.  
  9. var moveInterval; // 移動のインターバル用
  10. var yawInterval;  // 向きを変えてから移動するため
  11. function initMap(lat, lng){
  12.    map = new GMap2(document.getElementById("map"));
  13.    map.disableDragging();
  14.    var ctrlObj = new GMapTypeControl();
  15.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  16.    map.addControl(ctrlObj, pos);
  17.    map.setCenter(new GLatLng(lat, lng), 18);
  18.    initPanorama(lat, lng);
  19. }
  20.  
  21. function initPanorama(lat, lng){
  22.    streetViewClient = new GStreetviewClient;
  23.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  24.    nowLatLng = new GLatLng(lat, lng);
  25.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  26.     if(latlng == null){
  27.         document.getElementById("pano").style.display = "none";
  28.             return;
  29.         }
  30.     nowLatLng = latlng;
  31.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  32.  
  33. /* 移動時に手動で変更
  34.     GEvent.addListener(streetPanorama,
  35.                                 "yawchanged",
  36.                                 function(yaw){
  37.                                     changeYaw(yaw);
  38.                                 });       
  39. */
  40.         // 3秒後に移動
  41.         moveInterval = setInterval(toNextPanorama, 2000);
  42.    })
  43.  
  44. }
  45.  
  46. function changeYaw(yaw){
  47.     var gifFile;
  48.     if( yaw> 360 ) yaw -= 360;
  49.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  50.     else if( yaw>= 45 && yaw < 135 ) gifFile = "/common/image/migi.gif";
  51.     else if( yaw>= 135 && yaw < 225 ) gifFile = "/common/image/shita.gif";
  52.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  53.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  54. }
  55.  
  56. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  57. function toNextPanorama(){
  58.    clearInterval(moveInterval);
  59.    // 現在の表示位置の緯度経度を取得
  60.    streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  61.  
  62.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  63.  
  64.     var nextPanoId; // 次に向かうパノラマのID
  65.     if(neighbourCount == 1){
  66.             // 隣接するパノラマが１つだった場合はそこへ移動
  67.             nextYaw = streetData.links[0].yaw;
  68.         nextPanoId = streetData.links[0].panoId;
  69.         }else{
  70.            while(1){
  71.                i = Math.floor( Math.random() * neighbourCount );
  72.                if(lastPanoId != streetData.links[i].panoId){
  73.                     nextPanoId = streetData.links[i].panoId;
  74.                     nextYaw = streetData.links[i].yaw;
  75.                     break;
  76.                }
  77.            }
  78.         }
  79.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  80.         streetViewClient.getPanoramaById( nextPanoId,
  81.                                           function(nextStreetData){
  82.                                               nowLatLng = nextStreetData.location.latlng;
  83.                                               var pov = streetPanorama.getPOV();
  84.                                               nowYaw = pov.yaw;
  85.                                               if(nowYaw> 360) nowYaw -= 360;
  86.                                               if(Math.abs(nowYaw - nextYaw)> 180){
  87.                                                   if(nowYaw> nextYaw) nextYaw += 360;
  88.                                                   else nowYaw += 360;
  89.                                               }
  90.                                               yawInterval = setInterval(yawPan, 100);
  91.  
  92.                                           }
  93.                                          );
  94.    }
  95.    );
  96. }
  97.  
  98. // onEnterFrame的になめらかに曲がる
  99. function yawPan(){
  100.      var pov = streetPanorama.getPOV();
  101.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  102.          clearInterval(yawInterval);
  103.          moveNextPanorama();
  104.      }else{
  105.          nowYaw += (nextYaw - nowYaw) * 0.2;
  106.          pov.yaw = nowYaw;
  107.          streetPanorama.setPOV(pov);
  108.      }
  109. }
  110.  
  111. function moveNextPanorama(){
  112.     clearInterval(yawInterval);
  113.     // さらに次のポイントへ移動へ
  114.     map.panTo(nowLatLng);
  115.  
  116.     // 移動
  117. 　　changeYaw(nextYaw);
  118.     streetPanorama.followLink(nextYaw);
  119.     moveInterval = setInterval(toNextPanorama, 1500);
  120. }
]]> http://parpue.net/web/241/feed 0