Published
Edited
Feb 26, 2020
// 道路中心線: rdcl, 鉄道中心線: railcl, 河川中心線: rvrcl, 基盤地図情報: fdg
tileset = tilesets.fdg
center = [140.475, 36.375]
viewZoom = 16
d3 = require('d3')
d3fetch = require("d3-fetch@1")
d3tile = require('d3-tile')
tau = 2 * Math.PI
zoomReducer = Math.pow(2, tileZoom - viewZoom)
projection = d3.geoMercator()
.center(center)
.scale(256 * Math.pow(2, viewZoom) / tau)
.translate([size.width / 2, size.height / 2])
path = d3.geoPath().projection(projection)
tiles = d3tile.tile()
.size([size.width * zoomReducer, size.height * zoomReducer])
.scale(projection.scale() * tau * zoomReducer)
.translate(projection([0, 0]).map(v => v * zoomReducer))()
tasks = tiles.map(obj => d3fetch.json(`${tileset.url}${obj[2]}/${obj[0]}/${obj[1]}.geojson`)
.catch(() => undefined)
)
datasets = Promise.all(tasks)
.then(data => data.filter(datum => datum !== undefined))
/*
{
const svg = d3.select(DOM.svg(size.width, size.height));
const g = svg.selectAll('.tile')
.data(datasets)
.enter()
.append('g')
.attr('class', 'tile');
g.selectAll('path')
.data(d => d.features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', 'none')
.attr('stroke', 'silver')
.attr('stroke-width', 1);
return svg.node();
}
*/
/** 普通のJavaScriptであれば、Promise.all(tasks).then()の中に処理を書く
* Promise.all(tasks).then(data => {
* const g = svg.selectAll('.tile')...
* });
*/
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
