Estoy tratando de crear una red de línea recta en Leaflet, que en cada cruce tiene un marcador, y al arrastrar cada marcador, actualizo la posición de la polilínea correspondiente que se conecta a él.
Investigué un poco (principalmente esta pregunta ) y modifiqué un violín para reducirlo un poco e intentar que haga lo que quiero. Puedo dibujar la red con polilíneas individuales, sin embargo, necesito agregar varias líneas principales al marcador que está conectado a dos polilíneas. No puedo encontrarlo en la documentación del Folleto, pero puntué con esto:
marker_arr[1].parentLine = [polyline_a,polyline_b];Mi problema es que cuando llamo a los controladores dragstart/drag/dragend, no funciona con varias polilíneas. (Editar) He avanzado un poco en la captura de parentLines como una matriz, pero solo puedo hacer que funcione para la primera parentLine
function dragHandler(e) { var polyline=[] console.log("drag") if(e.target.parentLine.length){ polyline.push(e.target.parentLine[0]); } else { polyline.push(e.target.parentLine); } if(polyline){ var latlngPoly = polyline[0].getLatLngs(), // Get the polyline's latlngs latlngMarker = this.getLatLng(); // Get the marker's current latlng latlngPoly.splice(this.polylineLatlng, 1, latlngMarker); // Replace the old latlng with the new polyline[0].setLatLngs(latlngPoly); // Update the polyline with the new latlngs }}
¿Alguien puede señalarme la documentación sobre parentLine o cómo podría hacer que esto funcione? Usando Leaflet v1.6.0 y no puede usar versiones más recientes, ya que esto es para extender una implementación ya existente de Leaflet basada en 1.6.
Aquí hay una muestra .
Agregue al marcador las líneas principales siempre como matriz:
marker_arr[0].parentLine = [polyline_a]; marker_arr[1].parentLine = [polyline_a,polyline_b]; marker_arr[2].parentLine = [polyline_b];y luego recorra todas las líneas principales en el controlador de inicio de arrastre:
// Now on dragstart you'll need to find the latlng from the polyline which corresponds // with your marker's latlng and store it's key in your marker instance so you can use it later on: function dragStartHandler(e) { var marker = e.target; marker.polylineLatlng = {}; e.target.parentLine.forEach((line)=>{ var latlngPoly = line.getLatLngs(), // Get the polyline's latlngs latlngMarker = marker.getLatLng(); // Get the marker's current latlng for (var i = 0; i < latlngPoly.length; i++) { // Iterate the polyline's latlngs if (latlngMarker.equals(latlngPoly[i])) { // Compare marker's latlng ot the each polylines marker.polylineLatlng[L.stamp(line)] = i; // If equals store key in marker instance } } }) }Y en el controlador de arrastre:
// Now you know the key of the polyline's latlng you can change it // when dragging the marker on the dragevent: function dragHandler(e) { var marker = e.target; e.target.parentLine.forEach((line)=>{ var latlngPoly = line.getLatLngs(), // Get the polyline's latlngs latlngMarker = marker.getLatLng(); // Get the marker's current latlng latlngPoly.splice(marker.polylineLatlng[L.stamp(line)], 1, latlngMarker); // Replace the old latlng with the new line.setLatLngs(latlngPoly); // Update the polyline with the new latlngs }) }Y límpielo en el controlador dragend:
// Just to be clean and tidy remove the stored key on dragend: function dragEndHandler(e) { var marker = e.target; delete marker.polylineLatlng; console.log("end"); }