plunkerでdeck.gl その13

概要

plunkerでdeck.glやってみた。
練習問題やってみた。

練習問題

covid-19のjsonを読んで、ヒートマップを表示せよ。

サンプルコード

let scatterplotLayer = new deck.ScatterplotLayer();
let heatmapLayer = new deck.HeatmapLayer();
const tileLayer = new deck.TileLayer({
  data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
  minZoom: 0,
  maxZoom: 19,
  tileSize: 256,
  renderSubLayers: props => new deck.BitmapLayer(props, {
    data: null,
    image: props.data,
    bounds: (({ west, south, east, north }) => [west, south, east, north])(props.tile.bbox),
  }),
});
const data = [];
const OPTIONS = ['intensity', 'radiusPixels', 'threshold', 'opacity'];
const deckgl = new deck.Deck({
  initialViewState: {
    longitude: 137,
    latitude: 37,
    zoom: 5,
    minZoom: 2,
    maxZoom: 8,
    pitch: 30,
    bearing: 10,
  },
  controller: true,
  layers: [tileLayer, scatterplotLayer, heatmapLayer, ]
});
const renderLayer = () => {
  const options = {};
  OPTIONS.forEach(key => {
    const value = document.getElementById(key).value;
    document.getElementById(key + '-value').innerHTML = value;
    options[key] = Number(value);
  });
  scatterplotLayer = new deck.ScatterplotLayer({
    data,
    opacity: 0.5,
    getPosition: ({p}) => p,
    getRadius: ({v}) => Math.sqrt(v) * 12,
    getFillColor: ({v}) => [Math.sqrt(v) / 10, 20, 60],
  });
  heatmapLayer = new deck.HeatmapLayer({
    data: data,
    id: 'heatmp-layer',
    pickable: false,
    getPosition: ({p}) => p,
    getWeight: 1,
    radiusPixels: 30,
    intensity: 2.5,
    threshold: 0.1,
    opacity: 0.3,
    ...options
  });
  deckgl.setProps({
    layers: [tileLayer, scatterplotLayer, heatmapLayer, ],
  });
}
OPTIONS.forEach(key => {
  document.getElementById(key).oninput = renderLayer;
});
d3.json("https://covid19-japan-web-api.now.sh/api/v1/prefectures", function(error, json) {
  var keys = ["id", "name_ja", "name_en", "lat", "lng", "cases", "deaths"];
  for (var i = 0; i < json.length; i++)
  {
    var s = {
      p: [json[i]["lng"], json[i]["lat"]], 
      v: json[i]["cases"] 
    };
    data.push(s);
  }
  renderLayer();
});

実行結果

成果物

以上。