Kaartbeeld

Voor onderstaande voorbeelden maken we gebruik van de volgende setup zoals beschreven in de setup

Met het onderdeel polka.viewer.view kunnen we het kaartbeeld besturen.

Onderstaand voorbeeld gebruikt view.animate voor een rustige transitie naar de gekozen locatie.

Toon een locatie op de kaart

polka/examples/kaartbeeld/location.js

export const location = (polka, button) => {

    /** punt in Arnhem */
    const location = [190011.29205868338, 444044.58196267043];

    const gotoLocation = (e) => {

        /** View submodule */
        const view = polka.viewer.view;
        const markers = polka.markers;

        /** zet een marker neer op de kaart */
        markers.createMarker(location, true);

        /** Beweeg naar punt via animatie */
        view.animate({ center: location, zoom: 10 });
    };
    button.addEventListener('click', gotoLocation);
};

Zoom niveau aanpassen

polka/examples/kaartbeeld/zoom.js

export const zoom = (polka, slider) => {

    /** View module */
    const view = polka.viewer.view;

    /** initiele waarde */
    slider.value = view.zoom;

    /** luister naar feedback van de view */
    view.addEventListener("change:zoom", (e) => {
        const { zoom } = e.detail;
        slider.value = view.zoom;
    });

    /** verander zoom niveau wanneer slider veranderd */
    slider.addEventListener('input', (e) => {
        view.zoom = slider.value;
    })
};

Kaartbeeld verschuiven

polka/examples/kaartbeeld/pan.js

export const pan = (polka, { up, down, left, right }) => {

    /** View module */
    const view = polka.viewer.view;

    /**
     * huidig center als coordinate [x,y]
     */
    let current = view.center;

    /** luister naar feedback van de view */
    view.addEventListener("change:center", (e) => {
        const { center } = e.detail;
        current = center;
    });

    /** Veranderd de center voor panning  */
    function modifyCenter(x = 0, y = 0) {
        let newCords = [current[0] + x, current[1] + y];
        view.center = newCords;
    }

    /** Roep de modifyCenter functie aan bij de button click en veranderd daarbij de center */
    left.addEventListener('click', modifyCenter.bind(null, -1000, 0))
    right.addEventListener('click', modifyCenter.bind(null, 1000, 0))
    up.addEventListener('click', modifyCenter.bind(null, 0, 1000))
    down.addEventListener('click', modifyCenter.bind(null, 0, -1000))
};

Huidig kaartbeeld uitlezen

polka/examples/kaartbeeld/extent.js

/** @TODO make this available in View module? */
import {fromExtent} from 'ol/geom/Polygon';

export const extent = (polka, table) => {


    /** View module */
    const view = polka.viewer.view;

    /** WKT conversie helper */
    const format = polka.utils.WKT();

    const tilegrid = view.projection.tilegrid;
    const tilesize = tilegrid.getTileSize();
    const numbers = new Intl.NumberFormat('nl-NL', { maximumSignificantDigits: 3 });



    /** initiele waardes */
    const resolution = tilegrid.getResolution(Math.round(view.zoom));
    table.rows[0].cells[1].innerHTML = resolution;
    table.rows[1].cells[1].innerHTML = Math.round(view.zoom);
    table.rows[2].cells[1].innerHTML = `${numbers.format(Math.round(tilesize*resolution))} m`;
    const wkt = format.writeGeometry(fromExtent(view.extent), {
        dataProjection: view.projection,
        featureProjection: view.projection,
    });
    table.rows[3].cells[1].innerHTML = view.extent;

    /** converteer naar "GPS" coordinaten */
    const latlon = polka.utils.Point(view.center).transform('EPSG:28992', 'EPSG:4326').getCoordinates();
    table.rows[4].cells[1].innerHTML = latlon;

    /** luister naar feedback van de view */
    view.addEventListener("change:property", (e) => {
        const { zoom, center } = e.detail;

        const resolution = tilegrid.getResolution(Math.round(zoom));

        /** laat de nieuwe waardes zien wanneer kaartbeeld veranderd */
        table.rows[0].cells[1].innerHTML = resolution;
        table.rows[1].cells[1].innerHTML = Math.round(zoom);
        table.rows[2].cells[1].innerHTML = `${numbers.format(Math.round(tilesize*resolution))} m`;

        const extent = view.extent;
        const wkt = format.writeGeometry(fromExtent(extent), {
            dataProjection: view.projection,
            featureProjection: view.projection,
        });
        table.rows[3].cells[1].innerHTML = extent;

        /** converteer naar "GPS" coordinaten */
        const latlon = polka.utils.Point(center).transform('EPSG:28992', 'EPSG:4326').getCoordinates();
        table.rows[4].cells[1].innerHTML = latlon;
    });
};