无法使用 openlayer 6 显示矢量图层

Question

I am working on an openlayers map to add a vector layer with the source of the local geojson and gpx file in a Vuejs project, but the vector layer cannot be displayed. I tested outside of Vue.js and I have the same problem.

Voici le code :

// 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
  })
})

for the geojson file receive this error:

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)

and for the gpx file no error but nothing is displayed.

I tried to add a style but the result remains the same.

I created a simple example with parcel + openlayers reproducing the problem ici

I looked at the doc + the openlayers examples and I don't see what is causing the problem in my code?

yes i already tried to specify the full path. I also renamed in .json and it doesn't work. The code seems correct because I tried with the following code and it works. I do not understand why it does not work with the local file. Maybe you need to add a configuration in parcel or even webpack or vuejs?

this works :

// 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()
  })
})

Answer 1

Just copy the data folder and inside files into dist folder.

This problem happens because your application can't find the data folder. npm run start serve your application build ( dist folder) on localhost:1234 . The question is "Is there any data folder in localhost:1234 ?" or "Can I access my data via localhost:1234/data ?".

To solve this problem as mention above you need to copy the whole data folder into the dist folder.

Answer 2

In vue.js I moved the data folder to the public folder and the correct relative path is url: '../data/pays.geojson' .I deployed the application with netlify and it works. Thank you for your answers which helped me to find the solution.