plunkerでcesium

1377 ワード
d3.js Plunker Cesium COVID-19 d3.js テキストリンク

概要

plunkerでcesiumやってみた。
covid-19の棒グラフやってみた。

写真

サンプルコード

var viewer = new Cesium.Viewer('cesiumContainer', { 
  infoBox: false
});
var entities = viewer.entities;
var boxes = entities.add(new Cesium.Entity());
d3.json("https://covid19-japan-web-api.now.sh/api/v1/prefectures", function(error, data) {
  var keys = ["id", "name_ja", "name_en", "lat", "lng", "cases", "deaths"];
  for (var i = 0; i < data.length; i++)
  {
    var n = 200.0 * data[i]["cases"];
    entities.add({
      parent: boxes,
      position: Cesium.Cartesian3.fromDegrees(data[i]["lng"], data[i]["lat"]),
      cylinder: {
        length: n,
        topRadius: 20000.0,
        bottomRadius: 20000.0,
        material: Cesium.Color.fromRandom({
          alpha: 0.6
        }),
      }
    });
  }
  viewer.zoomTo(viewer.entities);
});

成果物

以上。