WebGL Globeを利用した可視化実験

WebGL Globeはgoogleが作ったオープンソースの地理情報可視化プラットフォーム

本気で頑張るとこんなものも作れるらしい

とりあえず練習がてら、USGSのGeoJSONを可視化してみる。

ベースはwebgl globeのindex.html。

if(!Detector.webgl){Detector.addGetWebGLMessage();} else {var container = document.getElementById('container');var globe = DAT.Globe(document.getElementById(‘container'), function(label) {return new THREE.Color([0x87e7b0,0x87e7b0,0x87e7b0,0x87e7b0,0xcbf299,0xfcd1d1,0xff2800,0x9a0079][label]);});var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojsonp';document.getElementsByTagName('head')[0].appendChild(script);var eqfeed_callback = function(results){        var data = new Array();for (var i = 0; i < results.features.length; i++) {data.push(results.features[i].geometry['coordinates'][0]);data.push(results.features[i].geometry['coordinates'][1]);data.push(results.features[i].properties['mag']/30.0);data.push(Math.floor(results.features[i].properties['mag']));}globe.addData(data, {format: 'legend', name: 'earthquakes', animated: false});
globe.createPoints();globe.animate();document.body.style.backgroundImage = 'none'; // remove loading };}

こんな感じ。

いろいろと試してみよう！