Question

所以最近我正在对Vue.js和OpenLayers 5进行小挑战。

我要做的第一步是创建一个简单的Open街道地图，并将我自己的GPS数据作为矢量层放置在上面。

一切顺利，直到我在Vue.js单个文件组件中的“ path” 出现问题为止。

以下是子组件的外观（用于生成GPS向量层）：

<template>
  <div>
      <input type="button" value="addGPXData" @click="addData"/>
  </div>
</template>

<script>
import Map from 'ol/Map.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import VectorSource from 'ol/source/Vector.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import GPX from 'ol/format/GPX.js';

export default {
  name: 'addGPXData',
  props: ['map'],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {
    addData: function() {
        console.log('addData_map: ', this.map);

        var style = {
            'Point': new Style({
                image: new CircleStyle({
                    fill: new Fill({
                        color: 'rgba(255,255,0,0.4)'
                    }),
                    radius: 5,
                    stroke: new Stroke({
                        color: '#ff0',
                        width: 1
                    })
                })
            }),
        };

        var vector = new VectorLayer({
            source: new VectorSource({
                //url: '.././assets/2018-08-05_17-22-37.gpx',
                //url: '.././assets/test.gpx',
                url: 'https://openlayers.org/en/v4.6.2/examples/data/gpx/fells_loop.gpx',
                crossOrigin: 'anonymous',
                format: new GPX()
            }),
            style: style['Point']
        });

        this.map.addLayer(vector);
    }
  }
}
</script>

请注意URL中的VectorSource的三行

我在那一行留下的唯一URL（带有https：//）有效 ，它是OpenLayers本身用于示例和演示的URL。 / p>

我从官员那里下载了.gpx文件，并将其与我自己的GPS文件test.gpx重命名为2018-08-05_17-22-37.gpx。我将它们放在默认资产文件夹中。我的文件系统的结构看起来像这样（我没有更改它，它最初是由Vue-cli创建的）：

--src
  --assets
    --2018-08-05_17-22-37.gpx
    --test.gpx
  --components
    --addGPXData.vue
    --mapContainer.vue
  --App.vue
  --main.js

我想知道我注释掉的这两行URL有什么问题吗？我已经阅读了官方文档，对于这种情况，我了解到一个相对的路径，该路径以“”开头。需要使用。我做到了，但是仍然行不通。我应该如何写本地文件的路径？

静态资产和路径的官方文件：

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

更新：

我已经尝试过给定的建议，谢谢您提供的所有帮助，但目前没有任何效果。 ../，@或import

然后我开始阅读OpenLayers的文档，我发现它很有趣：

OpenLayers将URL发出一个XMLHttpRequest来加载GPX文件。我认为这就是这里的问题。因为我认为我们无法在Vue中进行XMLHttpRequest来获取本地文件。因为将首先编译所有文件，然后才编译所有文件，所以我们没有类似“ ../asset/x.gpx”的路径。

我不知道我是否理解这一权利。我还要问一问，文件系统全部编译后会是什么样？

最终更新

今天，我通过将GPX文件放入公用文件夹并使用Vue-resource（GET）来解决此问题，代码如下：

    // get the GPX file
    this.$http.get(self.selectedGPX + '.gpx').then(response => {
        var GPXString = response.body;
    }, response => {
        //error callback
        console.log('Http request get error');
    });

在OpenLayers方面，我只是使用了被标记为重复的问题中的解决方案2 。我不再使用URL选项，而是选择将Vue-resource作为String加载GPX文件并进行解析，最后将已解析的要素添加到空矢量层。

Answer 1

我认为您可以解决导入文件的问题：

    import gpx from '../assets/2018-08-05_17-22-37.gpx',

    var vector = new VectorLayer({
        source: new VectorSource({
            url: gpx,
            crossOrigin: 'anonymous',
            format: new GPX()
        }),
        style: style['Point']
    });

确保webpack在gpx文件上使用file-loader。

在您的vue.config.js上：

module.exports = {
  configureWebpack: {
    module: {
        rules: [{
            test: /\.gpx$/i,
            use: [{
                loader: 'file-loader'
            }]
        }]
    }
  }
}

Answer 2

您的组件嵌套在一个文件夹深处（/components/addGPXData.vue）中，因此您只需要../即可返回到/assets目录。据我了解，您的网址必须为../assets/2018-08-05_17-22-37.gpx

Vue单个文件组件中的相对路径无法正常工作

2 个答案: