Mapbox GL中添加自定义GeoJSON实现印度邦名搜索的技术咨询

Great question! Mapbox GL Geocoder does support custom data sources like your Indian states GeoJSON file—here's exactly how to set it up step by step:

Step 1: Prepare Your GeoJSON File #

Make sure your GeoJSON is hosted at a public, accessible URL (like the raw GitHub URL for your file). For example, use the "Raw" button on your GitHub file to get a direct link that returns only the JSON data.

Step 2: Load Your GeoJSON as a Map Source #

First, add your Indian states GeoJSON as a source to your Mapbox map. You can also add an optional layer to visualize the states if needed:

// Add the GeoJSON source to the map
map.addSource('indian-states', {
  type: 'geojson',
  data: 'YOUR_GITHUB_RAW_GEOJSON_URL' // Replace with your actual raw URL
});

// Optional: Add a layer to display state boundaries
map.addLayer({
  id: 'indian-states-layer',
  type: 'fill',
  source: 'indian-states',
  paint: {
    'fill-color': '#6699cc',
    'fill-opacity': 0.3,
    'fill-outline-color': '#333333'
  }
});

Step 3: Configure the Geocoder to Use Your Custom Data #

Instead of relying on Mapbox's default geocoding API, you'll use the localGeocoder option to search your own GeoJSON. This function handles the search logic and returns matching state features.

Here's the full setup:

// Fetch and store your GeoJSON features first
let statesFeatures;
fetch('YOUR_GITHUB_RAW_GEOJSON_URL')
  .then(response => response.json())
  .then(data => {
    statesFeatures = data.features;
  });

// Create the local geocoder function
const localGeocoder = (query) => {
  const results = [];
  if (!statesFeatures) return results;

  // Normalize query for case-insensitive search
  const lowerQuery = query.toLowerCase();

  // Match state names against the search query
  statesFeatures.forEach(feature => {
    // Replace 'state_name' with your actual property key for state names
    const stateName = feature.properties.state_name.toLowerCase();
    if (stateName.includes(lowerQuery)) {
      // Calculate centroid for polygon features (use @turf/centroid library)
      const centroid = turf.centroid(feature);
      results.push({
        text: feature.properties.state_name,
        place_name: `Indian State: ${feature.properties.state_name}`,
        center: centroid.geometry.coordinates,
        geometry: feature.geometry
      });
    }
  });

  // Return top 5 matching results
  return results.slice(0, 5);
};

// Initialize the Geocoder with your custom logic
const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  localGeocoder: localGeocoder,
  localGeocoderOnly: true, // Set to true to only use your custom data
  placeholder: 'Search for an Indian state...',
  mapboxgl: mapboxgl
});

// Add the geocoder to your page
document.getElementById('geocoder-container').appendChild(geocoder.onAdd(map));

Key Notes & Troubleshooting #

• Replace placeholders: Swap YOUR_GITHUB_RAW_GEOJSON_URL with your actual raw link, and state_name with the exact property key for state names in your GeoJSON.
• Centroid calculation: For polygon features (standard state boundaries), use the @turf/centroid library to get a valid center point for the geocoder results.
• Combine with Mapbox API: If you want to mix your custom state data with Mapbox's default geocoding, remove the localGeocoderOnly: true option.
• Debugging: Add console.log statements inside the localGeocoder function to check if your features are loading and matching queries correctly.

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