OpenLayers 6：示例框选择错误

Question

完全遵循以下 openlayers 站点的示例：

https://openlayers.org/en/latest/examples/box-selection.html?q=feature

本地我有以下错误：

Uncaught SyntaxError: Unexpected token <in JSON at position 0
    at JSON.parse (<anonymous>)
    at getObject (JSONFeature.js: 197)
    at GeoJSON.JSONFeature.readFeatures (JSONFeature.js: 53)
    at VectorSource. <anonymous> (featureloader.js: 94)

我认为错误来自尝试在本地加载 geojson 文件。

var vectorSource = new VectorSource ({
  url: 'data/geojson/countries.geojson',
  format: new GeoJSON ()
});

countries.geojson: https://r68tk.csb.app/data/geojson/countries.geojson

如何解决？

Answer 1

我找到了解决方案。

在 OpenLayers 开发应用程序的过程中，不幸的是由于 CORS.

在本地加载文件（geojson、png 等）时出现问题

问题：

关于该主题的优秀文章 here。

为了解决这个问题，我使用了名为“moesif CORS extension”的 Chrome 扩展。

启用它后，我可以轻松加载 .geojson 文件。

成功了！

在这个地址有更多的方法可以为您的开发环境停止 CORS：https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow -origin-works-d97d55946d9

我希望能对这些信息有所帮助！