實現類似Google Earth的效果，做自己網站用戶活動的3D效果原理

源碼下載（javascript實現）

效果參考:三生萬物，萬物有趣
原理：
//poly9發佈了一個叫作  Free Earth的 3D 地圖
//通過他們的 Javascript API你也可以做地標或添加視頻或者控制3D地球模型的的轉動.
//利用yahoo ui js庫
var Longwosion = {};
Longwosion.Youqu3d = function() {
    var Event = YAHOO.util.Event;
    var Dom = YAHOO.util.Dom;
    var $ = Dom.get;
   
    var map;
    var markerIcon1;
    var messages = [];
   
    var loadData = function(){//調用有趣吧的api，獲取json數據，形成類似<script>render([..]);</script>的js放到頁面
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'http://www.youqubar.com/api/status_json?' + Math.random() + '&count=20&callback=render';
        document.getElementsByTagName('head')[0].appendChild(s);
    };   
   
    var resizeMap = function() {
        var m = $("map");
        var a = $("copyright");
        var c = $("fanfouCounter");
        var w = Dom.getViewportWidth();
        var h = Dom.getViewportHeight();
        if (m) {
            m.style.top    = 85 + 'px';
            m.style.left   = 70 + 'px'; 
            m.style.width  = w - 170 + 'px';
            m.style.height = h- 150 + 'px';
        };
        if(a) {a.style.width = w - 170 + 'px'; a.style.left = '70px';};
        if(c) {c.style.left = (w - 200)/2 + 'px';};       
    };

    var parseDataToHTML = function(src) {    //解析json數據的一個，形成氣泡div的html   
        return     '<div><a href="' _fcksavedurl=""'" _fcksavedurl=""'" + src.user.url +
                '" target="_blank" class="avatar"><img src="' + src.user.profile_image_url +
                '" /></a><p><font size="14"><a href="'+src.user.uurl+
                '" target="_blank">' + src.text.replace('//r//n','') +
                '</a></font></p><p><font size="12"></a><u>' + src.user.name +
                '</u></a> 在 <b>' +    (src.user.location || '地球上') +
                '</b>' + src.created_at +'</p></div>';
    };   
       
    return {
        initalize : function() {
            Event.on(window, 'resize', resizeMap);
            resizeMap();
            //return;
            map = new FE.Map($("map"));
            map.onLoad = function(){
                var h = Dom.getViewportHeight();
                map.setTargetLatLng(new FE.LatLng(39.89945, 116.40969)); //Beijing
                map.zoomTo(30000000-(h*h*32));
                markerIcon1 = new FE.Icon('http://www.youqubar.com/user.png');//3D上面氣泡下面的小圖標
                loadData();               
            };
            map.load();           
        },
       
        render : function(jsonObject) {
            var counter = $('num');
            var i, n = jsonObject.length;
            for (i = n-1 ; i >= 0; i--){
                var geo  = getLocation(jsonObject[i].user.location);
                var info = parseDataToHTML(jsonObject[i]);
                var len  = jsonObject[i].text.toString().length;
                messages.push([geo[0],geo[1],info, len]);//推送氣泡到3D上
            };
           
            var renderOne = function() {
                var cc = $("counter")
                if (typeof messages != 'object') return;
                if (messages.length == 0) {
                    $("counter").innerHTML = "獲取數據中....."
                    loadData();    return;   
                }           
                map.clearOverlays();
                map.closeInfoWindow();
                if ( t = messages.pop() ) {                   
                    var marker = new FE.Pushpin(new FE.LatLng(t[0], t[1]), markerIcon1);
                    FE.Event.addListener(marker, 'click',
                        function(_marker){_marker.openInfoWindowHtml(t[2], 300, 100+t[3]);});
                    map.addOverlay(marker);
                    $("counter").innerHTML = messages.length +"條新消息";
                    map.panTo(marker._location, 5);
                    lastMarker = marker;
                    setTimeout(function(){lastMarker.dispatch('click');}, 850);
                };
                setTimeout(renderOne, 5000);
            };
            renderOne();
        }
    }
}();

var me = Longwosion.Youqu3d;
var render = Longwosion.Youqu3d.render;

YAHOO.util.Event.on(window, 'load', me.initalize, me, true);
//json的結果就是執行render，render中的renderOne就是推送氣泡

這篇文章實際上介紹給新一代互聯網開發者一種訪問3D API實現類似Google Earth的方法，形成自己網站用戶的活動3D
這也是現在流行的開發模式，歡迎大家使用有趣吧的API開發出好的應用
歡迎訪問有趣吧開發者論壇