如何将线串添加至Mapbox地图？附经纬度提取函数说明

Hey there! You’re already on the right track with writing a getCoords function to strip out that unwanted elevation data from the the_geom field. Let’s refine that function and hook it up to Mapbox properly so you can render those linestrings.

Step 1: Polish the getCoords Function #

Your nested loop structure makes sense—let’s complete it to actually return cleaned 2D coordinates (replacing the temporary console.log validation). This function will iterate through your offpistes array, pull out just latitude/longitude pairs, and return an array of linestring data ready for Mapbox:

function getCoords() {
  const cleanedLinestrings = [];
  
  for (let i = 0; i < offpistes.length; i++) {
    // Skip entries where geometry data is missing
    if (!offpistes[i].the_geom) continue;
    
    const linestringCoords = [];
    // Loop through each point in the linestring
    for (let j = 0; j < offpistes[i].the_geom.coordinates.length; j++) {
      const rawPoint = offpistes[i].the_geom.coordinates[j];
      // Extract only longitude and latitude (ignore elevation value)
      linestringCoords.push([rawPoint[0], rawPoint[1]]);
    }
    
    cleanedLinestrings.push(linestringCoords);
  }
  
  return cleanedLinestrings;
}

Step 2: Add Cleaned Coordinates to Mapbox #

Once you have your stripped-down coordinates, you can feed them into Mapbox as GeoJSON features. Here’s how to integrate this with Mapbox GL JS:

// Initialize your Mapbox map (adjust settings to match your project)
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [YOUR_CENTER_LONG, YOUR_CENTER_LAT],
  zoom: 10
});

// Wait for the map to load before adding layers
map.on('load', () => {
  // Get your cleaned linestring data
  const linestrings = getCoords();
  
  // Convert the coordinate arrays into a valid GeoJSON FeatureCollection
  const geoJsonData = {
    type: 'FeatureCollection',
    features: linestrings.map(coords => ({
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: coords
      },
      properties: {} // Add custom properties (like trail names) here if needed
    }))
  };
  
  // Add a GeoJSON source to the map
  map.addSource('offpiste-trails', {
    type: 'geojson',
    data: geoJsonData
  });
  
  // Add a layer to render the linestrings
  map.addLayer({
    id: 'offpiste-trails-layer',
    type: 'line',
    source: 'offpiste-trails',
    paint: {
      'line-color': '#e63946',
      'line-width': 3,
      'line-opacity': 0.8
    }
  });
});

Quick Notes: #

• I swapped var for let/const for cleaner scoping (modern JavaScript best practice).
• The getCoords function now returns a usable array of linestring coordinates, which we convert into a proper GeoJSON structure Mapbox understands.
• Customize the paint properties (color, width, opacity) to match your map’s style.
• Don’t forget to replace placeholder values like YOUR_MAPBOX_ACCESS_TOKEN with your actual credentials.

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