Home Articles


Viewed 494 times


所以最近我对Vue.js和OpenLayers 5进行了一次小挑战 .

我想要做的第一步是创建一个简单的Open街道 Map ,并将我自己的GPS数据作为矢量图层放在其上 .

事情进展顺利,直到我在Vue.js单个文件组件中遇到问题 "path" .

Below is what the child component looks like (for the GPS vector layer generation):

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

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']


Please notice the three lines of URL in VectorSource

The line I left there is the only URL (with https://) that works ,它是来自OpenLayers本身的URL,用于示例和演示 .

我从官方下载了.gpx文件,并将其与我自己的GPS文件 2018-08-05_17-22-37.gpx 一起重命名为 test.gpx . 我把它们放到默认资产文件夹中 . 我的文件系统的结构看起来像这样(我没有改变它,它最初是由Vue-cli创建的):


I would like to know what is wrong with these two lines of URL which I commented out? I have read the official document and I understand for those situations, a relative path, which begins with "." need to be used. I did that, but it still doesn't work. How should I write the path for local files?




我已经尝试了给出的建议,感谢所有帮助过的人,但目前没有任何作用 . ../@import


OpenLayers将 URL 并创建一个XMLHttpRequest来加载GPX文件 . 我认为这就是问题所在 . 因为我认为我们可以't make XMLHttpRequest in Vue to get a local file. Because all the files will be compiled first and at the end, we don'有一条像'../asset/x.gpx'这样的路径 .

我不知道我是否明白这一点 . 我还会问一下编译后文件系统会是什么样子?

The final update


// 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方面,我刚刚使用了标记为重复的问题的 solution 2 . 我不再使用 URL 选项并选择将 Vue-resource 作为 String 加载GPX文件并解析它,最后将解析后的功能添加到空矢量图层 .

2 Answers

  • 1

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

  • 0


    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 .


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