Я работаю над картой открытых слоев, чтобы добавить векторный слой с источником локального файла geojson и gpx в проект Vuejs, но векторный слой не может быть отображен. Я тестировал за пределами 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 {amp}lt; in JSON at position 0 at JSON.parse ({amp}lt;anonymous{amp}gt;) at getObject (JSONFeature.js:197) at GeoJSON.JSONFeature.readFeatures (JSONFeature.js:53) at VectorSource.{amp}lt;anonymous{amp}gt; (featureloader.js:94) 

и для файла gpx нет ошибки, но ничего не отображается.

Я пытался добавить стиль, но результат остался прежним.

Я создал простой пример с parcel openlayers, воспроизводящий проблему ici

Я посмотрел на doc примеры openlayers, и я не вижу, что вызывает проблему в моем коде?

да я уже пытался указать полный путь. Я также переименовал в .json и это не работает. Код кажется правильным, потому что я попытался с помощью следующего кода, и он работает. Я не понимаю, почему он не работает с локальным файлом. Может быть, вам нужно добавить конфигурацию в посылку или даже веб-пакет или vuejs?

это работает :

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

Просто скопируйте папку data и внутренние файлы в папку dist .

Эта проблема возникает из-за того, что ваше приложение не может найти папку data . npm run start обслуживает сборку вашего приложения (папка dist ) на localhost:1234 . Вопрос в том, есть ли какая-либо папка данных в localhost: 1234? или «Могу ли я получить доступ к своим данным через localhost: 1234 / data?».

Чтобы решить эту проблему, как указано выше, вам нужно скопировать всю папку data папку dist .

В vue.js я переместил папку data в общую папку, и правильный относительный путь — url: '../data/pays.geojson' Я развернул приложение с помощью netlify, и оно работает. Спасибо за ваши ответы, которые помогли мне найти решение.