GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

Cesium E2D3

E2D3でCesiumを使う方法

投稿日:

先日のミートアップで発表した「E2D3でCesiumを使う方法」の詳細です。
E2D3を使ってエクセル上にCesiumを表示します。

ちなみにE2D3の開発者向け情報になるので、普通にE2D3を使いたい方は下記の作業は必要ありません。
ExcelのOffice StoreからE2D3をインストールして使用してください。

開発環境の構築

E2D3の開発環境の構築方法については下記を参照してください。

Getting Started · e2d3/e2d3 Wiki

Cesiumのダウンロード

Cesiumのページよりzipファイルをダウンロードします。
解凍するといろいろ出てきますが、必要なのはBuildフォルダの中身だけです。

cesium files

Cesium Downloads

ファイル構成

E2D3のcontribフォルダに新たなチャートフォルダとしてCesium(任意)を作成し上記で取り出したBuildフォルダの中身をコピーします。

e2d3cesiumfiles

内訳はこんな感じ

E2D3側のリソースは他のチャートフォルダからコピペして編集するのが楽です。

Hello Cesium

main.cssとmain.jsの中身を書き換え、とりあえずE2D3上でCesiumを表示してみます。

main.cssの中でcesium用のwidgets.cssを読み込みます。

冒頭のrequireコマンドでd3とcesiumを読み込んでいます。

main.cssとmain.jsを保存してExcelを起動しE2D3を実行すればCesiumがウインド内に表示されるはずです。

マーカーを表示する

上記コードは単にCesiumを表示するだけなので、セルのデータを元にマーカーを表示してみます。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。