这个问题在这里已有答案:
所以最近我对Vue.js和OpenLayers 5进行了一次小挑战 .
我想要做的第一步是创建一个简单的Open街道 Map ,并将我自己的GPS数据作为矢量图层放在其上 .
事情进展顺利,直到我在Vue.js单个文件组件中遇到问题 "path" .
Below is what the child component looks like (for the GPS vector layer generation):
<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>
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创建的):
--src
--assets
--2018-08-05_17-22-37.gpx
--test.gpx
--components
--addGPXData.vue
--mapContainer.vue
--App.vue
--main.js
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?
静态资产和路径的官方文档:
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
update:
我已经尝试了给出的建议,感谢所有帮助过的人,但目前没有任何作用 . ../
, @
或 import
我开始阅读OpenLayers的文档,我发现它非常有趣:
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
今天我通过将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方面,我刚刚使用了标记为重复的问题的 solution 2 . 我不再使用 URL
选项并选择将 Vue-resource
作为 String
加载GPX文件并解析它,最后将解析后的功能添加到空矢量图层 .
2 回答
我想你可以解决这个导入文件:
确保
webpack
正在gpx文件上使用file-loader
.在
vue.config.js
:您的组件嵌套在一个文件夹深处(
/components/addGPXData.vue
),因此您只需../
即可返回/assets
目录 . 从我的理解你的网址必须是../assets/2018-08-05_17-22-37.gpx