如何在OpenLayers中加载GeoJSON？现有加载方案未显示内容求解答

Hey Kristina, let's break down your problem step by step!

Your core approach is totally valid: creating an ol.layer.Vector with an ol.source.Vector to load remote GeoJSON, and ensuring coordinate system matching is exactly the standard way to load GeoJSON in OpenLayers. The fact that your code runs but doesn't display content means there's a small hiccup in the loading process—let's troubleshoot that first, then cover alternative embedding methods.

• Cross-Origin Resource Sharing (CORS) Issues: This is the most common culprit! If your website's domain is different from the BPlaced domain hosting your GeoJSON, browsers will block the request to protect security. Check your browser's console (F12 → Console tab) — if you see an error like No 'Access-Control-Allow-Origin' header is present on the requested resource, that's the problem. Fixes include adding CORS headers to your BPlaced server config, or moving the GeoJSON file to the same domain as your website.
• Incorrect URL Path: Double-check that the url: 'http://kris...' is a complete, accessible link. Try pasting it directly into your browser's address bar—if it doesn't load the GeoJSON file, you've got a typo or wrong path.
• Malformed GeoJSON: Even with matching coordinates, invalid GeoJSON syntax will fail to load. You can test this by copying your GeoJSON content and using a local validation tool, or running new ol.format.GeoJSON().readFeatures(yourGeoJSONContent) in the browser console to see if it parses correctly.
• Forgot to Add the Layer to the Map: You created vectorLayerJSON, but did you call map.addLayer(vectorLayerJSON) to attach it to your map instance? If you skip this step, the layer will never render.

Besides loading from a remote URL, here are a few reliable methods:

• Embed GeoJSON Directly in Code: If your GeoJSON is small enough, you can include the data directly in your script instead of making a remote request:

  // Replace with your actual GeoJSON data
  const geojsonData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [100.0, 0.0]},
        "properties": {"name": "Test Point"}
      }
    ]
  };
  
  const vectorLayerJSON = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: new ol.format.GeoJSON().readFeatures(geojsonData, {
        dataProjection: 'EPSG:4326', // Default GeoJSON coordinate system
        featureProjection: map.getView().getProjection() // Match your map's projection
      })
    })
  });
  map.addLayer(vectorLayerJSON);
  

• Manual Loading with Fetch API: This gives you more control over error handling and debugging:

  fetch('http://kris...')
    .then(response => {
      if (!response.ok) throw new Error(`Request failed: ${response.status}`);
      return response.json();
    })
    .then(data => {
      const features = new ol.format.GeoJSON().readFeatures(data, {
        featureProjection: map.getView().getProjection()
      });
      const vectorSource = new ol.source.Vector({ features: features });
      const vectorLayerJSON = new ol.layer.Vector({ source: vectorSource });
      map.addLayer(vectorLayerJSON);
    })
    .catch(error => console.error('Failed to load GeoJSON:', error));
  

• Local File Loading (Development Only): For local testing, you can load GeoJSON from a local file, but note that browsers often restrict file:// protocol requests. Instead, spin up a simple local server (like python -m http.server if you have Python installed) to run your project—this avoids CORS and permission issues.

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