如何通过编程为Leaflet折线添加顶点（结合Leaflet PM与键盘事件）

Got it, let's tackle this keyboard shortcut feature for adding elevation-adjusted points to your Leaflet PM polyline. The core issue here is avoiding accidental edits to existing points when clicking the same map position with your mouse—especially when you just need to tweak elevation values. Here's a smooth, integrated approach that plays nicely with Leaflet PM's existing workflow:

Step 1: Add Keyboard Event Listener #

First, we'll listen for keydown events on the document, but only trigger actions when a Leaflet PM polyline is active (either being created or edited). This prevents accidental triggers when other map tools are in use.

// Listen for keyboard shortcuts
document.addEventListener('keydown', function(e) {
  // Get the active Leaflet PM editor layer
  const activeEditor = map.pm.getActiveLayer();
  
  // Only proceed if the active layer is a polyline
  if (!activeEditor || activeEditor.type !== 'polyline') return;

  // Handle 'e' key (e.g., increase elevation by 1 unit)
  if (e.key === 'e') {
    e.preventDefault(); // Block default browser behavior (like scrolling)
    addElevatedPoint(activeEditor, +1);
  }
  // Handle 'd' key (e.g., decrease elevation by 1 unit)
  else if (e.key === 'd') {
    e.preventDefault();
    addElevatedPoint(activeEditor, -1);
  }
});

Step 2: Custom Function to Add Elevation-Adjusted Points #

Create a helper function that adds a new point either based on the last point in the polyline (for sequential elevation changes) or the current mouse position (for placing points anywhere on the map with adjusted elevation).

Option A: Add Point After Last Vertex (Sequential Elevation) #

Use this if you want to extend the polyline from its last point with an elevation tweak:

function addElevatedPoint(polylineEditor, elevationDelta) {
  const currentPoints = polylineEditor.getLatLngs();
  
  // Exit if there are no existing points to base the new one on
  if (currentPoints.length === 0) {
    console.warn('No existing points to extend from!');
    return;
  }

  // Get the last point in the polyline
  const lastPoint = currentPoints[currentPoints.length - 1];
  
  // Create new point with adjusted elevation (using Leaflet's `alt` property for elevation)
  const newPoint = L.latLng(
    lastPoint.lat,
    lastPoint.lng,
    (lastPoint.alt || 0) + elevationDelta // Default to 0 if no elevation exists
  );

  // Add the new point to the polyline via Leaflet PM
  polylineEditor.addLatLng(newPoint);
  
  // Force a redraw to ensure the new point shows up immediately
  polylineEditor._layer.redraw();
}

Option B: Add Point at Current Mouse Position #

Use this if you want to place the new point wherever your mouse is on the map, with adjusted elevation:

function addElevatedPoint(polylineEditor, elevationDelta) {
  // Get the current mouse position on the map
  const mousePos = map.getMouseLatLng();
  
  if (!mousePos) {
    console.warn('Could not get mouse position!');
    return;
  }

  // Create new point with adjusted elevation
  const newPoint = L.latLng(
    mousePos.lat,
    mousePos.lng,
    (mousePos.alt || 0) + elevationDelta
  );

  polylineEditor.addLatLng(newPoint);
  polylineEditor._layer.redraw();
}

Step 3: Sync Points to Your Storage #

If you need to save these new points (including elevation data) to your existing storage system, listen for Leaflet PM's pm:vertexadded event to capture the new point and update your data:

// Listen for new points being added to the polyline
map.on('pm:vertexadded', function(e) {
  // e.latlng contains the new point's data (lat, lng, alt/elevation)
  console.log('New point added:', e.latlng);
  
  // Add your logic here to sync this point to your storage
  // savePointToDatabase(e.latlng);
});

Key Notes #

• Make sure your Leaflet PM version supports the addLatLng method (most recent versions do, but double-check if you're using an older build).
• Adjust the elevationDelta values (+1/-1) to match your project's elevation unit (meters, floors, etc.).
• If you're using a custom property for elevation instead of Leaflet's built-in alt, replace lastPoint.alt with your custom property name (e.g., lastPoint.elevation).

内容的提问来源于stack exchange，提问作者Daniel