Three-dimensional Maps

Source Code

import { SpatialDb } from 'autk-db';
import { AutkMap, LayerType } from 'autk-map';

async function main() {
    const canvas = document.querySelector('canvas')!;

    // Initialize database
    const db = new SpatialDb();
    await db.init();

    // Load OSM data for a specific area via Overpass API
    await db.loadOsmFromOverpassApi({
        queryArea: {
            geocodeArea: 'New York',
            areas: ['Battery Park City', 'Financial District'],
        },
        outputTableName: 'table_osm',
        autoLoadLayers: {
            coordinateFormat: 'EPSG:3395',
            layers: ['surface', 'parks', 'water', 'roads', 'buildings'],
            dropOsmTable: true,
        },
    });

    // Initialize map
    const map = new AutkMap(canvas);
    await map.init();

    // Add all layers from the database to the map
    for (const layer of db.getLayerTables()) {
        const geojson = await db.getLayer(layer.name);
        map.loadGeoJsonLayer(layer.name, geojson, layer.type as LayerType);
    }

    map.draw();
}

main();