E2D3でCesiumを使う方法


Code for YOKOHAMA ミートアップ!#2

Created by @_shimizu

目次


  1. 自己紹介
  2. E2D3とは
  3. エクセルでCesium
  4. コントリビュ―ター向け

自己紹介


誰ですか?



  • 清水正行
  • 群馬県高崎市在住
  • 社内SE

Blog

こんなのを作って
遊んでいます

都道府県を散布図にする


D3.jsを使って作ってます

I <3 D3.js

でも Leaflet とか Cesium とかも弄ってます

やってみたこと

今日はCesiumの話(?)をします。

E2D3とは


Excel to D3.js

エクセルのチャートで
満足してますか?

使いたいチャートが無かった時どうする?


  • 他のソフトを探す
  • セル職人の秘伝の技
  • あきらめる

そこでE2D3ですよ!


エクセルにD3のパワーを


Officeストアで配信中


仕組み

ザックリとした説明

E2D3の特徴


  • オープンソース
  • コントリビュータ(chart職人)
  • イベント(勉強会、ハッカソン、etc...)


chartを作成するエンジニアと利用者を繋ぐ仕組み

エコシステム

欲しいチャートを#e2d3をつけてつぶやくと誰か作ってくれるかも?!

エクセルでCesium


Excel to Cesium

きっかけ

D3が動くならCesiumだって動くんじゃね?

E2Cesiumの利点


  • 見た目が派手
  • 非エンジニアでもデータを表示できる
  • 作ったものは共有し使いまわせる


DEMO

注意点


  • IEのバージョンによっては動かない
  • 結構負荷が高い

全ての人にCesiumの表現力を!

コントリビュ―ター向け


Hello Cesium

開発環境のセットアップ方法


Getting Started

ファイル構成


main.css


cesiumのcssをimport


@import url(./Widgets/widgets.css);

#cesiumContainer {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

main.js


requireでcesiumライブラリを読み込む

//# require=d3,cesium


//Cesiumが読み込まれているか確認
console.log("installed", Cesium);

//Cesium用 divの追加 
var cesiumContainer = d3.select("#e2d3-chart-area")
	.append('div')
	.attr('id', 'cesiumContainer')

//ceisumビューアー表示
var viewer = new Cesium.Viewer('cesiumContainer');

ちょ〜かんたん!

マーカー表示


requireでcesiumライブラリを読み込む


//# require=d3,cesium

//Cesium用 divの追加 
var cesiumContainer = d3.select("#e2d3-chart-area")
  .append('div')
  .attr('id', 'cesiumContainer')

//ceisumビューアー表示
var viewer = new Cesium.Viewer('cesiumContainer');



function update(data) {
  //Excelから取得したデータをGeoJSONにする
  var geojson =  toPointGeoJSON(toObjectArray(data));
   

  //現在表示されているマーカーを削除する
  viewer.dataSources.removeAll();

  //マーカーのスタイル指定をgeojsonデータに追加する
  geojson.features.forEach(function(d){
    d.properties['label'] = d.properties['名前'];
    d.properties['marker-color'] = d.properties['色'] || '#ccc';
    d.properties['marker-symbol'] =  d.properties['アイコン'] || '?';
  });

  //マーカー表示
  viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geojson));
  
  //スタート地点へズーム
  var lnglat = geojson.features[0].geometry.coordinates;
  panTo(lnglat[0], lnglat[1])  
}


function panTo(lng, lat){
  viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(lng, lat, 700000)
  });    
}

//[{key:value},{key:value}]の形式に変換
function toObjectArray(array){
  var header = array.shift();
  var objArray = []; 
  for(var b=0; b < array.length; b++){
    var tmp = {};
    for(var i=0; i< header.length; i++){
      tmp[header[i]]=array[b][i];
    }
    objArray.push(tmp);
  }
  return objArray;
}

//Geojsonに変換
function toPointGeoJSON(dataObj){
  var container = {
    'type': 'FeatureCollection',
    'features': []
  }
  
  var pointTemplate = {
    'type': 'Feature',
    'properties': {},
    'geometry': {
      'type': 'Point',
      'coordinates': [null,null]
    }
  }
  
  var points = dataObj.map(function(d){
    var point =JSON.parse(JSON.stringify(pointTemplate));
    point.properties = d;
    point.geometry.coordinates = [d['経度'], d['緯度']];
    return point
  });
  
  container.features = points;
  
  return container;
}

詳細はブログに載せます