Javascript 如何从url呈现或显示地图

在我复制的以下代码中：

https://openlayers.org/workshop/en/vector/geojson.html

如下图所示，它需要url：

url: './data/countries.json'

当我运行代码时，没有任何地图显示为带深蓝色背景的放大和缩小加号和减号 请让我知道如何找到countries.json

代码：

const map = new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [13.063561,52.391842],
    zoom: 2
  })
});

尝试：

const map = new Map({
  target: 'map-container',
  layers: [
    new VectorLayer({
      source: new VectorSource({
        format: new GeoJSON(),
        url: './data/countries.json'
      })
    })
  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [13.063561,52.391842],
    zoom: 2
  })
});

我还修改了代码，如下所示：

const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: './data/countries.geojson',
    format: new GeoJSON(),
    defaultProjection :'EPSG:4326', projection: 'EPSG:3857'
  })
})

const map = new Map({
  target: 'map-container',
  layers: [vectorLayer],
  view: new View({
    projection: 'EPSG:4326',
    center: [0,0],
    zoom: 2
  })
});
sync(map)

也试过

countries.json
         .geojson 
         .geo.json
         

---

但是没有显示任何内容

要使此代码正常工作，我已执行以下操作：

我正在使用ubuntu，并且遵循了上的说明

我从车间下载了文件夹，并将其解压缩

我进入解压文件夹，运行“npm安装”

我写在index.html文件中

开放层
html，正文，#映射容器{
保证金：0；
身高：100%；
宽度：100%；
字体系列：无衬线；
背景色：#04041b；
}

为使此代码正常工作，我已完成以下操作：

我正在使用ubuntu，并且遵循了上的说明

我从车间下载了文件夹，并将其解压缩

我进入解压文件夹，运行“npm安装”

我写在index.html文件中

开放层
html，正文，#映射容器{
保证金：0；
身高：100%；
宽度：100%；
字体系列：无衬线；
背景色：#04041b；
}

您可以从下载“原始”文件，并将其放入您自己的数据中folder@Mike请告诉我如何下载好吗？在原始模式下没有downloag按钮，使用浏览器的“保存”或“另存为”option@syduki现在，我按照你的建议下载了它，但没有显示任何内容…你知道如何修复它吗？请下载“原始”文件，并将其放置在您自己的数据中folder@Mike请告诉我如何下载好吗？在原始模式下没有downloag按钮，使用浏览器的“保存”或“另存为”option@syduki现在，我按照你的建议下载了它，但没有显示任何内容…你知道如何修复它吗