0
161
Visualizaçõesagregando puntos de instrucción a una línea de ruta usando leaflet.js
uso leaflet.js para mostrar una ruta en mi proyecto web. He dominado todo con éxito, excepto que no puedo mostrar puntos de instrucción en la ruta.
Usé el siguiente código para mostrar la ruta en el mapa:
api.getRoute(routingLink).then(res =>{ const routeLayer = L.geoJSON(res.data.features,{}).addTo(layerGroup) //shows route on the map })mi pregunta es ¿cómo puedo agregar puntos de instrucción a la ruta que muestra la instrucción en la ventana emergente al hacer clic en ella?
aquí una captura de pantalla de la ruta que muestra la ruta entre los lugares pero no las instrucciones:
1 Respostas
Responde à pergunta0
Yo mismo pude resolver el problema. Dejaré la pregunta en línea si es interesante para alguien más. y aunque resuelto de la siguiente manera:
api.getRoute(routingLink).then(res =>{ var geojsonMarkerOptions = {//Options for circleMarker radius: 8, fillColor: "#ffffff", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 } const routeLayer = L.geoJSON(res.data.features,{ onEachFeature(feature,layer){//the data from each feature in my situation it was a single feature, i used a route between only two places. const featureCoords = feature.geometry.coordinates[0] for(let step of feature.properties.legs[0].steps){//iterate throw all Steps if(step.instruction){//if the step has instruction attribute, add a circleMarker let instructionPoint = L.circleMarker([featureCoords[step.from_index][1],featureCoords[step.from_index][0]], geojsonMarkerOptions).addTo(layerGroup) instructionPoint.addEventListener("click",e =>{// add eventListener that show a popup with the instraction. L.popup().setLatLng([featureCoords[step.from_index][1],featureCoords[step.from_index][0]]).setContent(step.instruction.text).addTo(layerGroup) }) } } }, }).addTo(layerGroup) //add the route to the layerGroupNota: Estoy usando la API provista desde https://apidocs.geoapify.com/playground/routing .
una captura de pantalla muestra la ruta después del marcador circular con instrucciones añadidas
