Gebiedsberekening

Implementatie van de verschillende manieren van gebieden tekenen gaat als volgt:

Zelf tekenen van gebieden

De mogelijkheid om gebieden zelf te tekenen was al geïmplementeerd in het Veloyd-systeem voor het maken van bezorggebieden. In de context van de afhaalpuntmodule kon deze functionaliteit eenvoudig worden hergebruikt. De gebruikers konden op de kaart navigeren en gebieden tekenen. Het enige wat toegevoegd moest worden is dat de gebruiker de getekende gebieden kon koppelen aan een gemaakt afhaalpunt.

Cirkels

Het toevoegen van cirkels rond afhaalpunten was een eenvoudige maar effectieve functie. Door de straal van de cirkel te bepalen op basis van de vervoerdersinstellingen, kon de maximale afstand van een afhaalpunt tot de ontvanger visueel worden weergegeven. Hierbij werd Leaflet, de technologie waarmee de kaart wordt getoond, gebruikt om cirkels rond afhaalpunten op de kaart te tekenen. Deze visuele representatie gaf vervoerders direct inzicht in het bereik van de afhaalpunten.

Code snippet die deze cirkels aanmaakt:

const radiusCircle = Leaflet.circle(point.address.position, {
  radius: reseller.settings.pickupPoints?.maxDistanceFromRecipient || 1000,
  color: "red",
  fillColor: "#f03",
  fillOpacity: 0.2,
});

this.circlesGroup.addLayer(radiusCircle);
radiusCircle.addTo(map);

Isochrone

Het opzetten van isochronen met behulp van Openrouteservice was een uitdagend maar waardevol onderdeel van de het tekenen van de gebieden. Door lokaal Openrouteservice te draaien met Docker en de juiste .pbf-bestanden, kon het systeem isochronen genereren. De ontvangen geoJSON-gegevens werden vervolgens gepresenteerd met behulp van Leaflet op de kaart. Deze isochronen gaven vervoerders inzicht in de reistijden vanaf afhaalpunten, wat van cruciaal belang is bij de spreiding van de afhaalpunten en het optimaliseren van het bezorgproces.

Code snippet die de isochroon opvraagt en vertoond:

async getIsochrone(position, range, profile = 'driving-car') {
    try {
        const url = process.env.NODE_ENV === 'production' ? 'https://api.openrouteservice.org' : 'http://localhost:8080/ors'
        const res = await fetch(`${url}/v2/isochrones/${profile}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Authorization: '5b3ce3597851110001cf6248b07ff78a10974a67b1ce2c30c87093c4'
            },
            body: JSON.stringify({
                locations: [[position.lng, position.lat]],
                range: [range],
                range_type: 'distance',
                smoothing: 0
            })
        })

        if (res) {
            const geoJson = await res.json()


            return geoJson
        }
    } catch (err) {
        this.setState({error: err.toString()})
    }
}

let profile;
if (reseller.settings.defaultVehicle === "bike") {
  profile = "cycling-regular";
}

const geoJson = await this.getIsochrone(
  point.address.position,
  reseller.settings.pickupPoints?.maxDistanceFromRecipient || 1000,
  profile
);

Leaflet.geoJSON(geoJson, {
  style: () => {
    return {
      color: "green",
      weight: 1,
      fillOpacity: 0.2,
      opacity: 1,
    };
  },
  onEachFeature: (feature, layer) => {
    this.isochronesGroup.addLayer(layer);
  },
}).addTo(map);