Javascript can'；t使用openlayer 6显示矢量层

我正在处理openlayers地图，以便在Vuejs项目中添加带有本地geojson和gpx文件源的矢量层，但无法显示矢量层。 我在Vue.js之外进行了测试，我也遇到了同样的问题

Voici le代码：

// classes required to display the map
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

// Feature format for reading and writing data in the GPX format.
import GPX from 'ol/format/GPX'

// Feature format for reading and writing data in the GeoJSON format.
import GeoJSON from 'ol/format/GeoJSON'

// Provides a source of features for vector layers.
import VectorSource from 'ol/source/Vector'

// Vector data that is rendered client-side.
import VectorLayer from 'ol/layer/Vector'

// Openstreet Map Standard
const openStreetMapLayer = new TileLayer({
  source: new OSM(),
})

// Vector data source in GeoJSON format
const vectorGeoJSON = new VectorLayer({
  source: new VectorSource({
    url: 'data/pays.geojson',
    format: new GeoJSON()
  })
})

// Vector data source in GPX format
const vectorGPX = new VectorLayer({
  source: new VectorSource({
    url: 'data/capitales.gpx',
    format: new GPX()
  })
})

// declare the map 
new Map({
  layers: [openStreetMapLayer, vectorGPX, vectorGeoJSON],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
})

对于geojson文件，请接收以下错误：

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)

---

只需将

数据

文件夹和内部文件复制到

dist

文件夹中即可。

出现此问题的原因是应用程序找不到

数据

文件夹

npm运行开始

在

localhost:1234

上为应用程序构建（

dist

文件夹）提供服务。问题是“localhost:1234中是否有任何数据文件夹？”或“我可以通过localhost:1234/data访问我的数据吗？”

---

要解决上述问题，您需要将整个

data

文件夹复制到

dist

文件夹中。

在vue.js中，我将

data

文件夹移动到

public

文件夹中，正确的相对路径是

url:'../data/pays.geojson'

。我使用netlify部署了该应用程序，它可以正常工作。

---

感谢您的回答，帮助我找到了解决方案。

要么是

的相对路径不正确，要么是
的服务器MIME类型不正确。需要设置geojson
。请尝试指定完整路径，和/或重命名为
.json
非常感谢。我曾试图移动
数据
文件夹，但没有想到
dist
文件夹。
// Vector data source in GeoJSON format
const vectorGeoJSON = new VectorLayer({
  source: new VectorSource({
    url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/pays.geojson',
    format: new GeoJSON()
  })
})

// Vector data source in GPX format
const vectorGPX = new VectorLayer({
  source: new VectorSource({
    url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/capitales.gpx',
    format: new GPX()
  })
})