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

【问题标题】：can' t display a vector layer using openlayer 6无法使用 openlayer 6 显示矢量图层
【发布时间】：2019-12-26 01:22:21
【问题描述】：

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

语音代码：

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

【问题讨论】：

pays.geojson 的相对路径不正确或者需要设置服务器的.geojson 的 MIME 类型。尝试指定完整路径，和/或重命名为 .json

标签： javascript vue.js openlayers-6

【解决方案1】：

只需将data 文件夹和内部文件复制到dist 文件夹即可。

出现此问题是因为您的应用程序找不到data 文件夹。 npm run start 在localhost:1234 上为您的应用程序构建（dist 文件夹）提供服务。问题是“localhost:1234 中是否有任何数据文件夹？”或“我可以通过 localhost:1234/data 访问我的数据吗？”。

要解决上述问题，您需要将整个data 文件夹复制到dist 文件夹中。

【讨论】：

非常感谢。我曾尝试移动 data 文件夹，但我没有想到 dist 文件夹。

【解决方案2】：

在 vue.js 中，我将 data 文件夹移动到 public 文件夹，正确的相对路径是 url: '../data/pays.geojson'。我使用 netlify 部署了应用程序，它可以工作。感谢您的回答，帮助我找到了解决方案。

【讨论】：