не удается отобразить векторный слой с помощью openlayer 6

не удается отобразить векторный слой с помощью openlayer 6

18.12.2019 05:33:39 Просмотров 44 Источник

Я работаю над картой openlayers, чтобы добавить векторный слой с источником локального файла geojson и gpx в проекте Vuejs, но векторный слой не может быть отображен. Я проверял за пределами вю.у нас с Джей-Си одна и та же проблема.

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

для файла 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)

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

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

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

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

да я уже пытался указать полный путь. Я тоже переименовался в .jsonи это не работает. Код кажется правильным, потому что я попытался использовать следующий код, и он работает. Я не понимаю, почему он не работает с локальным файлом. Может быть, вам нужно добавить конфигурацию в parcel или даже webpack или 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()
  })
})
У вопроса есть решение - Посмотреть?

Ответы - не удается отобразить векторный слой с помощью openlayer 6 / can' t display a vector layer using openlayer 6

Является ответом!
Mahdi Mahmoodian

24.12.2019 02:50:27

Просто скопируйте папку dataи внутренние файлы в localhost:1234. dataслужит для сборки вашего приложения (npm run start. Вопрос заключается в следующем: "есть ли какая-либо папка данных в localhost: 1234 ?"или "Могу ли я получить доступ к своим данным через localhost:1234/data ?".

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

https://stackoverflow.com/questions/59394267/can-t-display-a-vector-layer-using-openlayer-6/59468393#comment105136790_59468393
Огромное спасибо. Я попытался переместить папку data, но не подумал о папке dist.
sandrine

25.12.2019 08:22:21

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

Закрыть X