getDb = async () => {
// JSDELIVR_BUNDLESからDuckDBのバンドルを選択して取得する
const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
// 新しいWeb Workerを作成するためのURLを生成する
// Blobを使用して、インポートスクリプトを含む新しいJavaScriptファイルを作成する
const worker_url = URL.createObjectURL(
new Blob([`importScripts("${bundle.mainWorker}");`], {
type: "text/javascript",
})
);
// 上記で作成したURLを使用して新しいWeb Workerを作成
const worker = new Worker(worker_url);
// コンソールにログを出力するためのロガーを作成
const logger = new duckdb.ConsoleLogger();
// 作成したWeb Workerとロガーを使用して、非同期DuckDBインスタンスを作成
const db = new duckdb.AsyncDuckDB(logger, worker);
// DuckDBインスタンスを初期化
await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
// Web WorkerのURLを解放
URL.revokeObjectURL(worker_url);
// 初期化されたDuckDBインスタンスを返す
return db;
}
db = getDb()
conn = db.connect()
Extensionloaded = {
await conn.query(`INSTALL spatial;`);
await conn.query(`LOAD spatial;`);
return true;
}
{
Extensionloaded;
container.innerHTML = "";
const deckgl = new deck.DeckGL({
container,
controller: true,
initialViewState:{
longitude: 139.7658155,
latitude: 35.681386,
zoom: 9.5,
minZoom: 5,
maxZoom: 15,
}
});
const tileLayer = new deck.TileLayer({
id: "tile-layer",
data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
minZoom: 0,
maxZoom: 19,
tileSize: 256,
renderSubLayers: (props) => {
const {
//type error: Property 'east' does not exist on type 'TileBoundingBox'.
bbox: { west, south, east, north }
} = props.tile;
return new deck.BitmapLayer(props, {
//@ts-ignore
data:undefined,
image: props.data,
bounds: [west, south, east, north]
});
}
});
const geojsonLayer = new deck.GeoJsonLayer({
id:"geojson-layer",
data:geojson,
pointRadiusMinPixels:6,
getLineWidth: 10,
getPointRadius: 30,
getFillColor: [255, 0, 0],
getLineColor: [0, 0, 0],
})
deckgl.setProps({layers: [tileLayer, geojsonLayer]})
}
duckdb = import("https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm/+esm")
JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles()
deck = require.alias({
// optional dependencjei
h3: {}
})('deck.gl@^8.3.7/dist.min.js')
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.
