D3の投影法を使ってDeck.glに地図を表示する

概要

Deck.glでサポートされている地図の投影法は、基本webメルカトルになるのですが、d3-geo-projectionを使ってwebメルカトル以外の投影法で地図を表示します。

サンプルコード

ウインドが小さいと何やっているか分かりづらいので、こちらで確認してください。

概要

やっていることは単純で、読み込んだgeojsonのgeometry.coordinates(緯度経度)の値を値をd3のプロジェクション関数を使ってスクリーン上の座表に変換し、それをDeck.glのPolygonLayerでポリゴンとして表示しています。

const layer = new PolygonLayer({
    id: 'polygon-layer',
    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
    data: data.features,
    stroked: true,
    filled: true,
    wireframe: true,
    lineWidthMinPixels: 1,
    getPolygon: d => {
        if (!d.geometry.coordinates || !d.geometry.coordinates[0]) return [[0, 0], [0, 0]];
        return d.geometry.coordinates[0].map(function (xy) {
            return proj(xy); //d3のプロジェクション関数を使って変換
        })
    },
    getElevation: 10,
    getFillColor: [80, 80, 80],
    getLineColor: [80, 0, 0],
    getLineWidth: 0.1,
});

const layer = new PolygonLayer({

id: 'polygon-layer',

coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

data: data.features,

stroked: true,

filled: true,

wireframe: true,

lineWidthMinPixels: 1,

getPolygon: d => {

if (!d.geometry.coordinates || !d.geometry.coordinates[0]) return [[0, 0], [0, 0]];

return d.geometry.coordinates[0].map(function (xy) {

return proj(xy); //d3のプロジェクション関数を使って変換

})

getElevation: 10,

getFillColor: [80, 80, 80],

getLineColor: [80, 0, 0],

getLineWidth: 0.1,

});

実質一枚絵を表示しているのと変わらないので、残念ながら東西でループしたりしません。

使い所が難しいですが、geoAlbersUsaなどをDeck.glで使いたいときに活用できるかもしれません。

概要

サンプルコード

概要

投稿者: shimizu