plunkerでdeck.gl その3

概要

plunkerでdeck.glやってみた。
arclayer、使ってみた。
とにかく、これが使いたかった。

写真

サンプルコード

var airports = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "C28_000": "cf04_00001" }, "geometry": { "type": "Point", "coordinates": [ 129.922389, 32.914222 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00002" }, "geometry": { "type": "Point", "coordinates": [ 131.03151, 33.839341 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00003" }, "geometry": { "type": "Point", "coordinates": [ 140.408978, 36.177626 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00004" }, "geometry": { "type": "Point", "coordinates": [ 133.32986, 36.178019 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00005" }, "geometry": { "type": "Point", "coordinates": [ 135.440444, 34.791361 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00006" }, "geometry": { "type": "Point", "coordinates": [ 141.041329, 45.452279 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00007" }, "geometry": { "type": "Point", "coordinates": [ 141.797528, 45.399583 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00008" }, "geometry": { "type": "Point", "coordinates": [ 141.183611, 45.243972 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00009" }, "geometry": { "type": "Point", "coordinates": [ 143.212889, 42.732139 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00010" }, "geometry": { "type": "Point", "coordinates": [ 144.196306, 43.045083 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00011" }, "geometry": { "type": "Point", "coordinates": [ 144.955722, 43.572889 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00013" }, "geometry": { "type": "Point", "coordinates": [ 144.158889, 43.881417 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00014" }, "geometry": { "type": "Point", "coordinates": [ 143.407056, 44.306528 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00015" }, "geometry": { "type": "Point", "coordinates": [ 142.454028, 43.670944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00016" }, "geometry": { "type": "Point", "coordinates": [ 141.681306, 42.788083 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00017" }, "geometry": { "type": "Point", "coordinates": [ 141.382083, 43.110694 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00018" }, "geometry": { "type": "Point", "coordinates": [ 140.814944, 41.77575 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00019" }, "geometry": { "type": "Point", "coordinates": [ 139.43528069000001, 42.07241681 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00020" }, "geometry": { "type": "Point", "coordinates": [ 140.689, 40.738333 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00021" }, "geometry": { "type": "Point", "coordinates": [ 141.38775, 40.696583 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00022" }, "geometry": { "type": "Point", "coordinates": [ 140.372278, 40.195583 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00023" }, "geometry": { "type": "Point", "coordinates": [ 140.219806, 39.611861 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00024" }, "geometry": { "type": "Point", "coordinates": [ 141.131083, 39.426917 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00025" }, "geometry": { "type": "Point", "coordinates": [ 139.787694, 38.81575 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00026" }, "geometry": { "type": "Point", "coordinates": [ 140.366333, 38.410667 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00027" }, "geometry": { "type": "Point", "coordinates": [ 140.92925, 38.138167 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00028" }, "geometry": { "type": "Point", "coordinates": [ 140.433528, 37.227 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00029" }, "geometry": { "type": "Point", "coordinates": [ 139.529222, 35.672944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00030" }, "geometry": { "type": "Point", "coordinates": [ 139.783556, 35.548667 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00031" }, "geometry": { "type": "Point", "coordinates": [ 139.134528, 34.190389 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00032" }, "geometry": { "type": "Point", "coordinates": [ 139.363428, 34.782482 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00033" }, "geometry": { "type": "Point", "coordinates": [ 139.269341, 34.370305 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00034" }, "geometry": { "type": "Point", "coordinates": [ 139.558611, 34.073556 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00035" }, "geometry": { "type": "Point", "coordinates": [ 139.782833, 33.116361 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00036" }, "geometry": { "type": "Point", "coordinates": [ 136.919861, 35.253667 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00037" }, "geometry": { "type": "Point", "coordinates": [ 135.596333, 34.597944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00038" }, "geometry": { "type": "Point", "coordinates": [ 135.360583, 33.66225 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00039" }, "geometry": { "type": "Point", "coordinates": [ 139.111278, 37.953278 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00040" }, "geometry": { "type": "Point", "coordinates": [ 138.4085, 38.062306 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00041" }, "geometry": { "type": "Point", "coordinates": [ 129.783861, 33.749972 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00042" }, "geometry": { "type": "Point", "coordinates": [ 129.326228, 34.285781 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00043" }, "geometry": { "type": "Point", "coordinates": [ 128.837528, 32.668306 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00044" }, "geometry": { "type": "Point", "coordinates": [ 130.155417, 32.482694 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00045" }, "geometry": { "type": "Point", "coordinates": [ 130.716306, 31.800917 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00047" }, "geometry": { "type": "Point", "coordinates": [ 130.991519, 30.609076 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00048" }, "geometry": { "type": "Point", "coordinates": [ 130.658861, 30.383417 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00049" }, "geometry": { "type": "Point", "coordinates": [ 130.858222, 32.834556 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00050" }, "geometry": { "type": "Point", "coordinates": [ 131.4415, 31.872806 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00051" }, "geometry": { "type": "Point", "coordinates": [ 131.502496, 33.027778 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00052" }, "geometry": { "type": "Point", "coordinates": [ 133.674278, 33.547333 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00053" }, "geometry": { "type": "Point", "coordinates": [ 132.704111, 33.828778 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00054" }, "geometry": { "type": "Point", "coordinates": [ 134.018333, 34.218667 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00055" }, "geometry": { "type": "Point", "coordinates": [ 134.594667, 34.138583 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00056" }, "geometry": { "type": "Point", "coordinates": [ 128.704361, 27.432821 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00057" }, "geometry": { "type": "Point", "coordinates": [ 128.399833, 27.043222 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00058" }, "geometry": { "type": "Point", "coordinates": [ 131.324472, 25.944639 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00059" }, "geometry": { "type": "Point", "coordinates": [ 131.265306, 25.845722 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00060" }, "geometry": { "type": "Point", "coordinates": [ 127.785417, 26.723861 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00061" }, "geometry": { "type": "Point", "coordinates": [ 126.71759, 26.36489 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00062" }, "geometry": { "type": "Point", "coordinates": [ 125.297222, 24.779222 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00063" }, "geometry": { "type": "Point", "coordinates": [ 125.149112, 24.826951 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00065" }, "geometry": { "type": "Point", "coordinates": [ 123.804528, 24.060194 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00066" }, "geometry": { "type": "Point", "coordinates": [ 122.979833, 24.465361 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00067" }, "geometry": { "type": "Point", "coordinates": [ 124.677444, 24.653944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00068" }, "geometry": { "type": "Point", "coordinates": [ 137.924972, 36.164417 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00069" }, "geometry": { "type": "Point", "coordinates": [ 136.957306, 37.295223 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00070" }, "geometry": { "type": "Point", "coordinates": [ 137.189444, 36.64325 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00071" }, "geometry": { "type": "Point", "coordinates": [ 136.413528, 36.401889 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00072" }, "geometry": { "type": "Point", "coordinates": [ 136.221944, 36.139944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00073" }, "geometry": { "type": "Point", "coordinates": [ 134.789333, 35.516278 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00074" }, "geometry": { "type": "Point", "coordinates": [ 134.167722, 35.526556 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00075" }, "geometry": { "type": "Point", "coordinates": [ 133.852917, 34.760083 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00076" }, "geometry": { "type": "Point", "coordinates": [ 133.928167, 34.592333 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00077" }, "geometry": { "type": "Point", "coordinates": [ 133.245306, 35.500667 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00078" }, "geometry": { "type": "Point", "coordinates": [ 132.886056, 35.414861 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00079" }, "geometry": { "type": "Point", "coordinates": [ 132.91925, 34.439861 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00080" }, "geometry": { "type": "Point", "coordinates": [ 131.796583, 34.678528 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00082" }, "geometry": { "type": "Point", "coordinates": [ 131.273793, 33.932626 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00083" }, "geometry": { "type": "Point", "coordinates": [ 130.44725, 33.598778 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00084" }, "geometry": { "type": "Point", "coordinates": [ 130.302972, 33.153306 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00085" }, "geometry": { "type": "Point", "coordinates": [ 128.883278, 27.832194 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00086" }, "geometry": { "type": "Point", "coordinates": [ 129.927235, 28.319612 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00087" }, "geometry": { "type": "Point", "coordinates": [ 127.293361, 26.171222 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00088" }, "geometry": { "type": "Point", "coordinates": [ 127.65075, 26.206556 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00089" }, "geometry": { "type": "Point", "coordinates": [ 127.23925, 26.592944 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00090" }, "geometry": { "type": "Point", "coordinates": [ 140.38425, 35.763972 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00093" }, "geometry": { "type": "Point", "coordinates": [ 138.177553, 34.795237 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00094" }, "geometry": { "type": "Point", "coordinates": [ 135.244139, 34.434417 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00095" }, "geometry": { "type": "Point", "coordinates": [ 136.814472, 34.859611 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00096" }, "geometry": { "type": "Point", "coordinates": [ 131.732722, 33.477361 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00097" }, "geometry": { "type": "Point", "coordinates": [ 135.2287, 34.636826 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00098" }, "geometry": { "type": "Point", "coordinates": [ 129.708222, 28.431722 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00099" }, "geometry": { "type": "Point", "coordinates": [ 129.191556, 33.01125 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00100" }, "geometry": { "type": "Point", "coordinates": [ 129.08895, 33.190525 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00064" }, "geometry": { "type": "Point", "coordinates": [ 124.24593599000001, 24.39092473 ] } },
{ "type": "Feature", "properties": { "C28_000": "cf04_00101" }, "geometry": { "type": "Point", "coordinates": [ 132.235052, 34.158808 ] } }
]
};
const DEFAULT_COLOR = [29, 145, 192];
const arcLayer = new deck.ArcLayer({
    id: 'arc',
    data: airports.features,
    getSourcePosition: [139.78069690676142, 35.55150562348115],
    getTargetPosition: d => d.geometry.coordinates,
    getSourceColor: DEFAULT_COLOR,
    getTargetColor: DEFAULT_COLOR,
    getWidth: 1.0
});

const tileLayer = new deck.TileLayer({
    data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
    minZoom: 0,
    maxZoom: 19,
    tileSize: 256,
    renderSubLayers: props => {
        const {
            bbox: {
        west, 
        south, 
        east, 
        north
      }
        } = props.tile;
        return new deck.BitmapLayer(props, {
            data: null,
            image: props.data,
            bounds: [west, south, east, north]
        });
    }
});

const deckgl = new deck.DeckGL({
  initialViewState: {
    latitude: 35.0,
    longitude: 139.0,
    zoom: 6,
    maxZoom: 16,
    pitch: 80,
    bearing: -15
  },
  controller: true,
    layers: [tileLayer, arcLayer],
});

成果物

以上。