Add via routing
This commit is contained in:
don philipe
@@ -8,79 +8,91 @@ const lib = new function () {
|
||||
this.init = function () {
|
||||
$.get("/config", function(result) { ghbase = result["ghbase"]; });
|
||||
|
||||
const map = new maplibregl.Map({ container: 'map',
|
||||
style: 'spacedon.json',
|
||||
center: [13, 51],
|
||||
zoom: 6
|
||||
});
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
const map = new maplibregl.Map({ container: 'map',
|
||||
style: 'spacedon.json',
|
||||
center: [13, 51],
|
||||
zoom: 6
|
||||
});
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
|
||||
const startMarker = new maplibregl.Marker({color: "#00FF00", draggable: true}).setLngLat([0, 0]);
|
||||
const finishMarker = new maplibregl.Marker({color: "#FF0000", draggable: true}).setLngLat([0, 0]);
|
||||
startMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat());});
|
||||
finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat());});
|
||||
const viaMarkers = new Array();
|
||||
const startMarker = new maplibregl.Marker({color: "#00FF00", draggable: true}).setLngLat([0, 0]);
|
||||
const finishMarker = new maplibregl.Marker({color: "#FF0000", draggable: true}).setLngLat([0, 0]);
|
||||
const viaMarkers = new Array();
|
||||
startMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
|
||||
finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
|
||||
|
||||
map.on('mousemove', function (e) {
|
||||
var features = map.queryRenderedFeatures(e.point);
|
||||
// Limit the number of properties we're displaying for
|
||||
// legibility and performance
|
||||
var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
|
||||
var displayFeatures = features.map(function (feat) {
|
||||
var displayFeat = {};
|
||||
displayProperties.forEach(function (prop) {
|
||||
displayFeat[prop] = feat[prop];
|
||||
});
|
||||
return displayFeat;
|
||||
});
|
||||
document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
|
||||
});
|
||||
map.on('click', function (e) {
|
||||
let coordinates = e.lngLat;
|
||||
map.on('mousemove', function (e) {
|
||||
var features = map.queryRenderedFeatures(e.point);
|
||||
// Limit the number of properties we're displaying for
|
||||
// legibility and performance
|
||||
var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
|
||||
var displayFeatures = features.map(function (feat) {
|
||||
var displayFeat = {};
|
||||
displayProperties.forEach(function (prop) {
|
||||
displayFeat[prop] = feat[prop];
|
||||
});
|
||||
return displayFeat;
|
||||
});
|
||||
document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
|
||||
});
|
||||
map.on('click', function (e) {
|
||||
let coordinates = e.lngLat;
|
||||
|
||||
// Ensure that if the map is zoomed out such that multiple
|
||||
// copies of the feature are visible, the popup appears
|
||||
// over the copy being pointed to.
|
||||
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
// Ensure that if the map is zoomed out such that multiple
|
||||
// copies of the feature are visible, the popup appears
|
||||
// over the copy being pointed to.
|
||||
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
|
||||
const contextmenu = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
|
||||
.addTo(map);
|
||||
const contextmenu = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
|
||||
.addTo(map);
|
||||
|
||||
let featbtn = document.getElementById("btn-feat");
|
||||
featbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
const features = map.queryRenderedFeatures(e.point);
|
||||
const prop = features.map(function (feat) {
|
||||
return feat["properties"];
|
||||
});
|
||||
const featPopup = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(JSON.stringify(prop))
|
||||
.addTo(map);
|
||||
};
|
||||
let startbtn = document.getElementById("btn-start");
|
||||
startbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
startMarker.onMap = true;
|
||||
if (finishMarker.onMap) {
|
||||
lib.doRouting(map, coordinates, finishMarker.getLngLat());
|
||||
}
|
||||
};
|
||||
let finishbtn = document.getElementById("btn-finish");
|
||||
finishbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
finishMarker.onMap = true;
|
||||
if (startMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), coordinates);
|
||||
}
|
||||
};
|
||||
});
|
||||
let featbtn = document.getElementById("btn-feat");
|
||||
featbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
const features = map.queryRenderedFeatures(e.point);
|
||||
const prop = features.map(function (feat) {
|
||||
return feat["properties"];
|
||||
});
|
||||
const featPopup = new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(JSON.stringify(prop))
|
||||
.addTo(map);
|
||||
};
|
||||
let startbtn = document.getElementById("btn-start");
|
||||
startbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
startMarker.onMap = true;
|
||||
if (finishMarker.onMap) {
|
||||
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
let finishbtn = document.getElementById("btn-finish");
|
||||
finishbtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
|
||||
finishMarker.onMap = true;
|
||||
if (startMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
|
||||
}
|
||||
};
|
||||
let viabtn = document.getElementById("btn-via");
|
||||
viabtn.onclick = function () {
|
||||
contextmenu.remove();
|
||||
const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
|
||||
marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
|
||||
marker.addTo(map);
|
||||
marker.onMap = true;
|
||||
viaMarkers.push(marker);
|
||||
if (startMarker.onMap && finishMarker.onMap) {
|
||||
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
this.doRouting = function (map, start, finish, vias = undefined, vehicle = "foot") {
|
||||
@@ -93,9 +105,12 @@ const lib = new function () {
|
||||
points_encoded: false
|
||||
};
|
||||
if (vias != undefined && vias.length > 0) {
|
||||
|
||||
for (let marker of vias) {
|
||||
const lnglat = marker.getLngLat()
|
||||
data.points.push([lnglat["lng"], lnglat["lat"]]);
|
||||
}
|
||||
}
|
||||
data.points.push([finish.lng, finish.lat])
|
||||
data.points.push([finish.lng, finish.lat]);
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: ghbase + "/route",
|
||||
|
||||
Reference in New Issue
Block a user