如何在OpenLayers中手动加载GeoJSON图层

<script src="https://cdn.jsdelivr.net/npm/ol@6.6.1/dist/ol.js"></script>

<div id="map" style="width: 100%; height: 400px;"></div>

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'path/to/your/geojson/file.geojson' // 替换为你的GeoJSON文件路径
  })
});
map.addLayer(vectorLayer);

vectorLayer.setStyle(function(feature) {
  return new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 0, 0, 0.1)'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    })
  });
});