4

所以最近我正在用 Vue.js 和 OpenLayers 5 做一个小挑战。

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

事情进展顺利，直到我遇到Vue.js 单文件组件中的“路径”问题。

下面是子组件的样子（用于 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请注意in的三行VectorSource

我留下的那一行是唯一有效的 URL（带有 https://），它是来自 OpenLayers 本身的示例和演示的 URL。

我从官方下载了 .gpx 文件，并将其test.gpx与我自己的 GPS 文件一起重命名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文件放到public文件夹下，使用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-resourceas加载 GPX 文件String并对其进行解析，最后将解析后的特征添加到空矢量图层。

4

2 回答 2

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']
    });

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

在你的vue.config.js：

module.exports = {
  configureWebpack: {
    module: {
        rules: [{
            test: /\.gpx$/i,
            use: [{
                loader: 'file-loader'
            }]
        }]
    }
  }
}
于 2018-09-05T16:32:49.837 回答
1

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

于 2018-09-05T16:17:24.210 回答