实现类似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开发出好的应用
欢迎访问有趣吧开发者论坛