cesiumでd3.js

概要

cesiumでd3.jsを使ってみた。

写真

サンプルコード

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(140.1, 37.9, 2000.0),
    orientation: {
        heading: Cesium.Math.toRadians(-20.0),
        pitch: Cesium.Math.toRadians(-35.0),
        roll: 0.0
    }
});
var pinBuilder = new Cesium.PinBuilder();
var url = '/assets/a/U/k/W/aUkWM';
d3.json(url, function(error, json) {
    var mise = json.bikuya;
    for (var key in mise) 
    {
        var name = mise[key].name;
        var latlon = mise[key].latlon.split(",");
        var e = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(latlon[1], latlon[0]),
            label: {
                text: name,
                verticalOrigin: Cesium.VerticalOrigin.TOP
            },
            billboard: {
                image: pinBuilder.fromColor(Cesium.Color.SALMON, 10).toDataURL(),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            }
        });
    }
});

成果物

以上。